React16 CDN でHelloWorld JSXありなし両方

10595 ワード
React JSX JavaScript JavaScript テキストリンク

関連記事

CDN を使わずにビルド環境を構築する場合は次の各記事を参考にしてください。

・React16 最小構成のビルド環境 browserify JSX無し - Qiita
https://qiita.com/standard-software/items/87c4a0dc3c67c426c31f

・React16 最小構成のビルド環境 broserify reactify JSXあり - Qiita
https://qiita.com/standard-software/items/781ec3f491f4f1bea7b6

はじめに

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

Spinnerの2級3級甚だしきに至っては多段連動について
linux履歴表示コマンドhistory