Hello React

いい加減にJSXの食べず嫌いを治そうと思って、Reactを始めてみました。

まずは準備しましょう。折角なのでyarnを使います。Dockerのnode:7.9.0イメージなら最初から入っていました。

yarn init でnpmの時と同じようにpackage.jsonを作成します。

YarnでReactの最新のやつを落とします。

yarn add react react-dom

ついでにwebpackを使ってみることにします。これは開発の際に使うので、--dev オプションで入れます。

yarn add –dev webpack

 

構成としてはこんな感じに作っていきます。

./app ├── dist │ └── bundle.js ├── index.html ├── node_modules ├── package.json ├── src │ └── index.jsx └── webpack.config.js

srcに小分けにしたjsxを書いていき、distにコンパイルしたbundle.jsを出力、index.htmlでそのファイルを読みに行く、といった感じです。

 

先にindex.htmlを作ってしまいましょう。

<!DOCTYPE html>

Hello React

 

さぁここからが自分にとって未知の領域です。複数のサイトを見ながら慎重に進めます。

早速Reactの部分を書きます。ES2015を使って、importを楽にします。

import React from ‘react’; import {render} from ‘react-dom’;

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

render(, document.getElementById(‘app’));

ほえぇ、って感じです。こんなもんだと自分に言い聞かせます。

 

これでソースは完成で、あとはwebpackでReactやらReact-DOMをまとめてdist/bundle.jsにするだけ!これが意外と面倒でした…

 

次を実行して、babel周りを入れます。

yarn add –dev babel-core babel-loader babel-preset-es2015 babel-preset-react

 

そしてwebpackの設定ファイルを書いて楽します。

var path = require(‘path’); const src = path.resolve(__dirname, ‘src’); const dist = path.resolve(__dirname, ‘dist’);

module.exports = { entry: src + ‘/index.jsx’, output: { path: dist, filename: ‘bundle.js’ }, module: { loaders: [ { test: /\.jsx$/, exclude: /node_modules/, loader: ‘babel-loader’ } ] } };

 

最後にpackage.jsonに以下を追記します。

“babel”: { “presets”: [“react”, “es2015”] }

 

これで./node_modules/.node/webpackを実行すれば、distにまとまったbundle.jsが出力されるはずです。

これでやっとReactが出来る…!