【入門】Reactってなに？

インデックス

1. Reactってなに？
2. なぜReactを使うの？
3. Reactを始める準備
4. 基本のReactコンポーネント
5. Reactでの状態管理
6. イベントの処理
7. まとめ

---

1. Reactってなに？

Reactは、ウェブサイトやアプリを作るためのツールです。Reactを使うと、コンポーネントという小さな部品を組み合わせて画面を作れます。これにより、いろんな人が作ったコンポーネントを簡単に使えるようになります。ReactのコンポーネントはJavaScriptという言語で書かれていて、JSXという特別な書き方を使って作ります。

▲インデックスに戻る

2. なぜReactを使うの？

Reactを使う理由はいくつかあります：

• 再利用できる：一度作った部品を何度も使えるので、時間が節約できます。
• 速い：画面全体ではなく、変わった部分だけを更新するので、速く動きます。
• 人気がある：たくさんの人が使っているので、困ったときに情報を見つけやすいです。
• いろんな場所で使える：ウェブサイトやスマホのアプリを作れます。

▲インデックスに戻る

3. Reactを始める準備

Reactを始めるためには、以下のことを準備します：

1. Node.jsとnpmのインストール
   公式サイトからインストールします。

Node.js公式サイト

1. Reactプロジェクトの作成
   以下のコマンドを使って新しいReactプロジェクトを作ります。

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

1. エディタのセットアップ
   Visual Studio Codeなどのコードを書くソフトをインストールし、Reactの開発に便利なプラグインを追加します。

▲インデックスに戻る

4. 基本のReactコンポーネント

Reactでは、コンポーネントという小さな部品を組み合わせてウェブサイトを作ります。
以下は最も基本的なコンポーネントの例です。

import React from 'react';

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

export default Hello;

このコードは、「Hello, World!」と表示するシンプルなコンポーネントです。

▲インデックスに戻る

5. Reactでの状態管理

Reactでは、コンポーネントが持つデータ（状態）を管理できます。
以下は、状態を持つコンポーネントの例です。

import React, { 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>
  );
}

export default Counter;

このコンポーネントでは、ボタンをクリックするたびにカウントが増えます。

▲インデックスに戻る

6. イベントの処理

Reactでは、ユーザーが何か操作をしたときのイベントを簡単に処理できます。例えば、ボタンがクリックされたときの処理を以下のように書けます。

import React from 'react';

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

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

export default ClickButton;

このコードでは、ボタンがクリックされたときにアラートが表示されます。

▲インデックスに戻る

7. まとめ

Reactは、ウェブサイトやアプリを作るための便利なツールです。コンポーネントを使って再利用できる部品を作ったり、効率的に画面を更新したりできます。多くの人が使っているので、たくさんの情報とサポートがあります。

▲インデックスに戻る