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

とあるエンジニア系ライダーの日常

Webエンジニアの話、バイクの話

React+Babel+WebpackでHTMLにリストを書いてみた。

作ってみるもの

WebでReactの動的サイトを作るのを目標にとりあえず今回は、

React、Babel、Webpackを使って

普通のリストを作ることにしようかと。

もろもろのバージョンは下記

node:7.6.0

npm :4.4.4

React:15.4.2

Babel:6系

Webpack:2.2.1

Reactとは

Facebookが作っているJSのView部分だけのライブラリ

facebook.github.io

詳しくは本家を。

現在バージョンは15で、初期と大分変わっているので、記事を参考にする際はお気をつけください。

Babelとは

「BabelはブラウザにまだサポートされていないようなJavaScriptの次世代の標準機能を、現在のブラウザでも使えるようにするNode.js製のトランスパイラ。」

要はJSのコンパイラと考えていただければ。

ECMAScriptJavaScript の標準試用)準拠なのがいいところ。

Webpackとは

設定ファイルを書けば、依存関係を解消し、

ビルドしてくれるツール(つまりコンパイラ)です。

さっそく作ってみよう!

とりあえず今回は、

React、Babel、Webpackを使って

特に動かないリストを作ることにしようかと。

とりあえず動くものはFluxとか使ってからで。

まずは作業用ディレクトリでnpmで初期化して必要なものをインストール 

※Babel6になりパッケージの分離が行われ、

必要なもののみインストールする必要あります。

npm init
npm install --save react react-dom npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react

このままじゃ使いづらいので

package.jsにwebpackコマンドを登録

"main": "index.js",
"scripts": {
"webpack": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},

これでnpm run webpackでwebpackが使えるようになります。

とはいえwebpackが何をするかの設定ファイルが必要なので、

下記を用意します。

※これもBabel6の影響でloaderがbabel-loaderになっています。

webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: './public',
        filename: '[name].js' // 上記entryのキーに対応したテンプレート
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                exclude: /node_modules/,
                test: /\.js[x]?$/,
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
};

./publicに、entryでキーに指定した名前の[name].jsが書き出されます。

こうしておけば複数も可能です。

JSは今回はメインの呼び出しとリスト自体の2つ

app.js

import React from 'react';
import ReactDom from 'react-dom';
import List from './list.js';

window.ListApp = {
    render:  () => {
        ReactDom.render(
            <List />,
            document.getElementById('listapp')
        );
    }
};

list.js

こっちは今回は適当。

import React, {Component} from 'react'

export default class List extends Component {
    constructor() {
        super();
    }

    render() {
      var list = [];

      var data = [
        { text: "1" },
        { text: "2" }
      ];

      for(var i in data){
        list.push(<li key={i}>{data[i].text}</li>);
      }

      return(
        <ul>
          {list}
        </ul>
      );
    }
}

で、肝心のHTMLですが。 

index.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>List書いてみよ</title>
</head>
<body>
    <div id="listapp"></div>
    <script src="public/app.js"></script>
    <script>ListApp.render();</script>
</body>
</html>

これだけ。

最後に

npm run webpack -p

すると、publicディレクトリにapp.jsが出来ているので、

ブラウザからhtmlを開いてみると普通にリストが表示されます。

(ただのリストなので画像は貼りませんが苦笑)

まとめ

とりあえず入門したかなと。

ここから、FluxかRedux使ってデータ持たせたり、

ちゃんとコンポーネント設計したり、

axiosとか使ってAPI呼んでデータ取ってきたり。

お砂場はできれども道は遠き。