Create React App はじめに

Create React Appを使えば

webpackやbabelなどのツールをインストールしたり設定したりする必要がなく

Reactをサクッと始める環境が整えられる。

アプリケーションの作成

Nodeのバージョン8.10以上が必要らしいので、予めインストールしておく。

Create React Appを使ってアプリケーションを作成するには以下の３つの方法がある。

ちなみに

以前に npm install -g create-react-app を使ってグローバルに create-react-app をインストールしたことがある場合は、 npx が常に最新バージョンを使用するようにするために、 npm uninstall -g create-react-app を使ってパッケージをアンインストールすることをお勧めします。

とのこと

npx

npx create-react-app my-app

(npx は npm 5.2+ 以降に付属している)

npm

npm init react-app my-app

(npm 6+では `npm init が利用可能)

Yarn

yarn create react-app my-app

(yarn createはyarn 0.25+で利用可能)

上記のいずれかのコマンドを実行するとmy-appディレクトリが作成される。

テンプレートの選択

上記のコマンドに--template [template-name]を追加で指定する事で

テンプレートを指定してアプリケーションを作成できる。

例えば、TypeScriptを使うプロジェクトとして作成する場合:

npx create-react-app my-app --template typescript

また Create React App はパッケージマネージャーにYarnを使っているが

下記のようにオプションを指定すると npm を使うようにすることもできる

npx create-react-app my-app --use-npm

アプリケーションを作ったら

`yarn start` or `npm start`

cd my-app
yarn start
# or
npm start

作成されたmy-appに移動してyarn start or npm startをするとプロジェクトが立ち上がり

http://localhost:3000にアクセスするとCreate React Appで作成されたアプリケーションが表示される。

また、yarn testとすればテストが実行され、yarn buildとすると本番用のアプリがビルドされて出来上がります。