webpack2でReactを使う

webpacke2でReactの開発環境を作る。

フォルダ・ファイルを作る

$ mkdir react1
$ cd react1
$ mkdir src
$ mkdir public
$ touch public/index.html
$ touch src/index.js
$ touch webpack.config.js
$ touch postcss.config.js

インストール

$ npm init -y
$ npm i -D webpack webpack-dev-server
$ npm i -D babel-loader babel-core babel-plugin-syntax-dynamic-import babel-preset-es2015 babel-preset-react
$ npm i -D extract-text-webpack-plugin
$ npm i -D style-loader css-loader postcss postcss-loader autoprefixer cssnano precss react-css-modules
$ npm i -D react react-dom

package.jsonは下記のようになった。

webpack.config.jsを作る

postcss.config.jsを作る

public/index.htmlを作る

src/index.jsを作る

webpackを実行する。実行後、public/bundle.jsが作成される。

$ webpack

webpack-dev-serverを実行する。実行後、http://localhost:8080にアクセスすると確認できる。

$ webpack-dev-server

cordova + onsen ui + reactの開発環境

cordova + onsen ui + reactの開発環境を作成してみます。cordovaのテンプレートにして、メンテしていければと思います。環境は、windows10、npm3.10.8です。エディタは、visual studio code1.6.1を使ってます。

プロジェクトを作る

npmはインストール済みです。

必要なものをnpm install

下記のpackage.jsonを配置して、npm installを実行。

git

.gitignoreを編集

cordovaにプラットフォーム追加

babelの設定

.babelrcを編集

eslintの設定

.eslintrcの編集

.eslintignoreの設定

webpackの設定

元となるjsを入れるフォルダを作る

webpack.config.jsの編集

index.htmlの作成

www/index.html

Javascriptの作成

onsen ui + reactを使った簡単なjavascriptを作成してみる。

src/App.jsx

src/main.jsx

webpackする

webpackすると、www内に、assetsと、bundle.jsと、main.cssが出力される。

webpack-dev-serverを使う

webpack-dev-serverを使っていると、ウォッチしてくれて、対象ファイルに変更があると、webpackしなおして表示してくれる。
webpackした結果は、メモリに保存されるので、www内への展開はされない。

screen

Androidの実機で確認する

Reactの開発環境

node.jsをインストールして、npmも最新版にする。
npmでプロジェクトつくって、下記をインストールする。

reactは、jdxを使うのが基本で、ES6の書き方でjdxを使って書いたものを、babelを使って、ES5のjsに変換する。webpackとbabelを連動させて、webpackで自動的に変換できるようにする。CSSはsassを使って書いて、これもwebpackを使って変換する。全てnpmでインストールできて、npmはpackage.jsonというファイルで、必要なパッケージとそれらのバージョンと依存関係を管理する。npmでインストールしたものは、自動的にpackage.jsonに反映される。必要に応じて手動でメンテナンスすることで、自動的な開発環境を構築する。あとはこれをgitで管理すればみんなで開発できる。大体こんな感じでやっていく。ReactはAngularと違って、オールインワンな感じのフレームワークではなく、基本viewに特化したフレームワーク?であり、大規模なシステムをつくる場合は、Reduxを使うといい。

あと、これらの開発環境セットアップをコマンド一発で完了できるcreate-react-appをfacebookが作ったらしい。

参考サイト:
10年のツケを支払ったフロント界隈におけるJavaScript開発環境(2016年4月現在)。
もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~
npmとpackage.json使い方
webpackを使ってJSとCSSをコンパイルする(ES6 / Sass)
webpack で始めるイマドキのフロントエンド開発
babelとwebpackを使ってES6でreactを動かすまでのチュートリアル
Webpackでイチから作るReact.js開発環境
Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説
コマンド一発でReactの開発環境を構築してくれるFacebook製ツール「create-react-app」