Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@standard-software

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

関連記事

ビルドせずに 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
1
Help us understand the problem. What are the problem?