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

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
これらが全て含まれています。

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした