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/にアクセスすると下記の画面が表示されます。

f:id:jesus9387:20171116153027p:plain

便利にするために

実行するたびに./node_modules/.bin/webpack-dev-serverとうつのはめんどくさいのでpackage.jsonを編集しておきましょう

package.json

"scripts": {
  "start": "webpack-dev-server"
}

するとnpm startで起動できるようになります。

よければ

ツイッターのフォローお願いします

twitter.com