React関連の使い方を復習する／(1) create-react-app

業務に使うわけでもなく、趣味でreact、react-redux、react-router、react-router-redux、それらのテストやJenkinsでのCIなど色々と触ってきたけど、動くものを作るところから入っていて基本を落としがちなので、復習というか備忘のために冬休みの宿題として記事を書いて行こうと思う。

最終的には、簡易カンバンのようなタスク管理ツールを作ることを目指しつつ、少しずつ積み上げていく。どこまでできるかは取れる時間次第。

1 この記事で触れること
2 アプリケーションの雛形を作る

この記事で触れること

create-react-app

アプリケーションの雛形を作る

react-create-appを利用します。
「create-react-app アプリケーション名」とすると、必要なパッケージを解決した雛形が出来上がります。

# npm install -g react-create-app
# create-react-app react-todo-training

1 2	# npm install -g react-create-app # create-react-app react-todo-training

出来上がった雛形のpackage.jsonを見てみると、こんな感じです。

{
  "name": "react-todo-training",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

{

"name": "react-todo-training",

"version": "0.1.0",

"private": true,

"dependencies": {

"react": "^16.2.0",

"react-dom": "^16.2.0",

"react-scripts": "1.0.17"

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test --env=jsdom",

"eject": "react-scripts eject"

}

2017年12月時点で最新のパッケージが設定されていますね。試しにアプリケーションを起動してみる。

# cd react-todo-training
# yarn start

1 2	# cd react-todo-training # yarn start

動いた。出来上がったファイルを見てみる。
div#rootにAppをマウントしている感じ。当たり前ですけど、いたってシンプル。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>React App</title>

</head>

<body>

You need to enable JavaScript to run this app.

</noscript>

</body>

</html>

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

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';

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

registerServiceWorker();

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {

render() {

return (

<h1 className="App-title">Welcome to React</h1>

</header>

To get started, edit <code>src/App.js</code> and save to reload.

</p>

</div>

);

}

export default App;

ビルドツールたちは内包されているようで、アプリケーションを起動した状態でファイルを修正すると自動的にリロードして反映されます。eslintによるコードチェックもしてくれているようです。

内包された設定を自分で編集できるようにするには、eject（取り出し）を実行すれば良いようです。
但し、不可逆な操作なので一度実行すると元には戻せないとのこと。

試しに実行して中身をみてみる。

# npm run eject

1	# npm run eject

「config」と「scripts」が生成されました。試しにwebpackの設定ファイルを開いてみると、eslintやらpolyfillやら色々と設定されているみたいです。今回のサンプルではカスタマイズするようなことはないので、ejectする前の状態で進めていくことにします。

私の開発環境はWebStromなので、gitignore.ioでWebStormの設定を生成して追加してコミットします。段階ごとにブランチを切っていく予定。
https://github.com/tnemotox/react-todo-training

あんまり書いていないけど、今日はここまで。
明日は純粋なReactでTodoを作るところまで進められると良いな。時間とれるかな。というか、作るサンプルの仕様を考えておかないと。