Create React App で react.js を試す

はじめに

Create React App を使用し、react.js を試します。

注意事項

コマンドプロンプトから npm を実行するためには、node.js がインストールされている必要があります。

目次

環境

  • OS : Windows 7 Pro 64bit
  • エディタ : Visual Studio Code
  • その他 : npm 3.10.10, yarn v0.21.3, create-react-app 1.3.0

Yarn のインストール

今回はパッケージ管理に yarn も利用するためインストールします。

npm install -g yarn

npm と同じく、package.json を参照しパッケージを管理しますが、Yarn は新しい Javascript のパッケージマネージャーで、npm と互換性があり、より高速に動作します。また、yarm.lock というファイルを作成し、依存関係にあるパッケージのバージョンがデフォルトで固定されます。

Create React App のインストール

react のひな形を簡単に作成するために、Create React App をグローバルにインストールします。

npm install -g create-react-app

create-react-app　コマンドを使用してプロジェクトを作成します。ここでは、hello-world　という名のプロジェクトを作成します。

create-react-app hello-world

作成されたフォルダの構成は以下のようになります。
create-react-app コマンドで作成されたプロジェクトには、webpack, Babel, ESLint などのモジュールも含まれています。

hello-world
  ┣ mode_modules
  ┣ public
  ┃   ┣ favicon.ico
  ┃   ┗ index.html
  ┣ src
  ┃   ┣ App.css
  ┃   ┣ App.test.js
  ┃   ┣ index.css
  ┃   ┣ index.js
  ┃   ┗ logo.svg
  ┣ .gitignore
  ┣ package.json
  ┗ README.md

この状態で以下のコマンドを実行すると、ブラウザが起動し、画面に Welcome to React と表示されます。

yarn start

実行を終了するには Ctrl+c を入力します。

yarn start について

作成された package.json を表示すると、scripts の部分に以下のように書かれています。

package.json
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

この中の start に react-scripts start と記述されており、./node_modules/react-scripts/ 内の start.js が実行されるようになっています。start.js が何をしているかはファイルの中身を見てください。

Hello worldを表示する

画面に Hello World と表示するために ./src/index.js を以下のように変更し保存します。

./src/index.js
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import './index.css';

 ReactDOM.render(
//  <App />,
   <h1>Hello, world</h1>,
   document.getElementById('root')
 );

yarn start を実行していた場合は、自動的にファイルがコンパイルされ、ブラウザに Hello, world が表示されます。これは、webpack-dev-server がフォルダを常に監視し、変更された場合にファイルをコンパイルしてブラウザをリロードするように設定されているからです。

Typescript を利用する場合

Typescript を利用する場合は、プロジェクトの作成時に --scripts-version=react-scripts-ts 引数を付けてコマンドを入力します。

create-react-app my-app --scripts-version=react-scripts-ts

作成されたフォルダの構成は、以下のようになります。

my-app
  ┣ mode_modules
  ┣ public
  ┃   ┣ favicon.ico
  ┃   ┗ index.html
  ┣ src
  ┃   ┣ App.css
  ┃   ┣ App.test.tsx
  ┃   ┣ index.css
  ┃   ┣ index.tsx
  ┃   ┗ logo.svg
  ┣ .gitignore
  ┣ package.json
  ┣ README.md
  ┣ tsconfig.json
  ┣ tslint.json
  ┗ yarn.lock