Edited at

React16 最小構成のビルド環境 browserify 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 最小構成のビルド環境 broserify reactify JSXあり - Qiita

https://qiita.com/standard-software/items/781ec3f491f4f1bea7b6

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


はじめに

最小構成の React 16 のビルド環境を作ります。

環境は、Windows 。 node.js インストールしておいてください。


インストール

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

  npm init -y

npm install --save browserify
npm install --save react
npm install --save react-dom

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

  "dependencies": {

"browserify": "^16.1.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",


ファイル

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

  index.html

src フォルダ
hello.js
build フォルダ
build.js

用意するのは、index.html と hello.js で、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.js

const React = require('react');

const ReactDOM = require('react-dom');

class HelloWorld extends React.Component {
render() {
return React.createElement('div', null, `Hello World ${this.props.name}`);
}
}

const hwElement = React.createElement(HelloWorld, {name: '01'}, null);
ReactDOM.render(
hwElement,
document.getElementById('app01')
);

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



実行

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

.\node_modules\.bin\browserify .\src\hello.js -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>


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

これらが全て含まれています。