#React.js環境構築難しくない？
はい今回は、React.jsをNode.jsで
動かすための環境構築をしていきたいと思います。
やってきた感想正直言いますとなめてました
極力テンプレにできるような形で環境構築を行なったので、
備忘録+みなさんが苦労しなくてもいいように書きます。
それと、色々とここ最近仕様が変わってるみたい？で
https://qiita.com/yuki_nagahama/items/f64b183e16a6c307e2ee
こういったわりと最近の記事でもerror吐きます。。
上記の記事の差分と言う立場で書いていこうと思います。
##環境構築手順
※ Node.jsとnpmは導入したことがあり,
ある程度理解できる前提としてください。
- 必要ファイルの作成
- 必要パッケージのインストール
- webpack.config.jsの書き換え
- package.jsonの書き換え
- npmを用いたbuildと実行
###1. 必要ファイルの作成
react_sample/
｜ーー index.html
｜
｜ーー app.js
｜
｜ーー webpack.config.js
｜
｜ーー package.json
｜
｜ーー dist/
以上のファイルをIDEつかってチャチャッと作成しましょう。
んで、ファイル内容は以下の通り。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
これら以外のファイルは,
ややこしくなるの後に説明します。
###2. 必要パッケージのinstall
npm install react
npm install react-dom
npm install --save-dev webpack babel-core babel-loader babel-preset-react babel-preset-es2015
npm install html-webpack-plugin
簡単に説明しますと,
React.jsはbabelを用いて,
ES6をコンパイルしてブラウザが認識できる
ES5にする必要があって, Webpackを用いてブラウザに描画するらしいです。（適当なこと言ってたら指摘お願いします）
なので, babelとWebpackの環境を整えて行く必要があります。
###3. webpack.config.jsの書き換え
今は何も書かれていないと思います。
一番の厄介ポイントです！！！！
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'app.js'),
//区別しやすいようにdistディレクトリ配下に
//ビルドした後に生成されるjsファイル名をbundleに
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
//ここの項目を書いていないサイトをそこそこみます
//これを書かないとlocalサーバが動きません。
devServer: {
contentBase: __dirname + './index.html',
port: 3000,
},
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"],
extensions: ['.js', '.jsx']
},
module: {
//ここがloadersだとビルドの際エラー吐きます.
//いろんなサイトでloadersと書かれています.
rules: [
{
test: /\.js$/,
loaders: 'babel-loader',
query: {
presets:['react','es2015']
}
}
]
},
//これがないと先ほど作成したHTMLと
//app.jsがバインドされません
plugins: [
new HtmlWebpackPlugin({template: './index.html'})
]
};
###4. package.jsonの書き換え
ここまでくれば、知ってる人なら簡単かも。
パッケージバージョンによっても
変わるらしいですが, 2018/05/05時点での
最新パッケージをinstallしています。
{
"name": "react_sample",
"version": "1.0.0",
"description": "",
"main": "app.js",
//追記箇所-実行しやすいように
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"eslint": "4.19.1",
"fs": "0.0.1-security",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"http": "0.0.0",
"mime": "^2.3.1",
"path": "^0.12.7",
"react": "16.3.2",
"react-dom": "16.3.2",
"webpack": "4.7.0"
},
"devDependencies": {
"babel-cli": "6.26.0",
"babel-loader": "7.1.4",
"babel-preset-env": "1.6.1",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"webpack-cli": "2.1.2",
"webpack-dev-server": "^3.1.4"
},
//追記箇所-babelの設定
//.babelrcで書くサイトもあるけどこっちを推奨
//おそらくbabelとreactをバインドする設定
"babel": {
"presets": [
"env",
"react",
"es2015"
]
}
}
はい設定は完成です。
手順5に関しては以下のようにすればいいです。
npm run build
npm start
あとはdistディレクトリに
index.htmlとbundle.jsが生成され,
localhost:3000にブラウザでアクセスしたら
ようやく "Hello, world" React.jsに...。
ということで今回は終わりです。
自分も今回初めてReact.jsをNode.jsで動かしたので
もし、理解など違うところがあれば教えてください(懇願)
参考にしたサイトは正直エラー吐かれたので、
あんまりみてないですが、Reactの構造などの理解はしやすいと思います。
参考Webサイト
https://qiita.com/HayneRyo/items/74892d3a37ee96a5df60