create-react-appでプロジェクトを作る手順
create-react-appというFacebook公式ツールを用いてReact.jsのプロジェクトを作る方法を解説します。
WebpackやBabelなどのビルドツールと呼ばれるものの面倒な設定をスキップして、すぐにコーディングを始められるのがメリットです。
①npxコマンドでプロジェクトを作る
コマンドラインを立ち上げて、下記のコマンドを打ち込みます。
npx create-react-app プロジェクト名このようにプロジェクト名と一緒にコマンドを打ち込んでください。
npx create-react-app my-appできあがるファイル一覧
📁 my-app
├─ 📁 node_modules
│
├─ 📁 public
│ ├ favicon.ico
│ ├ index.html
│ ├ logo192.png
│ ├ logo512.png
│ ├ manifest.json
│ └ robots.txt
│
├─ 📁 src
│ ├ App.css
│ ├ App.js
│ ├ App.test.js
│ ├ index.css
│ ├ index.js
│ ├ logo.svg
│ ├ reportWebVitals.js
│ └ setupTests.js
│
├─ .gitignore
├─ package.json
├─ package-lock.json
└─ README.md
├─ 📁 node_modules
│
├─ 📁 public
│ ├ favicon.ico
│ ├ index.html
│ ├ logo192.png
│ ├ logo512.png
│ ├ manifest.json
│ └ robots.txt
│
├─ 📁 src
│ ├ App.css
│ ├ App.js
│ ├ App.test.js
│ ├ index.css
│ ├ index.js
│ ├ logo.svg
│ ├ reportWebVitals.js
│ └ setupTests.js
│
├─ .gitignore
├─ package.json
├─ package-lock.json
└─ README.md
各フォルダの意味
| フォルダ | 何のためのものか |
|---|---|
| 📁 my-app | プロジェクト名のフォルダ |
| 📁 node_modules | Node.jsでインストールしたライブラリが格納されるフォルダ プロジェクトの依存関係がインストールされている |
| 📁 src | Reactアプリケーションのソースコードが格納される開発用のディレクトリ |
| 📁 public | Webブラウザに公開されるファイルが置かれるディレクトリ 公開用のHTMLファイルや画像ファイルなどが置かれる |
各ファイルの意味
| ファイル | 何のためのものか |
|---|---|
| src/index.js | このReactのアプリケーションとして1番はじめに実行されるコンポーネント 1番最初に実行されるプログラムを「エントリーポイント」という |
| src/index.css | このReactのアプリケーション全体に適用させるスタイルを書く |
| src/App.js | メインのReactコンポーネントを書く |
| src/App.css | App.jsのコンポーネントでのみ適用させるスタイルを書く |
| public/index.html | Webブラウザに公開されるReactのアプリケーションとして1番はじめに表示されるページ |
| .gitignore | Gitにコミットしないファイル一覧を書く |
| package.json | React.jsプロジェクトに必要な依存関係や設定を書く |
| LICENSE | プロジェクトのライセンスを書く |
| README.md | プロジェクトの説明を書く |
②開発環境を起動する
インストールしたReact.jsの開発環境は下記のコマンドで起動します。
npm start
そうすると、「localhost:3000」のようなURLで自動的に上記のような画面が表示されます。