Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@standard-software

React16 jsx 最小構成のビルド環境 WebPack

関連記事

React16 最小構成のビルド環境 browserify babelify JSXあり - Qiita
https://qiita.com/standard-software/items/fa64563077118b631867

この記事の続きみたいなものです。

ビルドツールを Browserify から WebPack に変えました。

環境

環境は Windows10 です。 node.js インストール済みとします。
Mac でも同じだと思います。

インストール

フォルダを作成して、そこをカレントディレクトリにしてコマンドを打ちましょう。

  npm init -y
  npm install --save react
  npm install --save react-dom
  npm install --save-dev babel-core
  npm install --save-dev babel-loader
  npm install --save-dev babel-preset-env
  npm install --save-dev babel-preset-react
  npm install --save-dev webpack
  npm install --save-dev webpack-cli

フォルダに、package.json が作られてその中身の一部はこのようになります。

  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13"
  },
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0"
  }

ファイル

次の構成にします。作成されたフォルダの中に次のファイルがある状態にしてください。

  index.html
  .babelrc
  development.js
  webpack.config.js
  src フォルダ
    hello.jsx
  build フォルダ
    build.js

build.js は WebPack によって生成されます。

index.html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="app01"></div>
    <div id="app02"></div>
  <script src="./build/build.js"></script>
  </body>
</html>
hello.jsx
const React = require('react');
const ReactDOM = require('react-dom');

class HelloWorld extends React.Component {
  render() {
    return <div>Hello World {this.props.name}</div>;
  }
}

const hwElement = <HelloWorld name="01" />;
ReactDOM.render(hwElement,
  document.getElementById('app01'));

const hwFactory = React.createFactory(HelloWorld);
 ReactDOM.render(
  hwFactory({name: '02'}),
  document.getElementById('app02')
);

Babel用の設定ファイルを用意します。

.babelrc
{
  "presets": ["env", "react"],
}

WebPack用の設定ファイルを用意します。

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, 'build')

export default {
  entry: src + '/hello.jsx',

  output: {
    path: dist,
    filename: 'build.js'
  },

  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },

  plugins: []
}

実行

ビルドコマンドは次のとおりです。決めたフォルダをカレントディレクトリにしてコマンド実行してください。
オプションなどを設定しなくても webpack.config.js をデフォルトで読み取ってそのとおりに動作します。

>.\node_modules\.bin\webpack

実行結果は次のとおりになります。

<body>
    <div id="app01"><div data-reactroot="">Hello World 01</div></div>
    <div id="app02"><div data-reactroot="">Hello World 02</div></div>

これで、Babel を使って ES の最新と React の変換を行えます。

GitHub

2018/04/08追記

少しソースコードをシンプルにして次の場所に配置しました。
https://github.com/standard-software/React_Hello-World_Sample
CDN版 Reactのみ / React+JSX
Browserify版 Reactのみ / React+JSX Reactify / React+JSX Babelify
WebPack版 Reactのみ / React+JSX
これらが全て含まれています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?