React.jsをNode.js+Webpack+Babelで環境構築
React.jsの環境構築難しくない？
環境構築...思ったよりもかなり難しかった..。
要件
以下の要件で進めていこうと思います。
1. React.jsをNode.jsで利用できる
2. 極力テンプレとして利用できる
3. ローカルサーバを起動できる
4. Hello WorldをWeb上に表示できる
5. ComponentsとPropsの記述方法が簡易にわかる
どうしてWebpackとBabelを利用するのか
まずReact.jsとは？
React.jsは主にDOM操作を仮想DOMを用いることにより
簡潔に記述することが可能なライブラリである。
また、コンポーネントベースと言って
例えば、オブジェクトクラスをコンポーネントに分割するように
コンポーネントにわけて記述し仮想DOMが操作できるため、
構造的に可読性の高い記述が可能になっている。
Babelを利用する理由
Babelを利用する理由として、
ほとんどのブラウザがES6に対応していないため、
ES6で規格が決まっているReact.jsを
ES5にトランスパイルすることで
ブラウザに認識させる役割を担っている。
Webpackを利用する理由
主にはBabelとReact.jsをバインドするために用いる
今回はせっかくなのでWebpackを用いてローカルサーバを起動する。
ファイル構造
必要ライブラリ
以下npmとNode.jsはある程度理解できている前提とする。
$ npm init $ npm install react $ npm install react-dom $ npm install --save-dev webpack babel-core babel-loader $ npm install --save-dev babel-preset-react babel-preset-es2015 $ npm install html-webpack-plugin
webpack.connfig.js設定
これでローカルサーバを起動し、index.html/App.js/babelなどを
いい感じに紐づけることができる。
作成したJSファイルに以下のように記述していく。
webpackの仕様がよく変わるらしい？ので
2017年の参考サイトでもエラーが出ます。
パッケージによってもエラーが出るらしいですが
2018/05/05時点での各最新パッケージにて実行しました。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'js/App.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: __dirname + './index.html',
port: 3000,
},
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"],
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.js$/,
loaders: 'babel-loader',
query: {
presets:['react','es2015']
}
},
]
},
plugins: [
new HtmlWebpackPlugin({template: './index.html'})
]
};
package.json設定
npmによって生成されたpackage.jsonに追記していきます。
追記箇所１については、
サーバを起動している間変更があれば
コンパイルを自動でするための設定。
追記箇所２については、
BabelにES2015とReact.jsを利用ための設定。
ここを.bablrcに記述するサイトが多いですが非推奨。
{
"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",
"path": "^0.12.7",
"react": "16.3.2",
"react-dom": "16.3.2",
"webpack": "4.7.0"
},
"devDependencies": {
"babel-loader": "7.1.4",
"babel-preset-env": "1.6.1",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"webpack-dev-server": "^3.1.4"
},
//追記箇所２
"babel": {
"presets": [
"env",
"react",
"es2015"
]
}
}
JSファイルについて
localhost:3000でフォームとSendボタンを表示し、
Sendボタンが押されると、
アラートを出すコードになっている。
App.js
Javaなどでいうmainクラスのように扱える。
FormApp.jsをimportしている。
import React, { Component } from 'react';
import { FormApp } from './FormApp';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<FormApp />
);
};
};
ReactDOM.render(
<App />,
document.getElementById('root')
);
export default App;
FormApp.js
App.jsに継承するように記述することが可能で、
コンポーネントといい、DOM操作の記述ファイルにおいて
階層構造をとることが可能。
import React, { Component } from 'react';
export class FormApp extends Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleSend = this.handleSend.bind(this);
};
render() {
return (
<div>
<input type="text" />
<button onClick={this.handleSend}>SEND</button>
</div>
);
};
以上で終了です。
1. npm run build
2. npm start
以上を実行すればlocalhost:3000で
動作確認ができると思います。
でわでわ //
簡単な実装はこっちで書いてます
