関連記事
ビルドせずに 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 によって生成されます。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app01"></div>
<div id="app02"></div>
<script src="./build/build.js"></script>
</body>
</html>
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
これらが全て含まれています。