React で簡単なカウンター アプリを作成する方法

React は、最も人気のあるフロントエンド JavaScript ライブラリの 1 つです。多くの企業が React を使用してユーザー インターフェイスを開発しており、開発者の間で広く普及しています。

この基本的なカウンター アプリのように、React を使用して簡単なプログラムを作成するのは簡単です。簡単なチュートリアルから始めると、React の基本的かつ重要な概念のいくつかを理解するのに役立ちます。

カウンターアプリの特徴

このプロジェクトでは、次の機能を備えたカウンター アプリケーションを開発します。

1. カウントアップボタン：カウントを1つ増やします。
2. カウントを減らすボタン: カウントを 1 つ減らします。
3. リセット ボタン: カウントをゼロに設定します。

React の基本概念

先に進む前に、このプロジェクトで使用する React の基本概念のいくつかを理解する必要があります。

1. コンポーネント: コンポーネントは、React アプリケーションのコア ビルディング ブロックです。これらには、独立した再利用可能なコードが含まれています。コンポーネントを使用すると、ユーザー インターフェイスを個別のパーツに分割できます。その後、それらのパーツを再利用して、個別に操作できます。
2. State : React では、オブジェクトを使用して、コンポーネントの状態を表すデータを格納できます。これにより、コンポーネントは独自のデータを管理および更新できます。コンポーネントの状態は、コンポーネントのレンダリング方法と動作を決定します。
3. 機能コンポーネント: React の機能コンポーネントは、小道具を引数として受け取り、React 要素 (JSX) を返す単純な JavaScript 関数です。
4. Props : props (「プロパティ」の略) を使用して、親コンポーネントから子コンポーネントにデータを渡すことができます。props は React の不可欠な部分の 1 つであり、props を使用して React でいくつかの操作を実行できます。
5. フック: React フックは、機能コンポーネント内のライフサイクル メソッドなどの状態やその他の React 機能を管理できる組み込み関数です。また、簡潔で明確なコードを書くのにも役立ちます。useState()フックを使用して状態を管理する方法がすぐにわかります。

ステップ 1: プロジェクトの設定

ターミナルを開き、次のコマンドを実行して開始します。

npx create-react-app react-counter-app

これにより、新しい反応アプリが作成され、プロジェクトの構築を開始する準備が整います。複数のファイルとフォルダーを含むファイル システム構造が生成されます。

ターミナルで次のコマンドを実行して、開発サーバーを起動します。

npm start

このコマンドを実行すると、ブラウザーに新しいタブが開き、http://localhost:3000 がポイントされます。プロジェクトに加えるすべての変更は、ここで自動的に更新されます。

ステップ 2: カウンター アプリケーションのスケルトンを作成する

src/App.jsファイルを開き、そこにある既定のコードをすべて削除します。ここで、次のコードを使用してアプリケーションのスケルトンを作成します。

import React, { useState } from "react";


function App() {
  const [count, setCount] = useState(0);
  let incrementCount = () => {
 // To add later
  };
  let decrementCount = () => {
 // To add later
  };
  let resetCount = () => {
  // To add later
  }

export default App;

最初のステートメントは、 reactモジュールからuseStateフックをインポートします。これを使用してカウント状態を作成し、0 に初期化します。setCount関数を使用してカウントの値を変更できます。

後で、incrementCount、decrementCount、およびresetCount関数を使用して、カウンターの値を増加、減少、およびリセットします。

マークアップの count 変数の周りに中括弧 { } が使用されていることに気付くかもしれません。これにより、JSX パーサーは、中括弧内のコンテンツを JavaScript として扱う必要があることを認識できます。

ステップ 3: カウンター アプリケーションに機能を追加する

カウンタ アプリケーションの機能を実装するには、3 つのボタンを作成する必要があります。デクリメント カウント ボタン、インクリメント カウント ボタン、およびリセット ボタンです。ボタンのdiv内に次のコードを追加します。

<Button title={"Decrement"} action={decrementCount} />
<Button title={"Increment"} action={incrementCount} />
<Button title={"Reset"} action={resetCount} />

これらのボタンをクリックすると、decrementCount、incrementCount、およびresetCount関数が実行されます。親のAppコンポーネントから子のButtonコンポーネントにタイトルとアクションの小道具を渡していることに注意してください。

次のコードを使用して、 App.jsファイル内のこれらの関数を更新します。

let incrementCount = () => {
  setCount(count + 1);
};


let decrementCount = () => {
  setCount(count - 1);
};

let resetCount = () => {
  setCount(0);
}

setCount関数はcountの状態を更新します。

Button コンポーネントをまだ作成していないことに注意してください。srcディレクトリに新しいcomponentsフォルダーを作成し、 Button.jsという名前の新しいファイルを作成します。すべてのコンポーネントを同じフォルダーに保持することをお勧めします。

components/Button.jsファイルに次のコードを追加します。

import React from "react";


function Button(props) {
    let { action, title } = props;
    return <button onClick={action}>{title}</button>;
}

export default Button;

Buttonコンポーネントはprops を介してデータを受け取ります。関数は次に、これらの props を個別の変数に dsetructure し、それらを使用して、返されるマークアップを設定します。

このコードは、このコンポーネントを 3 回再利用して、インクリメント、デクリメント、およびリセット ボタンを作成します。

最後に、次のコードを使用して、 App.jsページの上部にある Button コンポーネントをインポートします。

import Button from "./components/Botton";

これは、最終的なコードがApp.jsファイルでどのように見えるかです:

import React, { useState } from "react";
import Button from "./components/Button";


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

export default App;

React のベスト プラクティスに従う

React コードはさまざまな方法で記述できますが、できるだけきれいに構造化することが重要です。これにより、メンテナンスが容易になり、アプリケーションの全体的なパフォーマンスを向上させることができます。

コードの繰り返しを避ける、各 React コンポーネントのテストを作成する、props にオブジェクトの分解を使用する、命名規則に従うなど、React コミュニティが推奨するいくつかの React プラクティスに従うことができます。