React+babel+webpackで動かすまでのチュートリアル
React+webpack+babelを使ったチュートリアルを書いていきます。 Reactだけでサクッと「Hello world」を出して試したい方は 下記の公式サイトを参考にするとすぐに実装できます。
https://reactjs.org/docs/hello-world.html
準備
npm
コマンドが使えるように開発環境を準備してください。
その作業用ディレクトリを作成して移動する。
mkdir hellowold cd hellowold
必要なファイルのセットアップ
- プロジェクトの作成
npm init -y
- ディレクトリの作成
mkdir src dist
- babelのインストール
npm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react
- babel設定ファイルの作成
.babelrc
{ "presets": [ "es2015", "react" ] }
- webpackのインストール
npm i -D webpack
- webpack.config.jsとdevelopment.jsに準備
webpack.config.js
require('babel-core/register'); module.exports = require('./development');
development.js
import path from 'path' const src = path.resolve(__dirname, 'src') const dist = path.resolve(__dirname, 'dist') export default { entry: src + '/index.jsx', output: { path: dist, filename: 'bundle.js' }, module: { loaders: [ { test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader' } ] }, resolve: { extensions: ['.js', '.jsx'] }, plugins: [ ] }
- Reactパッケージのインストール
npm i -S react react-dom
- 最初に呼ばれる
index.js
の作成
src/index.jsx
import React from 'react'; import {render} from 'react-dom'; class App extends React.Component { render () { return <p> Hello React!</p>; } } render(<App/>, document.getElementById('app'));
- 実行してエラーがないか確認
./node_modules/.bin/webpack
webpack-dev-serverをインストール
webpack-dev-server
をインストールすることで自動コンパイル、自動リロード画面リロードができるようになるのでいれておきましょう。
npm i -D webpack-dev-server html-webpack-plugin
- development.jsを変数
//この行を追加
とかかれているものを追記する
import path from 'path' import HtmlWebpackPlugin from 'html-webpack-plugin'//この行を追加 const src = path.resolve(__dirname, 'src') const dist = path.resolve(__dirname, 'dist') export default { entry: src + '/index.jsx', output: { path: dist, filename: 'bundle.js' }, module: { loaders: [ { test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader' } ] }, resolve: { extensions: ['.js', '.jsx'] }, plugins: [ //この行を追加 new HtmlWebpackPlugin({ template: src + '/index.html', filename: 'index.html' }) ] }
- index.htmlを作成
Reactで画面を表示するhtmlファイルを作成する
src/index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React Test</title> </head> <body> <div id="app" /> </body> </html>
- webpack-dev-serverを起動する
./node_modules/.bin/webpack-dev-server
$ ./node_modules/.bin/webpack-dev-server Project is running at http://localhost:8080/ webpack output is served from / Hash: 7e62cd70065fafed6306 Version: webpack 3.8.1 Time: 1099ms
- 起動する
ブラウザでhttp://localhost:8080/にアクセスすると下記の画面が表示されます。
便利にするために
実行するたびに./node_modules/.bin/webpack-dev-server
とうつのはめんどくさいのでpackage.json
を編集しておきましょう
package.json
"scripts": { "start": "webpack-dev-server" }
するとnpm start
で起動できるようになります。
よければ
ツイッターのフォローお願いします