React「実践入門」Part１

はじめに

実践入門とか書いてますが、だいぶ入門です。
とりあえずReactを使えるレベルにはなると思います。
とりあえず始めていきましょう！

Reactとは

Reactでは、ユーザインターフェース（UI）をコンポーネントと呼ばれる部品を組み合わせることで構築できます。　

また、各コンポーネントは、JavaScriptの関数なので、普段のJavaScriptのノリで記述することが出来ます。

ただ、あくまでReactはライブラリなので、ルーティングなどは指定されていません。フルスタックなどの開発をする場合は、Next.jsなどのフレームワークを使いましょう！

Reactの重要な３つの概念

Reactには、Components , Props , Stateという３つの重要な概念があります。

Components（コンポーネント）

コンポーネントはユーザインターフェースを構築する最小単位といえます。

このコンポーネントを組み合わせてユーザインターフェースを構築します。

以降実際のプログラムを交えながら説明します。

を使用すると、環境を構築することなくReactを実行できます。

コンポーネントを実際に作ってみましょう。CodeSandboxで以下を実行してみてください。

App.js

export default function App() {
  return (
    <div className="App">
      こんにちは
    </div>
  );
}

React におけるコンポーネントとは、マークアップを返す JavaScript 関数です。

また、各コンポーネントは、ネスト（コンポーネントの中にコンポーネントを入れる）が可能です。

App.js

export default function App() {
  function Button() {
    return <button>ボタン</button>;
  }
  return (
    <div className="App">
      <Button />
      <Button />
      <Button />
    </div>
  );
}

ボタンが３つ表示されたはずです。

コンポーネントの中にコンポーネントがあることが分かります。

これこそがReactの強みなのです。

コンポーネントを利用することでコードの視認性が向上し、大規模な開発などでは非常に役に立ちます。（Reactの関数は大文字で始める必要があります）

Props（プロップス）

上の例では、を再利用すると、すべて同じコンテンツが表示されていました。

しかし、React コンポーネントにプロパティとして情報を渡すこともできます。
これをPropsと呼びます。

また例を見てみましょう。

App.js

export default function App() {
  function Button({ name }) {
    return <button>{name}</button>;
  }
  return (
    <div className="App">
      <Button name="ボタン１" />
      <Button name="ボタン２" />
      <Button name="ボタン３" />
    </div>
  );
}

このようにコンポーネントにデータを渡せることが分かりました。

State（ステート）

ステートを利用することで、インタラクティブなユーザインタフェースを構築できます。
例を見てみましょう

App.js

import { useState } from "react";

export default function App() {
  const [likes, setLikes] = useState(0);

  function handleClick() {
    setLikes(likes + 1);
  }

  return (
    <div className="App">
      <button onClick={handleClick}>(・∀・)ｲｲﾈ!! ({likes})</button>
    </div>
  );
}

ボタンを押すたびにいいねの数が増えていくことが分かるでしょう。

ステートとは、ユーザの動作によって時間の経過とともに変化する情報といえます。

use で始まる関数は、フック (Hook) と呼ばれます。useState は React が提供する組み込みのフックです。他にも多くのフックがあり、独自に組み合わせることもできます。

今回の例では、onClickでユーザの動作を取得し、その動作によっていいねの数（ステート）が変わったということです。

最後に

今回は、Reactの基礎の基礎についてまとめてみました。Reactは公式のドキュメントが非常に理解しやすいので、ぜひ一度読んでみることをお勧めします。

この投稿よりも分かりやすいです。

今度はNext.jsについても投稿しようと思っています。

自分の専門はLLMなので、Django REST framework と Next.jsを用いたAIアプリの開発についても投稿するつもりです。