Reactのプロジェクトの作成は、結構カンタン。
とにかく、やってみよう。
※ Node.jsがインストールされていることが前提です。
Reactのプロジェクトを作成するためのコマンドを調べる。
上記のサイトに行って、「npx create-react-app」コマンドをコピーする。
npx create-react-app 「プロジェクト名」 --template cra-template-pwa
「プロジェクト名」の所には自分の好きなプロジェクト名を入れましょう。
Reactのプロジェクトを作りたいディレクトリからコマンド投入すると、Reactのインストールが始まります。
インストールには数分かかります。
Reactを起動する
自分で作ったReactのプロジェクトのディレクトリに移動し、
npm start
と投入すれば、ローカルサーバーが起動しReactの画面が表示されます。
これでReactのプロジェクトの作成は終了です。
カンタンですね。
Reactのプロジェクトを作成した時のファイル等について
インストールされたファイルなどを簡単に説明します。
index.js
index.jsの①の所が「Appコンポーネントを表示するよ」という記述。
ですから、Reactにいろいろ組込むにはApp.jsに記述していくことになります。
②の「<React.StrictMode>」というのは、StrictModeといって、開発時のトラブルシュートに使われます。
- 安全でないライフサイクルの特定
- レガシーな文字列 ref API の使用に対する警告
- 非推奨な findDOMNode の使用に対する警告
- 意図しない副作用の検出
- レガシーなコンテクスト API の検出
- state の再利用性を保証する
等といろいろありますが、現時点の私にはどんな利点があるか体験していません。
ただ、「consol.log」を仕込むと、同じログが２回出てうざい、という現象はこのStrictModeが原因です。
App.js
Reactのプロジェクトを作成して、「npm start」で起動すると、Reactのマークが回転している画面が出てきます。
そのJSXの記述を削除してプロジェクトの作成を始めましょう。
上記のように、Reactのロゴなんかを削除してしまいます。
結果、こんなプレーンなプロジェクトができます。
gitについて
npx create-react-appでReactのプロジェクトを作成すると、もれなくgitの環境が付いてきます。
VSCodeで作業していると、gitのマークの所に数字が付くのでちょっとうざい。
でも、作成しているプロジェクトを保管しておきたいならgithubに補完するのがおススメ。
gitの操作により修正の戻しとかもできるので、それなりに便利。
プロジェクトの保管や戻しなんて使わない
というのであれば、gitに関する表示は無視ですね。
※ 本記事はReactに関する備忘録として書きました。
