はじめてのReact：楽しく学ぶハンズオンチュートリアル

みなさん、こんにちは！
この記事は初心者向けに作られており、Reactの基本を楽しく学べるようになっています

ではさっそくReactについて学んでいきましょう！

Reactとは？ 🤔

ReactはFacebookが開発し、オープンソースで公開されているJavaScriptライブラリです。

Reactはユーザーインターフェースを構築するために使用され、Webアプリケーションのフロントエンド開発で広く使われています。

Reactの主な特徴はコンポーネントベースのアーキテクチャと、仮想DOM（Virtual DOM）を使った効率的なDOM操作です。
これにより、開発者は、パフォーマンスの高いWebアプリケーションを迅速に構築できます。

それでは、Reactの魅力を体験していきましょう！

環境準備 ✨

まずは、React開発環境をセットアップしましょう。手順は以下の通りです。

Node.jsをインストール
create-react-app を使ってプロジェクトを作成
プロジェクトを実行

Node.jsのインストール

Node.jsは、JavaScriptを実行できる環境です。
Reactは、Node.jsを使って開発されるので、まずはNode.jsをインストールしましょう。 Node.js公式サイトからダウンロードしてインストールしてください。

create-react-appでプロジェクト作成

次に、create-react-appを使って新しいReactプロジェクトを作成しましょう。
以下のコマンドを実行してください。

npx create-react-app my-react-app

このコマンドは、my-react-appという名前のReactプロジェクトを作成します。

プロジェクトを実行

プロジェクトが作成されたら、以下のコマンドでプロジェクトを実行してみましょう。

cd my-react-app
npm start

これで、 http://localhost:3000 にアクセスしてReactアプリが正常に動作しているか確認できます。

正しくセットアップできていれば上のように表示されます！

コンポーネントの作成 🧩

Reactの基本は、コンポーネントです。

コンポーネントは、UIの一部を表現する再利用可能なJavaScriptのクラスまたは関数です。
コンポーネントを作成して、アプリケーションを構築していきましょう。

Appコンポーネントを編集

まずはsrc/App.jsファイルを開いて、以下のように書き換えてください。

import React from "react";

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

export default App;

これで、Hello, React!と表示されるコンポーネントが作成されました。

http://localhost:3000 に移動し、以下のように表示されていれば成功です。

状態管理とイベント処理 🔄

Reactでは、コンポーネントの状態管理やイベント処理が重要です。

状態とはコンポーネント内で管理されるデータのことで、イベント処理はユーザーアクション（クリックやキー入力など）に対する処理です。

状態を持つコンポーネントの作成

useStateフックを使って状態を持つコンポーネントを作成しましょう。
src/Counter.jsという新しいファイルを作成し、以下のコードを記述します。

import React, { useState } from "react";

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;

ここでは、countという状態を作成しボタンをクリックするたびにカウントが増加するようにしました。

初心者向け！TypeScriptとReactのuseState活用ガイド

TypeScriptとReact HooksのuseStateの活用方法を初心者でも理解できるよう解説！状態管理の基本を掴もう

gizanbeak.com

CounterコンポーネントをAppに追加

次に、src/App.jsを開いて先ほど作成したCounterコンポーネントを追加しましょう。

import React from "react";
import Counter from "./Counter";

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

export default App;

これで、アプリケーションにカウンター機能が追加されました！

アプリを実行して+1ボタンをクリックすることで、カウンターが動作することを確認してください。

親子コンポーネント間のデータの受け渡し 🤲

Reactでは、親子コンポーネント間でデータを受け渡すことができます。
これをprops（プロパティ）と呼びます。

親コンポーネントから子コンポーネントへのデータ受け渡し例として、AppコンポーネントからCounterコンポーネントにデータを渡してみましょう。

src/App.jsを開いて、以下のように書き換えます。

import React from "react";
import Counter from "./Counter";

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Counter initialCount={5} />
    </div>
  );
}

export default App;

ここでは、initialCount という名前のpropsをCounterコンポーネントに渡しています。

次に、src/Counter.jsを開いて、Counterコンポーネントで initialCount を受け取りましょう。

import React, { useState } from "react";

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;