すべての React コンセプトを短時間で説明-jsチュートリアル-php.cn

React は、フロントエンドコードを数分で開発できる JavaScript ライブラリです。特定のタスクを実行するためのメソッドと関数が事前に構築されています。ライブラリとしての React には、調整、状態、プロパティなどの複雑な用語が含まれています。これらは実際には何を意味するのでしょうか?

この記事では、この誇張された概念についてより簡単に学びます。

1. コンポーネント

コンポーネントは、Web ページ上にレンダリングされる React 要素を返す再利用可能な小さなコードです。これは、ボタン、ナビゲーションバー、カードなどの Web ページの 1 つの部分を構成するコードのグループです。これは JavaScript 関数に似ていますが、レンダリングされた要素を返します。 "Props" というパラメータを受け入れます。コンポーネントの名前は大文字で付けられます。

機能部品の例

リーリー

注:

クラスベースの代わりに機能コンポーネントが推奨されます。
機能コンポーネントはステートレスコンポーネントと呼ばれることがよくあります。

2. JSX

JSX は JavaScript XML であり、これを使用すると React で HTML を作成できます。 React 要素を作成するための XML のようなタグと属性が導入されています。 .jsx ファイルに HTML のようなコードを記述できるため、React コンポーネントの作成が簡単になります。複雑な JavaScript を使用する代わりに、JSX を使用すると、コードが読みやすく、きれいになります。 React DOM は、htmlFor、onClick などの属性の命名にキャメルケースを使用します。

JSXの例

リーリー

3. フラグメント

React のフラグメントを使用すると、コンポーネントから複数の要素を返すことができます。追加の DOM ノードを作成せずに、要素のリストをグループ化します。 DOM から余分な div をすべて削除します。これにより、UI が迅速にレンダリングされます。

フラグメントの例

リーリー

注:

フラグメントにより、コードがクリーンになり、読みやすくなります。
メモリ効率が高くなります。
CSS スタイルとキーを含めることはできません。

4. 小道具

「Props」は、プロパティを表す React の特別なキーワードです。コンポーネント間でデータを転送するために使用されます。データ転送は一方向、つまり親コンポーネントから子コンポーネントへ行われます。

小道具の例

リーリー

注: Props は読み取り専用なので、子コンポーネントが親コンポーネントからの値を操作しないことが保証されます。

5. 州

コンポーネントは、ユーザーが操作するときに特定の値を追跡する必要があります。ユーザーがボタンをクリックすると、ライト/ダークモードテーマの切り替えボタンの値が変更されるとします (ライトからダーク、またはその逆)。コンポーネントはテーマの現在の値を記憶する必要があります。 React では、この種のコンポーネント固有のメモリを状態と呼びます。

状態は useState() フックを使用して定義されます。詳しくは後ほど

状態の定義例

リーリー

注: 他の子コンポーネントと簡単に共有し、信頼できる唯一の情報源を確保するには、トップレベルのコンポーネントで状態を定義することを常に推奨します。

6. ライフサイクルメソッド

ライフサイクルメソッドは、コンポーネントの存在のさまざまな段階でアクションを実行するために React クラス内で使用できる特別な関数です。これらの段階は次のとおりです:

マウント: コンポーネントが最初に作成され、DOM に挿入されるとき。
更新: コンポーネントのプロパティまたは状態が変更され、コンポーネントが再レンダリングされるとき。
アンマウント: コンポーネントが DOM から削除されるとき。

7. 純粋さ

関数型プログラミングにおける純粋性とは、与えられた同じ入力が同じ出力を返すことです。入力が出力を決定する唯一の要素である場合、その関数は純粋であると言われます。

React では、同じ入力 (つまりプロパティ) に対して同じ出力を返すコンポーネントは純粋であると言われます

8. 厳密モード

Strict モードは、コードの品質を向上させるための追加の安全機能を有効にする React の開発機能です。コード内の潜在的なエラーやバグに関する警告が表示されます。ブラウザのコンソールに警告を記録します。

ストリクトモードの例

リーリー

Every React Concept Explained in inutes — ブラウザコンソールを表示する React の厳密モード

9. フック

