Reactを始める

Node.js、npmがインストールされている前提でReactの環境を作る。

プロジェクトディレクトリを作りたいディレクトリ(プロジェクトディレクトリの親ディレクトリ)に移動して以下のコマンドを実行する。

npx create-react-app (プロジェクト名)

プロジェクト名=ディレクトリ名で作成される。「create-react-app」がない旨アラートが出るが、よきに計らってくれるのでそのまま続ける。コマンドの実行には少し時間がかる(数十秒)。コマンドの実行が完了すると指定したプロジェクト名でディレクトリが作られ、その中に必要なモジュール等がダウンロード、作成される。ディレクトリ構成は以下の通りである。

  • node_modules/
    インストールされたNode.jsのモジュールが格納されている。
  • public/
    プロジェクトで使用する静的ファイルが格納されている。
  • src/
    コードが格納されている。
  • .gitignore
  • package-lock.json
  • package.json
  • README.md

src/ディレクトリ配下には以下のファイルが配置される。

  • src/index.js
    開発したReactプロジェクトをindex.htmlファイルへ表示するためのファイル
  • src/App.js
    基本的提供されるReactコンポーネントの例
  • src/App.css
    Appコンポーネントが使うCSSファイル
  • src/App.test.js
    Appコンポーネントをテストするためのファイル
  • src/reportWebVitals.js
    Reactの性能をを測定するためのファイル
  • src/setupTests.js
    Reactでテストを実行するための設定ファイル