--- title: React16 最小構成のビルド環境 browserify JSX無し tags: JavaScript React browserify author: standard-software slide: false --- # 関連記事 ビルドせずに 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
``` ```js: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 ``` 実行結果は次のとおりになります。 ```
Hello World 01
Hello World 02
``` # 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 これらが全て含まれています。