Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

関連記事

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした