React.js を学習するための包括的なガイド

Facebook によって開発および保守されている React.js は、ユーザー インターフェイス、特にシングルページ アプリケーション (SPA) を構築するための最も人気のある JavaScript ライブラリの 1 つになりました。柔軟性、効率性、使いやすさで知られる React には、あらゆるレベルの開発者向けの大規模なコミュニティと豊富なリソースがあります。初心者でも、スキルセットに React を追加したいと考えている経験豊富な開発者でも、このチュートリアルでは React.js の基礎を説明します。

1. React.js とは何ですか?

React.js は、ユーザー インターフェイス、特に高速でインタラクティブなユーザー エクスペリエンスが必要な単一ページ アプリケーションの構築に使用されるオープンソースの JavaScript ライブラリです。 React を使用すると、開発者は、データの変更に応じて効率的に更新およびレンダリングできる大規模な Web アプリケーションを作成できます。これはコンポーネントベースです。つまり、UI はコンポーネントと呼ばれる小さな再利用可能な部分に分割されます。

2. React 環境のセットアップ

コーディングを始める前に、開発環境をセットアップする必要があります。次の手順に従ってください:

ステップ 1: Node.js と npm をインストールする

• Node.js: React のビルド ツールには Node.js が必要です。
• npm: ノード パッケージ マネージャー (npm) は、ライブラリとパッケージのインストールに使用されます。

Node.js は公式 Web サイトからダウンロードしてインストールできます。 npm は Node.js にバンドルされています。

ステップ 2: Create React アプリをインストールする

Facebook は、新しい React プロジェクトを迅速かつ効率的にセットアップできるようにする Create React App というツールを作成しました。ターミナルで次のコマンドを実行します:

npx create-react-app my-app

このコマンドは、React プロジェクトを開始するために必要なすべてのファイルと依存関係を含む my-app という名前の新しいディレクトリを作成します。

ステップ 3: 開発サーバーを起動する

プロジェクト ディレクトリに移動し、開発サーバーを起動します。

cd my-app
npm start

新しい React アプリは http://localhost:3000 で実行されているはずです。

3. React コンポーネントを理解する

React はコンポーネントがすべてです。 React のコンポーネントは、何らかの出力 (通常は HTML) をレンダリングする自己完結型モジュールです。コンポーネントは、機能コンポーネント または クラス コンポーネント として定義できます。

機能コンポーネント

機能コンポーネントは、(JSX を使用して) HTML を返す単純な JavaScript 関数です。

例:

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

クラスコンポーネント

クラス コンポーネントはコンポーネントを定義するためのより強力な方法であり、ローカルの状態とライフサイクル メソッドを管理できるようになります。

例:

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

4. JSX – JavaScript XML

JSX は、HTML に似た JavaScript の構文拡張機能です。これにより、JavaScript 内で HTML を直接記述することができ、React が実際の DOM 要素に変換します。

例:

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

JSX を使用すると、UI の構造を簡単に記述して視覚化できます。ただし、内部では、JSX は React.createElement() 呼び出しに変換されます。

5.状態と小道具

小道具

Props (「プロパティ」の略) は、あるコンポーネントから別のコンポーネントにデータを渡すために使用されます。これらは不変です。つまり、受信コンポーネントによって変更することはできません。

例:

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

状態

状態はプロップに似ていますが、コンポーネント内で管理され、時間の経過とともに変化する可能性があります。状態は、ユーザー入力など、コンポーネントが追跡する必要があるデータによく使用されます。

例:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

6.イベントの処理

React でのイベントの処理は、DOM 要素でのイベントの処理に似ています。ただし、構文上の違いがいくつかあります。

• React イベントの名前には、小文字ではなくキャメルケースが使用されます。
• JSX では、文字列ではなく関数をイベント ハンドラーとして渡します。

例:

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

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

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

React のクラス コンポーネントには、コンポーネントの存続期間中の特定の時点でコードを実行できる特別なライフサイクル メソッドがあります。これらには以下が含まれます:

• componentDidMount: コンポーネントがマウントされた後に呼び出されます。
• componentDidUpdate: コンポーネントの更新後に呼び出されます。
• componentWillUnmount: コンポーネントがアンマウントされる前に呼び出されます。

例:

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      <div>
        <h1>{this.state.date.toLocaleTimeString()}</h1>
      </div>
    );
  }
}

8. Conditional Rendering

In React, you can create different views depending on the state of your component.

Example:

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

9. Lists and Keys

When you need to display a list of data, React can render each item as a component. It’s important to give each item a unique "key" prop to help React identify which items have changed.

Example:

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

10. React Hooks

React Hooks allow you to use state and other React features in functional components. Some of the most commonly used hooks include:

• useState: Allows you to add state to a functional component.
• useEffect: Lets you perform side effects in your function components.
• useContext: Provides a way to pass data through the component tree without having to pass props down manually at every level.

Example of useState:

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

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

11. Building and Deploying React Applications

Once your application is ready, you can build it for production. Use the following command:

npm run build

This will create an optimized production build of your React app in the build folder. You can then deploy it to any web server.

Conclusion

React.js is a powerful tool for building modern web applications. By understanding components, state management, event handling, and hooks, you can create dynamic and interactive user interfaces. This tutorial covers the basics, but React's ecosystem offers much more, including advanced state management with Redux, routing with React Router, and server-side rendering with Next.js.

As you continue your journey with React, remember to leverage the wealth of online resources, including the official React documentation, community forums, and tutorials. Happy coding!

以上がReact.js を学習するための包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。