edo1z blog

プログラミングなどに関するブログです

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」