つくるやつ
React, Webpack, Express, Relay, GraphQLあたりをつかった何か。
内容はあまり重要ではなくて、ひとまずぜんぶJSだけで作ってみたい。
ただし、以下の記事でも書かれているように、必要ないものをどんどん盛り込むのは違うと思う。
まずは試してみて、何が必要で何が必要でないのか、考えたい。
要件
最小構成でのReactアプリ
まずは、ReactとWebpackを導入して、最小構成のReactアプリケーションを作る。
パッケージインストール
ひとまず必要なパッケージは以下のとおり(一部抜粋)
トランスパイルはWebpackにBabelさせる。
コンフィグファイル
babelの設定。
webpackの設定
npm scriptsに追記
package.jsonのnpm scriptsにコマンドを登録しておきます。
(一部抜粋)
HTML作成
HTMLを作成します。ディレクトリは、public/index.htmlです。
React作成
Reactのコンポーネントを作成します。エントリーポイントとなる、src/client.jsと、コンポーネント部品となるsrc/components/Hello.jsを作成しました。
コンパイル&ブラウザ確認
ファイルが出揃いましたので、npm run buildをして、ブラウザでHTMLを確認してみます。
コンパイルに成功しました。
ブラウザ表示すると、このとおり。
きりが良いので、今回はここまで。
今回は、基本的なReactアプリケーションの開発環境を整えました。ディレクトリ構成は以下のようになりました。
次回は、WebpackのHMR(HotModulesReloadReplacement)の設定を行います。