Linux
入門
webpack
React
babel

React.js 入門のためのてきとうな環境セットアップ(2017年1月版)

30分間React入門「いいねボタン」作成チュートリアル
これをやりたかったんですが書かれた当時とはいろいろ変わっていたようでちょっとハマったところ(おもに環境まわり)のメモです。
react も webpack も babel もよくわからないけどとにかく書いて動かしてみたい!って感じの人向けです。
一応これを一通りやれば最低限必要な環境は整うかなって感じです。

本当に上記のチュートリアルをやっただけの初心者なので間違ってたらご指摘ください!

やりたいこと

  • git でソースコード管理する
  • jsx からブラウザで動かせるふつうの js つくりたい
  • 確認用にサーバー立てたい(できれば一瞬で!)
  • とにかく早く react 書いて動かしてみたい!

もちろん実際の開発では webpack とか babel とか重要でしょうけど
ちょっとだけ react 触ってみたいなーって感じの時にそのへんでつまづいちゃうとあれですよね・・・

0. 環境

  • ubuntu 16.04
  • node v4.2.6
  • npm 3.5.2

node と npm はちゃちゃっと入れておいてください

1. git とか node とかの init

まずは作業場所を確保します

# ディレクトリをつくります
$ mkdir react_like_button
$ cd !$

# git を使う場合は init しておきます
$ git init

# npm を init します
$ npm init 

2. 必要なものをインストール

このへんは package.json に書いて npm install してもいいですね!
こんな感じ

# まず webpack さんと babel さん
$ npm install --save-dev webpack babel-loader babel-core

# ES6, ES7 で書きたい!
$ npm install --save-dev babel-preset-es2015 babel-preset-stage-0

# あと react の preset も
$ npm install --save-dev babel-preset-react

# react
$ npm install --save react react-dom

# テスト用の web サーバ(なくてもいいけど)
$ sudo npm install -g node-static

3. webpack の設定

package.json と同じ所においてください。

webpack.config.js
module.exports = {
    // エントリポイント
    entry: __dirname + "/src/main.js",

    // 出力先の設定
    output: {
        path: __dirname + "/dist",
        filename: "like-button.js"
    },

    // jsx に babel さんつかってくださいねーって。。。
    module: {
        loaders: [
            {test: /\.jsx$/, loader: "babel"}
        ]
    }
};

4. .babelrc の設定

これも package.json と同じ所に

babel さんにどんなもの(react とか es6 とか...) を変換して欲しいかは .babelrc の presets に書くようです

es2015 は es2015 の プリセット
react は react のプリセット
stage-0 って書くと es6 よりもっと新しいもの (es7?) が使えるようです

.babelrc
{ 
  "presets": [ 
    "es2015", "react", "stage-0"
  ] 
}

5. package.json に build とかのスクリプトを書く

package.json
  "scripts": {
    "build": "rm -rf dist/*.js && webpack",
    "start": "npm run build && ./start-server.sh",
    "release": "rm -rf docs/* && npm run build && cp -r dist/* docs/"
  },
$ touch start-server.sh
# start-server.sh に実行許可をあげる
$ chmod u+x start-server.sh
start-server.sh
#!/bin/sh
# ポート 12351 で dist ディレクトリで web サーバ立ち上げ
# -c でキャッシュの設定
static -p 12351 -c 1 dist
  • build: js を dist/ の下に吐きます
  • start: build してサーバ(node-static)を立ち上げます。http://localhost:12351/ で見れます。
  • release: build して結果を docs/ にコピーします。 (github pages 用)

6. おわり!

あとは
30分間React入門「いいねボタン」作成チュートリアル
これをやりつつ、ブラウザでの確認が必要になったら

$ npm run start

して、http://localhost:12351/ を見るだけです!