反応の基本

ここでは、主要な React 用語を例とともに説明します。

1.コンポーネント

コンポーネントは React アプリケーションの構成要素です。これは、UI (ユーザー インターフェイス) の一部を返す JavaScript 関数またはクラスです。

機能コンポーネント (最新の React で一般的):

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

クラスコンポーネント (古いスタイル):

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

2. JSX (JavaScript XML)

JSX を使用すると、JavaScript 内に HTML のような構文を記述することができます。これは React.createElement() の糖衣構文です。

例:

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

JSX is compiled to:

const element = React.createElement('h1', null, 'Hello, world!');

3. Props (プロパティ)

プロップは、あるコンポーネントから別のコンポーネントにデータを渡す方法です。これらは読み取り専用であり、コンポーネントを動的にすることができます。

例:

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

<Greeting name="Alice" />

4.状態

State は、動的データを保持し、コンポーネントのレンダリング出力に影響を与える JavaScript オブジェクトです。 setState (クラスコンポーネント) または useState フック (機能コンポーネント) を使用して更新できます。

機能コンポーネントの useState の例:

import { useState } from 'react';

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

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

5.フック

フックは、機能コンポーネントで状態やその他の React 機能を使用できるようにする関数です。

useState: 機能コンポーネントの状態を管理します。
useEffect: 機能コンポーネントで副作用を実行します。

使用効果の例:

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h1>{seconds} seconds have passed.</h1>;
}

6.仮想 DOM

仮想 DOM は、実際の DOM の軽量コピーです。 React はこれを使用して変更を追跡し、ページ全体ではなく変更された DOM の部分のみを再レンダリングすることで UI を効率的に更新します。

7.イベント処理

React はイベント ハンドラーに小文字ではなくキャメルケースを使用し、文字列の代わりに関数をイベント ハンドラーとして渡します。

Example:

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

  return <button onClick={handleClick}>Click me</button>;
}

8.レンダリング

レンダリングは、React が DOM 要素をブラウザーに出力するプロセスです。コンポーネントは、props、state、その他のデータに基づいて UI をレンダリングします。

例:

import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

9.条件付きレンダリング

条件に基づいてさまざまなコンポーネントや要素をレンダリングできます。

例:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

10.リストとキー

React では、map() メソッドを使用してデータのリストをレンダリングできます。各リスト項目には一意のキーが必要です。

例:

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

<ItemList items={items} />;

11.ステータスアップ

場合によっては、複数のコンポーネントが同じ状態を共有する必要があります。状態を最も近い共通の祖先まで「引き上げる」ことで、それを小道具として受け継がせることができます。

例:

function TemperatureInput({ temperature, onTemperatureChange }) {
  return (
    <input
      type="text"
      value={temperature}
      onChange={e => onTemperatureChange(e.target.value)}
    />
  );
}

function Calculator() {
  const [temperature, setTemperature] = useState('');

  return (
    <div>
      <TemperatureInput
        temperature={temperature}
        onTemperatureChange={setTemperature}
      />
      <p>The temperature is {temperature}°C.</p>
    </div>
  );
}

これらは、React 開発の基礎を形成する基本概念です。

React の基本パート 2

プラナフ・バカレ・9月18日

#javascript #反応する

以上が反応の基本の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。