- 追加された行はこの色です。
- 削除された行はこの色です。
- React.js へ行く。
#author("2020-06-02T16:48:36+09:00;2020-06-02T11:12:46+09:00","default:inoue.ko","inoue.ko")
*React.js
https://ja.reactjs.org/
~
React.js とは、Facebookとそのコミュニティによって開発されている、ユーザインタフェース構築のための [[JavaScriptフレームワーク>JavaScript/Framework]](本家曰く、ライブラリ)です。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
~
//マークアップとロジックを別々のファイルに書いて、技術を分離するのではなく、React はマークアップとロジックを両方含む疎結合の「コンポーネント」という単位を用いて関心を分離します。
~
***どうやって使うの?
//-Node.js, npm 環境が必要です。
-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要素に挿入しています。
~
***フルソース
<!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>
~
***詳細は、以下の公式サイトをご覧下さい。
-https://ja.reactjs.org/
~
~
***参考:React Native
React Native(リアクト・ネイテイヴ)とは、Facebookが作成したオープンソースのモバイルアプリケーションフレームワークです。
開発者がネイティブプラットフォーム機能とともに React を利用できるようにすることで、Android、iOS、Web および UWPアプリケーションの開発に活用できます。
~
~