Hello React

view:15

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

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

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

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

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

 

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

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

 

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

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

コメントを残す