LogoMark.png

React.js のバックアップの現在との差分(No.0)

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