著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
ランディングページは、商品やサービスを宣伝するWebページであり、顧客がサイトに到着したときにランディングする場所を提供します。 企業にとって、それらはオンライン広告やマーケティングメールのリンク先になることがよくあります。 商用ランディングページの主な目標は、訪問者を潜在的なクライアントまたは顧客に変えることです。 このため、ランディングページを作成することは、Web開発者にとって貴重なスキルです。
このチュートリアルでは、次の2つのテクノロジーを使用してランディングページを作成します。
-
Gatsby 、静的Webサイトを生成するように設計されたReactベースのフロントエンドフレームワーク。 Gatsbyを使用すると、ランディングページをすばやく生成できます。これは、さまざまなプロジェクトの多数のランディングページを作成するときに役立ちます。
-
TypeScript はJavaScriptのスーパーセットであり、ビルド時に静的型と型チェックを導入します。 TypeScriptは、コードが誇張される前にコードの問題を開発者に警告する強力な型付けシステムにより、JavaScriptの最も広く使用されている代替手段の1つになっています。 ランディングページの場合、TypeScriptは、売り込みのテキストや申し込みフォームの入力など、動的な値に対して無効に入力されたデータを防ぐのに役立ちます。
このチュートリアルで作成するランディングページの例は、書店を宣伝し、ランディングページの次の一般的なコンポーネントを含みます。
- 書店のヘッダー
- ストアに関連するヒーロー画像
- 機能/サービスのリストを含む売り込み
- ビジネスに関するメーリングリストに読者を追加するために使用できる電子メールサインアップフォーム
サンプルプロジェクトは、チュートリアルが終了するまでに次の画像のようになります。
前提条件
-
開発サーバーを実行してパッケージを操作するには、マシンにNodeとnpmをインストールする必要があります。 このチュートリアルは、Node.jsバージョン14.17.2およびnpm6.14.13でテストされています。 macOSまたはUbuntu20.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはPPAを使用したインストールセクションの手順に従います。 Ubuntu20.04
