超初心者向けReact参考書モドキ

Reactとはなんぞ？

業務でReactを扱うことになったので、自身の参考書程度に記しておきます。 ※あくまで自身の確認程度などでとても分かりづらいと思われます。 -------------------記述途中-----------------------------------

Reactとは

ReactはFaceBook社が開発したJavascript用のフレームワークでありUI開発に優れている 前提条件としてHTML、CSS、Javascriptの知識がなければならない。 Web向けに構築する場合はReactDOMと連携して使用。

Reactの特徴

・コンポーネント： 　　〇　画面の各要素をコンポーネントを組み合わせるという形で構築する。 　　〇　コンポーネントは自分で作成したカスタムタグと考えることができる。 ・JSXで画面要素を記述 　　〇　コンポーネント内に画面とソースコードを見通しよく記述できる。 　　〇　デメリット　JSXは何らかのツールで変換処理する必要がある。 ・Javascript内の変数への変更が自動的にDOMに伝わる 　　〇　これをリアクティブプログラミングと呼ぶ 　　〇　コーディングをアプリケーションロジックの作成に集中できる。 ・仮想DOM（VirtualDOM） 　　〇　実際のDOM（≒ブラウザ画面）の書き換えが効率的に行える。

関数宣言

Reactでの関数の宣言はJavascriptと同様に function句と"=>"の記号を利用したアロー関数式の2つを利用することが可能。 アロー関数式は以下の様に利用する。

const printMessage = () => {
   console.log('Hello, World');
};
printMessage(); //Hello, Worldと表示

配列の宣言とオブジェクトの宣言

ここはシンプルに

オブジェクトの宣言： const object = { name: '田中', age;30 };
配列の宣言：　const array = ['first', 'second'];

さらに既存の配列利用して新しく配列を宣言する際にはスプレッド演算子(...)というものが使われる。

const array1 = ['first', 'second'] //通常の配列宣言
const array2 = [...array1, 'third']　//スプレッド演算子を利用した配列宣言

オブジェクトも同様にスプレッド演算子を利用することができる。

配列操作

配列には操作するための各種メソッドが定義されている。 配列名.mapは配列内の各要素に一律の加工を施すことができる。(map関数) 配列名.filterは配列内で条件に合う要素を残す。(filter関数) 配列名.reduceは配列内の各要素を順次処理していき一つの結果とする。(reduce関数) 以下コード例

const array = [10, 20, 30, 40, 50]; //配列の宣言
map関数：const example1 = array.map(element) => `内容: ${element}`);
// example1には次の内容が格納される。 ["内容：10”, "内容：20", "内容：30" ,"内容：40", "内容：50"]

const example2 = array.filter((element) => element > 21);
// example2には次の内容が格納される。[30, 40, 50]

const example3 = array.reduce((sum,element) => sum = sum + element);
// example3には次の内容が格納される。150 すべての要素を足した結果。

<h2>Reactでの条件演算子</h2>
Reactでは通常のif文で条件によって値を返すことができないため、

flag? 'true', 'false';

と上記の様に条件演算子を用いる。

<h2>React用ステートメント</h2>

import React from 'react';
import ReactDOM from 'react-dom';

この2つのステートメントはWebアプリケーションを作成するうえで必ずインポートしなければならない
<h5>JSXとは？</h5>
JavascriptにHTMLを直接記述することができる。

例：

Hello World

というHTML文を記述するとするこれをReactでは

React.createElement('div', null, 'Hello World')

といったJavascript文に変更される。
注意点：HTML属性classはclassNameに変更する必要がある。
　　　　HTML属性forはhtmlForに変更する必要がある。
<h5>レンダリング</h5>
コンポーネントを画面上に配置し機能させることをマウントといい
コンポーネントが排除されることをアンマウントと呼ぶ

<h2>フック（Hooks）</h2>
フックとは、関数ベースのコンポーネントに、状態(state)や特定のタイミングで機能する関数を
定義できるようにしたReactの拡張機能である。
種類として
状態フック：関数コンポーネント状態を追加するためのもの。（後述するuseState）
副作用フック：Reactの外へ何かしらの影響を与える（もしくは外から影響を受ける）処理を記述する（後述するuseEffect）
Refフック：useRef関数を使って利用する。
<h5>フックのルール</h5>
・関数ベースのコンポーネントのトップレベルでのみフック関数を呼び出す。
・コンポーネントとして作成されている関数からのみフック関数を利用できる。
通常のJavascript関数からフック関数を呼び出すことはできない。

<h2>useState関数</h2>
現在のState(現在の状態）とそれを返すための関数をペアにして返す関数である。
使用方法

import React, { useState } from 'react';

まずは上記コードを記すことでReactの機能にuseState関数が提供する機能を追加する。
状態の定義

const [状態変数(flagなど), 状態変更関数(changeFlagなど)] = useState(状態の初期値(この場合だとtrue,falseなど);

状態の変化
ここでは例としてonclickを利用して状態変数を変化させます。

<input type="button" value="true"
onclick={ () => changeFlag(true)} />

の様に記述することでchangeFlagにtrueが格納され状態の変化が可能となる。