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アプリケーションの開発に活用できます。