Reactのクイックチュートリアル:基礎から始める

ステップ1: Reactのセットアップ 最初に、Reactを使用するために必要な環境をセットアップする必要があります。Node.jsとnpmがインストールされていることを確認し、新しいReactプロジェクトを作成します。

ステップ2: Reactコンポーネントの作成 Reactでは、UIを再利用可能で独立したコンポーネントとして構築します。コンポーネントはJavaScriptのクラスまたは関数として作成できます。例えば、以下のようなHelloWorldコンポーネントを作成します。

import React from 'react';
class HelloWorld extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

ステップ3: コンポーネントのレンダリング 作成したコンポーネントをDOMにレンダリングする方法を学びましょう。Reactでは、ReactDOM.render()メソッドを使用してコンポーネントを指定した要素にマウントします。以下に例を示します。

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<HelloWorld />, document.getElementById('root'));

ステップ4: コンポーネントのプロパティ Reactコンポーネントは、プロパティ（props）を介してデータを受け取ることができます。これを使用して、コンポーネントに動的なデータを渡すことができます。以下に例を示します。

import React from 'react';
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

ステップ5: イベント処理 Reactでは、イベント処理も簡単に行うことができます。例えば、ボタンがクリックされたときにメッセージを表示するコンポーネントを作成します。

import React from 'react';
class Button extends React.Component {
  handleClick() {
    alert('Button clicked!');
  }
  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}
ReactDOM.render(<Button />, document.getElementById('root'));

以上がReactのクイックチュートリアルの基本的なステップです。これらの例を試してみて、Reactの基礎を理解しましょう。さらに、Reactの公式ドキュメントやオンラインのリソースを参考にしながら、より高度な機能やパターンを学ぶこともおすすめです。