はじめに

Reactの CDN でビルド無しに動かす方法は、先の記事で書きました。

React.js HelloWorldで理解するJSXの書き方(初歩的) - Qiita
https://qiita.com/standard-software/items/86f7e95d25a7285c1ff1

React15と16では書き方が変わってしまったので、更新しておきます。

ソース(JSX無し)

CDNやclassの書き方が15.0とは違っています。このように書くようです。

index.html

<!DOCTYPE html>
<html>
  <head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  </head>
  <body>
    <div id="app01"></div>
    <div id="app02"></div>

    <script>

      class HelloWorld extends React.Component {
        render() {
          return React.createElement('div', null, `Hello World ${this.props.name}`);
        }
      }

      const hwElement = React.createElement(HelloWorld, {name: '01'});
      ReactDOM.render(hwElement,
        document.getElementById('app01'));

      const hwFactory = React.createFactory(HelloWorld);
      ReactDOM.render(hwFactory({name: '02'}),
        document.getElementById('app02'));

    </script>

  </body>
</html>

出力結果は次のようになります。

<body>
    <div id="app01"><div data-reactroot="">Hello World 01</div></div>
    <div id="app02"><div data-reactroot="">Hello World 02</div></div>

ソース(JSXあり)

JSX を使う場合は、BabelをCDNで使います。

index.html

<!DOCTYPE html>
<html>
  <head>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  </head>
  <body>
    <div id="app01"></div>
    <div id="app02"></div>

    <script type="text/babel">

      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'));

    </script>

  </body>
</html>

出力結果は同様になります。

参考

こちらにJSX有り、JSX有り、どちらものサンプルソースがあります。
React Without JSX - React
https://reactjs.org/docs/react-without-jsx.html

ビルド環境を整える際に、React15と16の差で動かなかったので、スタックオーバーフローで質問し mjy さんに助けていただきました。大変ありがとうございます。

javascript - React で Jsxを使わずにビルドしたいが動かない - スタック・オーバーフロー

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

React16 CDN でHelloWorld JSXありなし両方

関連記事

はじめに

ソース(JSX無し)

ソース(JSXあり)

参考

GitHub