コンパイラかく語りき

import { Fun } from 'programming'

いざ!React入門

前回まででReactの雰囲気をそれとなくつかむことができました。

chuckwebtips.hatenablog.com

 

おまけにこちらの記事も読みました。

blog.masuidrive.jp

 

今回からは、Reactを実際に書いていこうと思います。

利用させていただいたチュートリアルがこちら。

c16e.com

 

前準備

いきなりnpm initしなさいとの指示。npm...はるか昔に勉強した気がする…(ヽ´ω`)

そして、今回必要なものをインストール。webpackとbable-loaderをインストールしました。

あとは、webpackの設定ファイルを作成したり、ソースコード置き場ディレクトリを作成。

詳しいことはサイトを御覧ください。

 

ビルドの実験

さて、ビルド環境をつくったので、実行してみます。

成功すれば、jsファイルが生成されるはず…!

 

$ npm run build

無事にビルドが通りました。

f:id:chuck0523:20160105233019p:plain

 

ものものしいJSファイルが生成されました。

f:id:chuck0523:20160105233037p:plain

 

開発スタート

さて、ようやくReactを使った開発に入ることができます。

 まずはreactとreact-domをインストールします。

 

$ npm install --save react react-dom

 

そして、Reactを記述していくJSファイルを用意。といってもコピペですけどね。

f:id:chuck0523:20160106000154p:plain

ただし、このファイル、ビルドが通りませんでした。

f:id:chuck0523:20160106000226p:plain

こんな具合でシンタックスエラーに。

 

これは、babel-coreとbabel-loaderのバージョンを指定に合わせることで解決しました。

バージョンの指定↓

f:id:chuck0523:20160106000329p:plain

 

 

完成

スタイルやらイベントやらを充てて、完成しました。チュートリアルの目指していたLikeボタンの完成です。

 

以下、DEMOです。

f:id:chuck0523:20160106002447p:plain

http://chuck0523.github.io/JSPractise/react_practise/react-like-button/dist/index.html

 

所感

1時間くらいかけてしまいましたが、ついにReactを触ることができました。今回のチュートリアルでは、npmやES7など、おまけが大量にありました。

次回は、ガッツリとReactを書いていこうと思います。

 

おまけ

githubにあげるときは、重たいnode_module以下をgitignoreしましょう。

 

参考:

qiita.com