Reactで開発開始まで - ほろ酔い開発日誌

以前、Reactの勉強のために以下のようなデモを作ったのですが、Reactのスタートをコピペベースで出来るようにメモしておきます。

ここではこちらを参考にセットアップしていきます。

npmの用意

適当なディレクトリを用意します(今回は stackyという名前にしました)。

$ mkdir stacky

念のため、npm をupdateして、initします。

$ npm update -g npm
$ npm init
(適当に答える、-yで初期設定をスキップ出来る)
$ ls
package.json

babel

babelのインストール

babel関連。babelはコンパイラ。ES6等のソースコードを一般的なブラウザに対応出来るようにES5にコンパイルする。

$ npm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react

babelの設定

$ vi .babelrc

以下をコピペ。

require('babel-core/register');
module.exports = require('./development');

webpack

webpack。webappのビルドツール。Grunt とか Gulp とかが有名らしいが自分で定義していかないといけないのに対し、webpackは簡単な設定ファイルを書くだけで良いので楽。Browserifyという似たようなやつもいるらし。また、Grunt/Gulpと組み合わせることもあると。

参考:

qiita.com

webpack関連のインストール

$ npm i -D webpack webpack-dev-server html-webpack-plugin
$ vi webpack.config.js

webpackの設定

以下の設定を webpack.config.js にコピペ。

require('babel-core/register');
module.exports = require('./development');

development.jsをコピペ。

import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const src  = path.resolve(__dirname, 'src');
const dist = path.resolve(__dirname, 'dist');

export default {
  entry: src + '/index.js',
  output: {
    path: dist,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js']
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: src + '/index.html',
      filename: 'index.html'
    })
  ]
};

表示indexの用意

$ vi src/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Test</title>
  </head>
  <body>
    <div id="app" />
  </body>
</html>

Reactの用意

$ npm i -S react react-dom
$ vi src/index.js

import React, {Component} from 'react';
import {render} from 'react-dom';

class App extends Component {
  render () {
    return <p> Hello React!</p>;
  }
}

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

コンパイルと起動

$ ./node_modules/.bin/webpack
$ npm start

簡単なデモ

src/index.jsを以下のようにアップデート。

import React, {Component} from 'react';
import {render} from 'react-dom';

class Name extends Component {
  render () {
    const name = this.props.name;

    return <span>{ name }</span>
  }
}

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: ''
    }
  }

  render () {
    const name = this.state.name;

    return (
      <div>
        <h1>Hello, <Name name={ name } />.</h1>
        <input
          type='text'
          value={ name }
          onChange={ e => {
            this.setState({
              name: e.target.value
            })
          }}
        />
      </div>
    );
  }
}

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