React入門：インタラクティブなWebアプリを作成するための基本

Reactは、特にシングルページアプリケーションにおいて、ユーザーインターフェース構築に使われるJavaScriptライブラリです。ページ全体をリロードせずに、ページの一部を更新するニーズに応えます。この記事では、Reactの基本を学び、インタラクティブで再利用可能なコンポーネントの作成方法を習得します。

freeCodeCamp logo

対象読者

JavaScriptの基本的な知識（変数、関数、ループ、オブジェクトなど）があれば、Reactの知識は不要です。この記事では、Reactと必要なツールについて解説します。

学習方法

この記事は、書籍「An Introduction to Web Development from Back to Front」から抜粋したものです。各レッスンはコードの再生形式で提供され、コードの変更と解説がインタラクティブに表示されます。コードの変更理由に焦点を当て、理解を深めることができます。

コード再生の利用方法

左側のパネルにあるコメントをクリックすると、エディタ内のコードが更新され、変更がハイライトされます。説明を読み、コードを理解し、不明な点はAIチューターを活用しましょう。

1. React入門：最初のコンポーネント

このレッスンでは、小さくて再利用可能なReactコンポーネントを使ってUIを構築する方法を学びます。DOMを直接操作する代わりに、UIの見た目を定義し、ReactがDOMとデータを同期します。

ReactDOM.renderとReact.createElement

ReactDOM.renderとReact.createElementの使い方を学び、同じコンポーネントをJSXを使って記述する方法を理解します。

カスタムヘッダーコンポーネント

プロパティ（props）を受け取るCustomHeaderコンポーネントの作成を通して、コンポーネントにデータを渡す方法、分割代入による簡略化を学びます。シンプルなコンポーネントを記述し、大規模なReactアプリケーションで再利用する方法を習得できます。

[Basic React](Basic React) で再生を視聴できます。

2. Viteを使ったReactアプリの構築

Viteを使って最新のReactプロジェクトを作成する方法を解説します。Viteは、プロジェクトフォルダの作成、ライブラリのインストール、開発サーバーの実行、プロダクション向けのビルド準備など、必要な設定を自動化します。手動での設定を省略し、すぐにアプリの構築を開始できます。

CS Legendsアプリの拡張

最初のレッスンで作成したCS Legendsアプリを拡張し、コンポーネントを別のファイルに分割し、JSXを使用します。

useStateによる動的なデータ管理

動的なデータを管理するためのuseStateを導入し、コンポーネント間でデータとイベントハンドラを渡す方法を学びます。明確な構造と再利用可能なコードを持つ、動作するフロントエンドアプリを構築します。

[Using Vite to Create a React App](Using Vite to Create a React App) で再生を視聴できます。

ViteとReact

3. ReactとExpressによるリアルなバックエンドへの接続

Vite + Reactアプリに、データベースをバックエンドとするExpressを追加します。伝説のデータをReactのローカルステートに保存する代わりに、Express APIを使ってデータのフェッチと更新を行います。

Expressサーバーとデータベースの接続

バックエンドサーバー用のフォルダを作成し、データベースに接続し、データの取得と追加のためのルートを記述します。

useEffectフックによるデータ読み込み

useEffectフックを使って、アプリ起動時にExpressサーバーからデータをロードします。

CORSの設定

開発中にフロントエンドとバックエンドが通信できるように、corsパッケージを設定します。すべてが完了したら、Reactアプリを静的バンドルにビルドし、Expressサーバーで提供します。デプロイ可能なフルスタックWebアプリケーションが完成します。

[Using React and Express Together](Using React and Express Together) で再生を視聴できます。

まとめ

これらのレッスンでは、Reactの基本を解説しました。さらに学習を進めたい場合は、書籍全体を調べて、最新のツールとフレームワークを使って、フルWebアプリがどのように構築されるかを確認してください。ReactはWeb開発のパズルの一部にすぎません。構築、学習を進め、さらに深く学ぶ準備ができたら、他の再生を試してみてください。

フィードバックがある場合は、[email protected] までご連絡ください。