ReactをES2015で書く環境を作る

2016年12月04日 · 2 min read · JavaScript React  ·
Share on:

はじめに

フロント界隈の変遷が激しいですね良く分からないです
未だにjQueryでゴリゴリ書いてる人間なので少し勉強することにしたけど忘れそうなのでメモ
ちなみにRiotとFetchくらいしか触ったことない人間です
環境構築してチュートリアルまで流します

ほぼこちらの記事のまんまです

環境

  • Windows7 64bit

環境構築

Node.js

公式から落としてきてインストールする
パスを以下の2箇所に通す（インストーラーがやってくれてるかも）

  • nodejsのインストール場所
    • Users/Username/AppData/Roaming/npm

プロジェクト作成

1$ npm init

適当に答えてpackage.jsonを作成する

ライブラリを揃える

npm install --save

利用時に必要なライブラリを追加する

1$ npm install --save react react-dom whatwg-fetch

reactとreact-domはreactを使うために入れる
whatwg-fetchはFetchAPIを対応してないブラウザでも使うためのpolyfill

npm install --save-dev

開発時に必要なライブラリを追加する

1$ npm install --save-dev webpack webpack-dev-server
2$ npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015

タスク

コマンド打っても良いけど面倒なので何回もしそうなことは予め書いておく
package.jsonのscriptsの項目に以下を追記する

1"scripts": {
2    "test": "echo \"Error: no test specified\" && exit 1",
3    "build": "webpack",
4    "server": "webpack-dev-server --progress --colors --hot --open"
5},

これで

1$ npm run server

とかするとテスト用のサーバーが呼び出せる（こうするのが良いのかは知らないけど

プロジェクト構成

チュートリアルをやる上でこのようなディレクトリ構成にした
componentsに下にコンポーネントを置いていく感じ

1 ProjectDir/
2  ├─ dist/
3  │    └ index.html
4  ├─ src/
5  │    ├─ components/
6  │    └─ main.jsx
7  ├─ package.jspn
8  └─ webpack.config.js

index.html

読み込むだけなのでシンプル

 1<!DOCTYPE html>
 2<html>
 3<head>
 4    <meta charset="utf-8">
 5    <title>はろー りあくと</title>
 6</head>
 7<body>
 8    <div id="app"></div>
 9    <script src="/bundle.js"></script>
10</body>
11</html>

webpack.config.js

エントリポイント（後述）と出力とかを書いていく

 1var path = require("path");
 2var webpack = require("webpack");
 3
 4module.exports = {
 5    entry: "./src/main.jsx",
 6    output: { path: path.join(__dirname, "dist"), filename: "bundle.js" },
 7    module: {
 8        loaders: [{
 9            test: /.jsx?$/,
10            loader: "babel-loader",
11            exclude: /node_modules/,
12            query: {
13                presets: ["es2015", "react"]
14            }
15        }]
16    }
17}

main.jsx

チュートリアルなぞり終わったあとの状態だけどこんな感じ

1import React from "react";
2import ReactDOM from 'react-dom';
3
4import CommentBox from './components/CommentBox.jsx';
5
6ReactDOM.render(
7    <CommentBox url="/dist/comments.json" pollInterval={2000} />,
8    document.getElementById("app")
9);

チュートリアル

こちらの記事をFetchAPIで書いた感じです
CommentBox.jsxのloadCommentsFromServerメソッドを以下のように変更

 1import "whatwg-fetch";
 2
 3    ...中略...
 4
 5    loadCommentsFromServer() {
 6        fetch(this.props.url).then((response)=>{
 7            return response.json();
 8        }).then((json)=>{
 9            this.setState({data: json});
10        }).catch((ex)=>{
11            console.log(ex);
12        });
13    }

その他の変更点はCommentList.jsxでkeyを渡せって怒られたので以下の部分を変更しました

1    render(){
2        var commentNodes = this.props.data.map((comment)=>{
3            return(<Comment key={comment.author} author={comment.author}>{comment.text}</Comment>);
4        });
5    ...
6    }

参考記事