Reactの基本１（開発環境～コンポーネントの作成とＷｅｂサーバへのデプロイ）

１．Reactとは
２．HTMLページで部分的にReactの利用
３．Reactの開発環境
４．React のコンポーネント作成
５．Webサーバにデプロイ

１．Reactとは
（１）概要
　React（React.js）は、Facebookとコミュニティで開発されているユーザインタフェース構築のためのJavaScriptライブラリ。
（２）特徴
・JavaScript内に HTML の様な独自の記法（JSX）を使うことでプログラムが読みやすくなる。
・仮想 DOMにより差分のみの画面描画ができる。
・フロントの描画に使う見た目や機能をクラス及び関数コンポーネントで作り（export）、javascriptで読み込む（import）することでプログラムの保守がし易くなる。

２．HTMLページで部分的にReactの利用
　ここでは、Reactのライブラリを読み込み、ReactのReact.createElement()メソッドによるReact要素作成、ReactDOM.render()メソッドによるReact 要素とブラウザ上のDOMを接続してレンダリングする。
　React.createElement(HTML要素名, プロパティ, 子要素)の様式でReact要素を作成する。

（１）React.createElement()によるReact要素の作成
test1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Simple React</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script src="js/test1.js"></script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Simple React</title>

</head>

<body>

</body>

</html>

・最初の２つの<script>タグはReactを読み込むもので、3つ目の<script>タグはコンポーネントのコードを読み込むもの。
js/test1.js

var a = React.createElement('h1', { testname:'bar' }, "React TEST1 ")
ReactDOM.render(a, document.getElementById('root'))

1 2	var a = React.createElement('h1', { testname:'bar' }, "React TEST1 ") ReactDOM.render(a, document.getElementById('root'))

・React.createElement()でReact要素を作成。
・ReactDOM.render()でReact要素をDOM ノードにレンダーする。

XAMPのApatchを起動し、httpd.confに記述している通りtest1.html、test1.jsファイルを”C:/xampp/htdocs”のフォルダに配置する。
httpd.conf

：
ServerName localhost:80
：
DocumentRoot "C:/xampp/htdocs"

：

ServerName localhost:80

：

DocumentRoot "C:/xampp/htdocs"

ブラウザでtest.htmlファイルを開く

id=”root”の要素にReactで作った要素が入る

（２）JSXによるReact要素の作成
下記のルールで記述されたJSXによるスクリプト文はBabelによってJavaScript のReact要素に変換される。
・通常のHTMLタグは小文字で、ユーザー定義のReactコンポーネントは大文字始まりで書く。
・JSX 内で式として評価する箇所は { と } で囲む。
・JSX ではキャメルケースで記述する。キャメルケースでは helloWorld のように、先頭は小文字、単語の区切りで大文字とする)。
・JSX では全体をまとめる要素が必要で、全体を囲み、一つの要素にするという目的のために<React.Fragment> と </React.Fragment> で囲む。React.Fragment のタグは <>と</>という短縮形で書くこともできる。
test4.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Simple React using JSX</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel" src="js/test4.js"></script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Simple React using JSX</title>

</head>

<body>

</body>

</html>

js/test4.js

var a = (
 <React.Fragment>
  <h1>Hello</h1>
  <h2>Hello</h2>
  <h3>Hello</h3>
 </React.Fragment>
)
ReactDOM.render(a, document.getElementById('root'))

var a = (

<React.Fragment>

<h1>Hello</h1>

<h2>Hello</h2>

<h3>Hello</h3>

</React.Fragment>

)

ReactDOM.render(a, document.getElementById('root'))

３．Reactの開発環境
（１）ホストOS
・Windows 10 Pro
（２）仮想環境（VirtualBox）
　・ゲストOS：CentOs8（Red Hat 64-bit）
（３）reactのインストール
　$ npm install -g create-react-app
（４）プロジェクトの作成
　$ create-react-app reactsample
　上記のコマンドを使うことで、package.jsonの作成、トランスコンパイラのBabel、バンドラーのWebpackの設定ができる。
　本コマンドを使うためにNodeバージョン：10.16以上、及び npmバージョン：5.6以上の環境が必要。
https://ja.reactjs.org/docs/create-a-new-react-app.html

（補足）

・トランスパイラ：
　Babelは、ECMAScript15以降のモダンなJavaScriptの構文や機能を活用して書かれたコードをそれ以前の古いJavaScriptコードに変換してくれるJavaScriptコンパイラやトランスパイラと呼ばれるツール。
　ECMAScript（エクマスクリプト）は、Ecma Internationalのもとで標準化手続きが行われているJavaScriptの規格。
・バンドラー
　リソース(HTML、JSX、CSS、JavaScript、PNGなどのファイル)を1つに束ねるツール。WebpackはNode.jsの環境とNode.jsのパッケージを管理するnpm(Node Package Manager)が必要。

