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

React16 最小構成のビルド環境 browserify reactify JSXあり

More than 1 year has passed since last update.

関連記事

ビルドせずに CDN でReactを使いたい場合は、こちらの記事

・React16 CDN でHelloWorld JSXありなし両方 - Qiita
https://qiita.com/standard-software/items/0cdbcdb2a6d6355c946b

JSX無しで最小構成のビルド環境を作る場合は、こちらの記事

・React16 最小構成のビルド環境 browserify JSX無し - Qiita
https://qiita.com/standard-software/items/87c4a0dc3c67c426c31f

それぞれ参考にしてください。

はじめに

環境は Windows 。 node.js インストール済みとします。

インストール

今回は browserify と reactify を使います。フォルダを決めてローカルインストールします。

  npm init -y
  npm install --save react
  npm install --save react-dom
  npm install --save browserify
  npm install --save reactify

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

  "dependencies": {
    "browserify": "^16.1.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "reactify": "^1.1.1"
  },

ファイル

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

  index.html
  src フォルダ
    hello.jsx
  build フォルダ
    build.js

用意するのは、index.html と hello.jsx で、build.js は browserify によって生成されます。

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')
);

前の記事と比べてほんの少しだけ変化しています。

実行

ビルドコマンドは次のとおりです。決めたフォルダをカレントディレクトリにしてコマンド実行してください。

.\node_modules\.bin\browserify -t reactify .\src\hello.jsx -o .\build\build.js

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

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

これで、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