create-react-appコマンドでプロジェクトを作る。
プロジェクトの名前を引数にしてコマンドを実行する。
npx create-react-app todolistコマンドの実行が終わるとtodolistというディレクトリができているので、cd todolistを実行してカレントディレクトリを移動しよう。
作られたプロジェクトにはサンプルコードも含まれている。 開発サーバーを起動して見てみよう。
yarn start少し間をおいて開発サーバーが起動し、自動でブラウザが起動されて http://localhost:3000/ を開く。 このとき、起動されたブラウザがChromeではない場合は手動でChromeを起動して http://localhost:3000/ を開くこと。
このような画面が確認できたら開発サーバーをctrl + Cで停止する。
create-react-appが生成したサンプルは開発を進める上では要らないものなので、srcディレクトリ以下のファイルをすべて消す。
README.mdも消す。
ただし、作ったプロジェクトの概要や起動方法などをREADME.mdに書いておくのはよい習慣なので自分なりに書いたREADME.mdを置いておくとよい。
個人的にREADME.mdの書き方はわかりやすいREADME.mdを書くというブログ記事が参考になったので良かったら読んでみて。
| ファイル・ディレクトリ | 説明 |
|---|---|
.gitignore |
Gitの管理外にするファイル・ディレクトリを指定するためのファイル。このチュートリアルではcreate-react-appが生成してくれるものを使う。 |
README.md |
プロジェクトの概要や起動方法などを記載するファイル。 |
node_modules |
yarnによってインストールされるパッケージたち。このディレクトリはGitの管理外にする。（create-react-appが生成してくれた.gitignoreによって既に管理外に置かれている） |
package.json |
依存パッケージやビルドコマンドを記載するファイル。Mavenでいうpom.xmlのようなもの。pom.xmlと違ってpackage.jsonにはscriptsにコマンドを書いて実行できる。そういう意味ではpom.xmlよりもGradleのbuild.gradleの方が似ている。 |
public/favicon.ico |
Webページに設定されるアイコン。このチュートリアルではfavicon.icoについては特に言及しないので好きなものに変えてもよい。 |
public/index.html |
ブラウザで開くページ。このページからビルドされたjsファイルを読み込む。ブラウザのタブに表示 |
public/manifest.json |
スマートフォンでWebサイトをアプリのように使う場合に使用されるメタ情報。このチュートリアルではmanifest.jsonについては特に言及しない。 |
src |
ソースコードを置くディレクトリ。 |
yarn.lock |
yarnが依存パッケージのバージョンを固定するために使用するファイル。yarnが自動的に編集するファイルだがGitの管理下には置く。 |