「create-react-app」コマンドで下記のフォルダが作られる。
・フォルダ構成

reactsample
　|-README.md
　|-node_modules
　|-package-lock.json
　|-package.json
　|-public・・・HTML、画像ファイルなど
　|-src ・・・開発するソースコードを置く。.js、jsxファイル
　|-build ・・・デプロイファイル。htmlとjavascriptのファイルがひとまとまりになっ
　　　　　　　た本番用ファイル。
　　　　　　　npm run buildによって生成される

reactsample

　|-README.md

　|-node_modules

　|-package-lock.json

　|-package.json

　|-public・・・HTML、画像ファイルなど

　|-src ・・・開発するソースコードを置く。.js、jsxファイル

　|-build ・・・デプロイファイル。htmlとjavascriptのファイルがひとまとまりになっ

　　　　　　　た本番用ファイル。

　　　　　　　npm run buildによって生成される　

（５）Reactサンプル画面の表示
「create-react-app」コマンドで作成されたフォルダで「npm start」コマンドを実行する。
　$ cd reactsample
　$ npm start

・仮想マシンのブラウザで下記urlに接続
http://127.0.0.1:3000

４．React のコンポーネント作成
　コンポーネントは UI の一部分となるビュー (View) を作る働きをするプログラムであり、再利用できる。
　コンポーネントはReact.Component から派生したクラスとして作成し、renderメソッドでビューとなる JSX を返す。
　「create-react-app」コマンドでReactの環境を作成した場合はエントリポイントはindex.html、index.jsに設定され、index.jsで使うコンポーネントを作成する。
（１）コンポーネントの作成
public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Simple React</title>
  </head>
  <body>
        <div id="root"></div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Simple React</title>

</head>

<body>

</body>

</html>

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Test5 from './Test5';

ReactDOM.render(
  <React.StrictMode>
    <Test5 />
  </React.StrictMode>,
  document.getElementById('root')
);

import React from 'react';

import ReactDOM from 'react-dom';

import Test5 from './Test5';

ReactDOM.render(

<React.StrictMode>

</React.StrictMode>,

document.getElementById('root')

);

（解説）
・Create React App を含む JavaScript のバンドルツールを使った環境で React や ReactDOM のメソッドなどを使う場合、React 本体や ReactDOM を import 文を使って読み込む必要がある。
　import 名前（変数名） from ‘モジュールのパス’;
　import React, { Component } from ‘react’;
　但し、webpack を使用している場合、npm でインストールしたモジュールは webpack のモジュール解決の仕組みがあるので通常のローカルファイルとは異なりパスや拡張子を省略することができる。そのため import React from ‘react’ のようにパスや拡張子を省略して記述できる。
・ReactのレンダリングはReactDOM.render() メソッドを使う。
　ReactDOM.render(element, container[, callback])
　　element：React 要素やコンポーネント
　　container：描画先となる実際の DOM ノード（コンテナ）
　　callback：オプションのコールバック関数
・StrictMode はアプリの潜在的な問題を検出するために追加されたコンポーネントで<StrictMode>・・・</StrictMode>で囲まれた子孫コンポーネントに対し、安全でないライフサイクルメソッドの使用などのチェックを行う。
・Create React App を使った環境ではエントリポイントの index.jsでコンポーネントなどを読み込んでレンダリングすることでアプリケーションを表示する。

src/Test5.js

// React の読み込み
import React from 'react';
 
//React.Component を継承して App という名前のコンポーネントを作成
class Test5 extends React.Component {
  render() {
    return <h1>HelloTest5 </h1>
  }
}
//index.js で使えるように App をエクスポート
export default Test5;

// React の読み込み

import React from 'react';

//React.Component を継承して App という名前のコンポーネントを作成

class Test5 extends React.Component {

render() {

return <h1>HelloTest5 </h1>

}

//index.js で使えるように App をエクスポート

export default Test5;

・JSXの記述で子要素にjavascript関数を使うときは関数名を{}で囲む。

（２）開発用サーバで実行
開発用サーバを起動し、仮想マシンのブラウザで下記urlに接続
$ npm start
http://127.0.0.1:3000

５．Webサーバにデプロイ
（１）ビルド
　$ npm run build

・buildフォルダが作成される。
build
|-index.html
|-static
|-js

（２）Webサーバにデプロイ
　XAMPのApatchを起動し、httpd.confに記述している通りindex.htmlファイルとstaticフォルダを”C:/xampp/htdocs”のフォルダに配置する。

The end