React ⚛️ とは何か、コンポーネントの概念

React ⚛️ は、ユーザー インターフェイスを構築するための強力な JavaScript ライブラリです。 2013 年に Facebook によって開発され、コンポーネントベースのアーキテクチャと宣言型アプローチにより UI 開発に革命をもたらしました。単純な Web アプリを作成する場合でも、複雑なシステムを作成する場合でも、React を使用すると、再利用可能で動的な UI を効率的かつ楽しく構築できます。

この記事では、React の基礎とその中心概念である コンポーネント について詳しく説明し、これらのアイデアを説明するためのコード例を豊富に示します。

React とは何ですか?

React の核心は、動的でインタラクティブなユーザー インターフェイスを構築するために設計された JavaScript ライブラリ です。これは、Model-View-Controller (MVC) アーキテクチャに従って、アプリケーションのビュー層に焦点を当てています。 React を使用すると、アプリケーションのデータの変更に応じて効率的に更新されるインターフェースを簡単に作成できます。

React を選ぶ理由

1. 再利用可能なコンポーネント: モジュール式 UI を独立した再利用可能なコンポーネントに分割して開発します。
2. 仮想 DOM: 実際の DOM を更新する前に軽量の仮想 DOM での変更を計算することで、更新を高速化します。
3. 宣言型: UI に表示したい内容を記述します。残りは React が処理します。
4. リッチ エコシステム: Redux、React Router、Next.js などのライブラリを活用して React の機能を拡張します。

React におけるコンポーネントの概念

React アプリケーションは、React アプリの構成要素である コンポーネント を使用して構築されます。コンポーネントは、ロジック、構造、スタイルをカプセル化する UI の独立した部分です。

機能コンポーネント

関数コンポーネントは、入力として props を受け入れ、React 要素を返す単純な JavaScript 関数です。これらは、最新の React アプリケーションで最も一般的なタイプのコンポーネントです。

例: 基本的な機能コンポーネント

function Welcome(props) {
  return <h1 id="Hello-props-name">Hello, {props.name}!</h1>;
}

// Usage
<welcome name="Alice"></welcome>;

クラスコンポーネント

クラスコンポーネントは、React.Component クラスを拡張した ES6 クラスです。これらはフックが導入される前に一般的に使用されていました。

例: 基本クラスコンポーネント

function Welcome(props) {
  return <h1 id="Hello-props-name">Hello, {props.name}!</h1>;
}

// Usage
<welcome name="Alice"></welcome>;

コンポーネントの構造

例: 状態のある機能コンポーネント

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>;
  }
}

// Usage
<welcome name="Alice"></welcome>;

壊す：

1. 状態管理: useState フックは、コンポーネント内の状態 (カウント) を管理するために使用されます。
2. 小道具: データは小道具を通じてコン​​ポーネントに渡すことができます。
3. イベント: onClick イベント ハンドラーは、ボタンがクリックされたときに状態を更新します。

プロップと状態

Feature	Props	State
Definition	Data passed to a component from its parent.	Data managed within the component.
Mutability	Immutable (cannot be changed by the receiving component).	Mutable (can be updated within the component).
Usage	Used for passing data to child components.	Used for dynamic data that changes over time.

機能 小道具 状態 定義 親からコンポーネントに渡されるデータ。 コンポーネント内で管理されるデータ。 可変性 不変 (受信コンポーネントによって変更できません)。 可変 (コンポーネント内で更新可能)。 使用法 子コンポーネントにデータを渡すために使用されます。 時間の経過とともに変化する動的データに使用されます。 テーブル>

コンポーネントの状態

State は、コンポーネントがレンダリングする必要があるデータを保存するために使用される React の特別なオブジェクトです。機能コンポーネントは状態管理に useState フックを使用します。

例: 状態付きカウンター

function Welcome(props) {
  return <h1 id="Hello-props-name">Hello, {props.name}!</h1>;
}

// Usage
<welcome name="Alice"></welcome>;

コンポーネント内のプロパティ

Props は親コンポーネントから子コンポーネントに渡される引数で、データがコンポーネント階層を下流に流れることを可能にします。

例: 小道具を渡す

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>;
  }
}

// Usage
<welcome name="Alice"></welcome>;

コンポーネントの構成

React は、コンポーネントをネストして、より小さく再利用可能な構成要素から複雑な UI を構築することを奨励します。

例: ネストされたコンポーネント

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onclick="{()"> setCount(count + 1)}>Increment</button>
    </div>
  );
}

クラスコンポーネントのライフサイクルメソッド

クラス コンポーネントには、マウント、更新、アンマウントのフェーズ中にアクションを実行するためのライフサイクル メソッドが含まれています。機能コンポーネントの場合、useEffect のような React フックがこれらのライフサイクル メソッドを置き換えます。

例: ライフサイクルメソッド

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onclick="{()"> setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage
;

例: useEffect を使用したライフサイクル

function Greeting({ name }) {
  return <h1 id="Welcome-name">Welcome, {name}!</h1>;
}

function App() {
  return <greeting name="John"></greeting>;
}

// Renders: Welcome, John!

React でのイベント処理

React を使用すると、イベントの処理が簡単になります。イベント ハンドラーは要素に props として渡され、イベントの発生時に実行されます。

例: クリックイベント

function Header() {
  return <header><h1 id="My-Website">My Website</h1></header>;
}

function Main() {
  return <main><p>This is the main content.</p></main>;
}

function Footer() {
  return <footer><p>© 2024 My Website</p></footer>;
}

function App() {
  return (
    <div>
      <header></header>
      <main></main>
      <footer></footer>
    </div>
  );
}

// Usage
<app></app>;

例: 入力処理

import React, { Component } from 'react';

class Timer extends Component {
  componentDidMount() {
    console.log('Timer mounted');
  }

  componentWillUnmount() {
    console.log('Timer unmounted');
  }

  render() {
    return <p>Timer running...</p>;
  }
}

// Usage
<timer></timer>;

条件付きレンダリング

React を使用すると、アプリケーション ロジックに基づいて条件付きでコンポーネントまたは要素をレンダリングできます。

例: 条件付きレンダリング

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    console.log('Timer mounted');
    return () => console.log('Timer unmounted');
  }, []);

  return <p>Timer running...</p>;
}

// Usage
<timer></timer>;

リストとキー

React でリストをレンダリングするときは、React が変更を識別できるように各要素に一意のキーを割り当てることが重要です。

例: リストのレンダリング

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onclick="{handleClick}">Click Me</button>;
}

// Usage
<button></button>;

再利用可能なコンポーネント

React では、冗長性を減らすためにアプリケーション全体で再利用できるコンポーネントの作成を推奨しています。

例: 再利用可能なボタンコンポーネント

import React, { useState } from 'react';

function InputExample() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input type="text" value="{text}" onchange="{handleChange}">
      <p>You typed: {text}</p>
    </div>
  );
}

// Usage
<inputexample></inputexample>;

結論

React は、最新の Web アプリケーションを構築するための強力なツールです。コンポーネントベースのアーキテクチャと、props、state、hook などの機能を組み合わせることで、動的で効率的で再利用可能な UI を作成できます。 React の核となる概念をマスターし、そのツールを効果的に使用することで、開発者はクリーンで保守可能なコードベースを維持しながら、優れたユーザー エクスペリエンスを提供できます。始める準備はできていますか?初めての React アプリを構築して、コンポーネントの魔法が実際に動作する様子を見てみましょう。 ?

以上がReact ⚛️ とは何か、コンポーネントの概念の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。