create-react-appを使用してReactアプリを作成する時のGitコマンド手順まとめ

2019年08月24日 2019年08月27日

Reactでアプリケーションを作成する際のコマンドについてまとめました。

Nodejs(version 4以上）がインストールされていることを前提とします。（Node.jsのバージョンを確かめたい場合のコマンドは node -v です。）

①初めてReactのアプリを作成する場合

npm install create-react-app-g

★現在使用しているパソコンで既に同じコマンドを書いたことがある場合は、この手順は飛ばします。

新しいディレクトリが作成されるだけではなく、Reactアプリに必要なnpmパッケージも同時にインストールされますので、かなりの量がインストールされます。パソコンによってnpm installにかなり時間がかかることがありますが、終了するまで焦らずそのままにしておきます。

create-react-app アプリ名

例えばmyappという名前のアプリを作成する場合で、バージョン名を入れたい場合は以下のようにコマンドを書きます。

create-react-app myapp --scripts-version 1.1.5

終了したら、最後の行にHappy hacking!と表示されます。アプリ作成成功です。

cd myapp

npm start

と入力すれば、localhost:3000でReactのマークがグルングルン回っているものが表示されます。ここまでで、Reactアプリの大元が出来上がったことになります。

出来上がったディレクトリ（今回の場合はmyapp)のフォルダーの構成は以下のとおりです。
myapp

├── README.md

├── node_modules

├── package.json

├── .gitignore

├── public

── favicon.ico

── index.html

── manifest.json

└── src

── App.css

── App.js

── App.test.js

── index.css

── index.js

── logo.svg

── serviceWorker.js

2019年8月24日時点でpackage.jsonにインストールされたreactとreact-domのバージョンは、16.9.0でした。最新バージョンが使用できるようになっています。

こちら（↓）のFacebook公式のcreate-react-appのGitHubレポジトリのREADME.mdにcreate-react-appの使い方などQuick Overviewが記載されています。（yarnを使う場合のコマンドもあり）

このレポジトリをstarしておけば、Reactのアップデートについてなど、新しい情報も見やすいと思います。

この記事を書いた人

プログラミング（主にJavascript）の学習記録とお役立ち情報をシェアしています