React入門: 初心者ガイド - AIko Code Symphony

はじめに
Reactとは何か？
環境設定
最初のReactコンポーネント
JSXの基本
コンポーネントの状態とライフサイクル
イベント処理
条件付きレンダリング
リストとキー
フォームの扱い
コンポーネントの組み合わせ
React Hooksの使用
まとめ

はじめに

このブログは、Reactをこれから学び始める方向けのガイドです。基本的な概念から始めて、実際のコード例を通じて、Reactの使い方を段階的に説明していきます。

Reactとは何か？

Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。コンポーネントベースのアーキテクチャを採用しており、再利用可能なUIパーツを作成することができます。

環境設定

Reactを始める前に、Node.jsとnpmがインストールされていることを確認してください。次に、Create React Appを使用して新しいプロジェクトを作成します。

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

最初のReactコンポーネント

以下は、シンプルなReactコンポーネントの例です。

import React from 'react';

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

export default Welcome;

JSXの基本

JSXは、JavaScriptを拡張したマークアップ言語です。HTMLに似ていますが、JavaScriptの力を借りてUIを表現します。

const element = <h1>Welcome to React!</h1>;

コンポーネントの状態とライフサイクル

状態（state）は、コンポーネントの動的なデータを管理します。ライフサイクルメソッドを使用して、コンポーネントの作成、更新、破棄を制御できます。

イベント処理

Reactでのイベント処理は、DOM要素のイベントと非常に似ていますが、キャメルケースを使用し、文字列ではなく関数をイベントハンドラとして渡します。

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

条件付きレンダリング

Reactでは、条件に応じて異なるコンポーネントをレンダリングすることができます。

function Welcome(props) {
  return (
    <div>
      {props.isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please sign up.</h1>
      )}
    </div>
  );
}

リストとキー

リストをレンダリングする際には、各リストアイテムに一意のkeyプロパティを与える必要があります。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

フォームの扱い

フォーム要素は、通常、内部状態を持ちます。Reactでは、stateを使用してフォームの状態を管理することが推奨されます。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

コンポーネントの組み合わせ

コンポーネントは、より大きなUIを構築するために組み合わせることができます。小さなコンポーネントから大きなコンポーネントへとデータを渡すことが重要です。

React Hooksの使用

Hooksは、関数コンポーネント内で状態やライフサイクル機能を使うためのReactの新機能です。

import React, { useState } from 'react';

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

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

まとめ

Reactは、モダンなウェブ開発において非常に重要なツールです。このガイドが、Reactの基本を理解し、自信を持ってReactの旅を始めるための一助となれば幸いです。

目次