読者です 読者をやめる 読者になる 読者になる

ReactJS の環境構築(2)

NodeJS ReactJS

前回「ReactJS の環境構築(1)」の続きです。

ReactJS アプリの作成

ReactJS のチュートリアルでとても分かりやすい記事がありましたので、そちらに沿って環境構築させて頂きました。

<参考文献>
フォルダ構成

ディレクトリ構成は以下の通りにしました。

myApp/
 ├ .babelrc
 ├ package.json
 ├ webpack.config.js
 ├ development.js
 ├ dist/
 │ └ js/
 └ src/
   ├ index.html
   ├ js/
   └ css/

プロジェクトフォルダを作成します。

$ cd ~
$ mkdir myApp; cd $_
$ npm init -y
Babel の設定

ES6 でコードを書くために Babel を使います。(参考 Babel
Babel をインストールします。

$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

.babelrc を以下の内容で作成します。

{ "presets": [ "es2015", "react" ] }
Webpack の設定

Webpack をインストールします。

$ npm install --save-dev webpack

webpack-dev-server をインストールします。

$ npm install --save-dev webpack-dev-server html-webpack-plugin

また、SASS(SCSS) を利用するためのツールもインストールしておきます。

$ npm install --save-dev webpack style-loader css-loader sass-loader

webpack.config.js と development.js を作成します。

// 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: {
      bundle: src + '/js/index.jsx'
    },
    output: {
      path: dist + '/js',
      filename: '[name].js'
    },
    module: {
      loaders: [
    {
          test: /\.css$/,
          loader: 'style!css'
        },
    {
        test: /\.scss$/,
        loader: 'style!css!sass'
        },
        {
          test: /\.jsx$/,
          exclude: /node_modules/,
          loader: 'babel'
        }
      ]
    },
    resolve: {
      extensions: ['', '.js']
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: src + '/index.html',
        filename: 'index.html'
      })
    ]
  }
]
React のインストール【追記 2017/04/01】

React のインストールを行います。一番重要な内容を書き忘れていました。

$ npm install --save-dev react react-dom
アプリの作成

さて、いよいよアプリを作成します。
React の使い方はまだよく分かっていなので、引き続き上記のチュートリアル本家サイトを参考に作ってみました。

とりあえず「ボタンを押すと表示がかわる」を目指して簡単なものができました。
完成したアプリが以下です。ボタンを押すと「Hello!!!」の文字の色が変化します。
f:id:ashiris:20170205211701p:plain

index.html の内容。

// index.html


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

myApp/src/js/index.jsx を作成。

import React from 'react'
import {render} from 'react-dom'

import CSS from '../css/sample.scss'

class Sample extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      style: {color: "black"},
      ind: 0,
    }
  }
  changeColor(i) {
    const colors = ['black', 'crimson', 'aqua', 'orange', 'lime', 'navy', 'silver']
    let ind = (i+1) % colors.length
    this.setState({
      style: {color: colors[ind]},
      ind: ind,
    })
  }
  render () {
    return (
      <div>
        <p style={this.state.style}>Hello!!!</p>
        <button className="change" onClick={() => this.changeColor(this.state.ind)}>
          CHANGE
        </button>
      </div>
    )
  }
}
render(<Sample />, document.getElementById('app'))

myApp/src/css/sample.scss を作成。

body {
  font: 14px "Century Gothic", Futura, sans-serif;

  .change {
    font-weight: bold;
    background-color: slateblue;
    color: white;
    padding: 5px 20px;
  }
}
アプリの起動

webpack-dev-server を起動しアプリの動作確認を行います。

$ ./node_modules/.bin/webpack-dev-server

ブラウザから web サーバーにアクセスすると画面が表示されました。

後書き

分からないなりに環境設定から行いましたが何とか ReactJS のアプリ作成までできました。 今回もそうですが、React についての記事がたくさんありますので困ってもググれば大体解決できます。 まずは、本家サイトのチュートリアルから学習していこうと思います。