LoginSignup
1

More than 5 years have passed since last update.

React16 最小構成のビルド環境 browserify JSX無し

Last updated at Posted at 2018-04-01

関連記事

ビルドせずに 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
これらが全て含まれています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1