🍏

React基礎

2023/07/31に公開

React

tech

はじめに

React基礎の勉強を進めていきます！

コンポーネント

コンポーネントとは、、画面の各構成要素をReactで定義したもの！

コンポーネントを区切る単位はいろいろな大きさで区切ることができる！
（例えば、ヘッダーのメニューを1つのコンポーネントとしてその中に定義した
それぞれのメニューの項目をまた別でコンポーネントで定義したり！）

一つのページで使用されている部品というのは、全てコンポーネントで定義されることになる！

メリット

再利用性の向上（コードが使いまわせる👀）
可読性の向上（コードが整理される👀）
疎結合になる（バグを減らせる👀）

疎結合とは、、
コンポーネント同士の結合性、結びつきを緩くすることによって、
再利用性が上がったり、コンポーネントごとにテストができるようなるので
バグの混入も防ぐことができるようになる！！

デメリット

設計の複雑さ
パフォーマンスの最適化（大規模なアプリケーションでは、不要な再レンダリングを避けるための最適化が必要になる場合がある）
大規模な状態管理（大規模なアプリケーションでは、多くのコンポーネント間で状態を共有する必要がある場合がある）

コンポーネントの定義

コンポーネントはJavaScriptの関数として定義する。

function Welcome() {
  return <h1>Hello</h1>;
}

(先頭を大文字にすることで、コンポーネントですよというのを表している！)

コンポーネントはJSXを返す！

<Welcome />

コンポーネントの実行
コンポーネントを呼ぶときは、このようにASXの形式で呼ぶことになります！

親コンポーネントと子コンポーネント

親コンポーネントと子コンポーネントの関係についてもっと詳しく！🤔

Appコンポーネント（親）がWelcomeコンポーネント（子）を含むとする。

まず、Welcomeコンポーネントを定義。
このコンポーネントは、propsを受け取り、"Hello, {props.name}というメッセージを表示します。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

次に、Appコンポーネントを定義。
このコンポーネントは、Welcomeコンポーネントを含み、それにpropsとしてnameを渡します。

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

この例では、AppコンポーネントはWelcomeコンポーネントの親となっています！
AppからWelcomeへのpropsの渡し方に注目してください👀
nameというpropsを通じて、それぞれ異なる名前をWelcomeコンポーネントに渡しています。

上記のコードが実行されると、、

ブラウザの画面には以下のような出力が表示されます！

Hello, Sara
Hello, Cahal
Hello, Edite

これは、Appコンポーネントが3つのWelcomeコンポーネントをレンダリングし、それぞれに異なるnameプロパティを渡しているためです📝
Welcomeコンポーネントは、受け取ったpropsのnameを使ってメッセージを作成し、それを<h1>タグで囲んで返します。
したがって、Appコンポーネントがレンダリングされると、3つのWelcomeコンポーネントが順にレンダリングされ、それぞれが"Hello, {name}"というメッセージを表示されるわけです！

このように、親コンポーネントから子コンポーネントへのデータの流れと、
コンポーネントの再利用がReactの主要な特徴となっています🌱

関数コンポーネント

関数で定義するJSのことを、関数コンポーネントというふうに表現する！
アロー関数でも定義することができる！(個人の好みなのでどちらを使用してもOK)

JSXとは？

JSXはJavaScript XMLの略
Reactで使用されるJavaScriptの構文拡張
HTMLに似ていますが、JavaScript内で使用されます!

const element = <h1>Hello, world!</h1>;

上記のコードは、"Hello, world!"という見出しを持つReact要素を作成します。

JSXはJavaScriptの拡張なので、JavaScriptの機能を全て使用することができます!
例えば、変数を埋め込んだり、条件分岐を行ったり、配列をマッピングしたりすることが可能です。

JSXの特性

タグは必ず閉じる必要があります。例えば、<input type="text">というHTMLはJSXでは<input type="text" />。
JSXは大文字と小文字を区別します。例えば、HTMLのclass属性はJSXではclassName。

StateとProps

Reactのコンポーネントは主に二つのデータタイプ、propsとstateによって制御されます！
これらがコンポーネントの振る舞いを決定し、ユーザーインターフェースの更新を制御します。

props

props（プロパティ）は、コンポーネントに渡されるデータのこと。
親コンポーネントから子コンポーネントへデータを渡す際に使用されます。
読み取り専用で、コンポーネント内でpropsの値を変更することはできません。

propsを使用したコンポーネントの例

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Welcomeコンポーネントを使用する際に、nameというpropsを渡す
<Welcome name="Sara" />

この例では、Welcomeコンポーネントにnameというpropsを渡しています。
Welcomeコンポーネントは、渡されたpropsを使用して表示内容を決定します。

state

stateは、コンポーネント内で管理されるデータのこと。
コンポーネントが自身で管理し、時間とともに変化する可能性があるデータを保持します。
stateの変更は、Reactによってコンポーネントの再レンダリングを引き起こします。

stateを使用したコンポーネントの例

import React, { useState } from 'react';

function Counter() {
  // stateの初期化
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

この例では、Counterコンポーネントがcountというstateを持っています。
countの値は、ボタンがクリックされるたびに増加します。
setCount関数を呼び出すと、countの値が更新され、コンポーネントが再レンダリングされます。

Reactでいうレンダリングとは？

例えば、オンラインショッピングサイトで、そのサイトにはたくさんの商品がリストアップされていて、各商品には画像、名前、価格などの情報が表示されています。

この商品一覧は、サーバーから送られてきたデータ（商品の画像、名前、価格など）を元に、ブラウザが読み取り可能な形（HTMLとCSS）に変換されています。この変換のプロセスが　「レンダリング」　です。

Reactの場合、レンダリングは以下のような流れで行われます！

Reactコンポーネント（例えば、商品一覧を表示するProductListコンポーネント）が、サーバーから送られてきたデータ（商品のリスト）を受け取ります。
ProductListコンポーネントは、このデータを元にJSXを使ってHTMLを生成します。例えば、各商品を表示する<div>要素を作り、その中に商品の画像を表示する<img>要素、商品名を表示する<h2>要素、価格を表示する<p>要素を配置します。
このJSXがReactによって「レンダリング」され、ブラウザが解釈できる実際のHTMLに変換されます。
このHTMLがブラウザに表示され、ユーザーが商品一覧を見ることができます。

このように、レンダリングはデータをユーザーが見ることができる形式に変換するプロセスであり、ReactではJSXを使ってこのプロセスが行われます👀

参考🌱

https://react.dev/