React のフックを使用すると、クラスコンポーネントを作成せずに状態やその他の React 機能を使用できるようになります。フックは、React の状態管理、副作用、その他の機能へのアクセスを提供する関数です。

一般的に使用されるフック: useState、useMemo、useRef など

フックの例

リーリー

注:

Hooks can only be called inside React function components.
Hooks can only be called at the top level of a component.
Hooks cannot be conditional.

10. Context API

The Context API is used to share data like state, functions across the component tree without passing props down manually at every level. It avoids prop drilling by simplifying state management and sharing data across the component. With Context API the data is shared directly with the child component who will consume it.

The useContext() method is used to create a context. This function returns a context object with two components – a Provider and a Consumer.

The Provider is used to wrap the part of your component tree where you want the context to be available. It accepts a compulsory value prop that holds the data you want to share across other components.

The useContext hook is used to access the data.

Example of Context API

Create a context using createContext() method. Wrap child components in the Context Provider and supply the state value.

import { useState, createContext} from "react";

const UserContext = createContext();

function ParentCounter() {
  const [count, setCount] = useState(10);

  return (
    <UserContext.Provider value={count}>
      <h1>{`Current Count: ${count}!`}</h1>
      <Button />
    </UserContext.Provider>
  );
}

ログイン後にコピー

Use useContext hook to access the value of age.

import { useContext } from "react";

function GrandChildConsumer() {
  const age = useContext(UserContext);

  return (
    <>
      <h1>This is GrandChildConsumer</h1>
      <h2>{`Current Count: ${count}`}</h2>
    </>
  );
}

ログイン後にコピー

Note: The `useContext` hook is often used instead of Consumer for better readability and simplicity.

11. Lists and Keys

A Key is a special kind of attribute for list items in React. It acts as a unique identifier for each items when it is updated, deleted, or added.

Assigning index of the item as the Key is discouraged because if the items are rearranged it will affect the expected behavior.

Imagine in shopping cart you have 10 items added and each item have a unique index as a Key. Now, you decide to remove the first and fifth item from the cart. When the items are removed the indexing will change; the second item will become first and sixth item will become fifth item.

Example of Lists and Keys

const fruits = ["apple", "banana", "orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}> {fruit} </li>
      ))}
    </ul>
  );
}

ログイン後にコピー

Note:

It is recommended to use string as a `Key` that uniquely identifies the item in the list.
Third-party libraries like UUID offer the functionality to create unique keys.

12. Form: Controlled & Uncontrolled Components

React forms allows to collect and manage user input better than traditional HTML form. These forms are built using components and store the user inputs into state. There are two types of components:

Controlled Components

In Controlled components, the form's state is managed by the component himself. This is the recommended approach for managing form data in React. When the user interacts with the form (e.g., typing in an input field), the component's state is updated to reflect the changes.

Example of Controlled Component

function ControlledInput() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" value={name} onChange={handleChange} />
      <p>Your name is: {name}</p>
    </div>
  );
}

ログイン後にコピー

Uncontrolled Components

Uncontrolled components rely on the DOM to manage the form data. The component doesn't directly control the form's state, but it can access the values using DOM methods like ref.

Example of Uncontrolled Component

function UncontrolledInput() {
  const nameRef = useRef(null);

  const handleClick = () => {
    console.log(nameRef.current.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" ref={nameRef} />
      <button onClick={handleClick}>Get Name</button>
    </div>
  );
}

ログイン後にコピー

Note:

Controlled components provides form validation because the user's input is instantly reflected due to use of state.
Form validation is not possible in uncontrolled components because the user's input can only be accessed after the form is submitted.

13. React Router

Introduction to React Router for navigation
Basic setup and usage
Example: Creating routes and navigating between pages

React Router is a standard library for routing in React. It enables navigation among various components in the React app. It allows changing the browser URL and syncing the UI with the URL. React Router is important for creating single-page applications (SPA) with navigation features.

First, you need to install React Router from your terminal.

Installing React Router

# If you are using npm
npm install react-router-dom

# If you are using yarn
yarn add react-router-dom

ログイン後にコピー

Example of React Router

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  );
}

ログイン後にコピー

First wrap your content into the . Then we define and inside that introduces the for navigation. has path which specifies URL of the page and element attribute which specifies the component that needs to be rendered on the defined path.

Note: