Edited at

React16 CDN でHelloWorld JSXありなし両方

More than 1 year has passed since last update.


関連記事

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

これらが全て含まれています。