Reactプロジェクトの作成

組立のイメージ プログラミング

Reactのプロジェクトの作成は、結構カンタン。

とにかく、やってみよう。

※ Node.jsがインストールされていることが前提です。

Reactのプロジェクトを作成するためのコマンドを調べる。

npx create-react-appコマンドを紹介しているページ

上記のサイトに行って、「npx create-react-app」コマンドをコピーする。

npx create-react-app 「プロジェクト名」 --template cra-template-pwa

「プロジェクト名」の所には自分の好きなプロジェクト名を入れましょう。

npx create-react-appコマンドでReactのプロジェクトを作る

Reactのプロジェクトを作りたいディレクトリからコマンド投入すると、Reactのインストールが始まります。

インストールには数分かかります。

Reactを起動する

Reactプロジェクトを起動するコマンド

自分で作ったReactのプロジェクトのディレクトリに移動し、

npm start

と投入すれば、ローカルサーバーが起動しReactの画面が表示されます。

初期のReactのプロジェクトの画面

これでReactのプロジェクトの作成は終了です。

カンタンですね。

Reactのプロジェクトを作成した時のファイル等について

Reactのプロジェクトを作成した時のファイル群

インストールされたファイルなどを簡単に説明します。

index.js

index.jsの①の所が「Appコンポーネントを表示するよ」という記述。

ですから、Reactにいろいろ組込むにはApp.jsに記述していくことになります。

②の「<React.StrictMode>」というのは、StrictModeといって、開発時のトラブルシュートに使われます。

  • 安全でないライフサイクルの特定
  • レガシーな文字列 ref API の使用に対する警告
  • 非推奨な findDOMNode の使用に対する警告
  • 意図しない副作用の検出
  • レガシーなコンテクスト API の検出
  • state の再利用性を保証する

等といろいろありますが、現時点の私にはどんな利点があるか体験していません。

公式ドキュメントはこちらから

ただ、「consol.log」を仕込むと、同じログが2回出てうざい、という現象はこのStrictModeが原因です。

App.js

Reactのプロジェクトを作成して、「npm start」で起動すると、Reactのマークが回転している画面が出てきます。

初期状態のApp.js

そのJSXの記述を削除してプロジェクトの作成を始めましょう。

上記のように、Reactのロゴなんかを削除してしまいます。

結果、こんなプレーンなプロジェクトができます。

プレーンなReactのプロジェクト

gitについて

Reactプロジェクトにはgitが組み込まれている

npx create-react-appでReactのプロジェクトを作成すると、もれなくgitの環境が付いてきます。

VSCodeで作業していると、gitのマークの所に数字が付くのでちょっとうざい。

でも、作成しているプロジェクトを保管しておきたいならgithubに補完するのがおススメ。

gitの操作により修正の戻しとかもできるので、それなりに便利。

プロジェクトの保管や戻しなんて使わない

というのであれば、gitに関する表示は無視ですね。

※ 本記事はReactに関する備忘録として書きました。

タイトルとURLをコピーしました