React.js
React.js とは、Facebookとそのコミュニティによって開発されている、ユーザインタフェース構築のための JavaScriptフレームワーク（本家曰く、ライブラリ）です。SPA（Single-Page Application）やモバイルアプリケーションの開発におけるベースとして使用することができます。
JSXについて
- JSXとは JavaScript の構文の拡張で、JavaScript の中に直接 HTML/XML を記述する技術です。以下のような記述があり得ます。
const element = <h1>Hello, world!</h1>;
- 実質的にHTMLを書く必要がなくなります。
- JSX や ES6 文法は、Babel というトランスパイラで ES5 JavaScript に変換しています。
<script type="text/babel"> と書く必要があります。
React.js の 主な機能
- 宣言的UI（テンプレーティング）: JSX & ReactDOM
- データバインディング（data ⇒ UI）: state hook
- コンポーネント化：関数コンポーネント・React.Componentclass
- 高効率レンダリング：仮想DOM
どうやって使うの？
- CDN を利用して以下のライブラリをheadタグで読み込むだけでOKです。
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
- JSX を利用して Hello World を出力する事例
<div id="myReactApp"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, World!</h1>, document.getElementById('myReactApp') ); </script>
- ウェブブラウザには、以下のHTMLがレンダリングされます。
<div id="myReactApp"> <h1>Hello, World!</h1> </div>
- 概説
- #myReactApp
React.js が利用する要素です。 - JSX を書く場合は、script type="text/babel" となります。
- ReactDOM.renderメソッド
コンポーネントを id = myReactApp のDOM要素に挿入しています。
- #myReactApp
フルソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
<title>React Test</title>
</head>
<body>
<div id="myReactApp"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById('myReactApp')
);
</script>
</body>
</html>
詳細は、以下の公式サイトをご覧下さい。
参考：React Native
React Native（リアクト・ネイテイヴ）とは、Facebookが作成したオープンソースのモバイルアプリケーションフレームワークです。
開発者がネイティブプラットフォーム機能とともに React を利用できるようにすることで、Android、iOS、Web および UWPアプリケーションの開発に活用できます。