React は現代の Web 開発の基礎となっており、その効率性、柔軟性、堅牢なエコシステムが高く評価されています。 Facebook によって開発された React は、開発者が再利用可能な UI コンポーネントを作成できるようにすることで、インタラクティブなユーザー インターフェイスを構築するプロセスを簡素化します。

複雑なシングルページ アプリケーションを構築したい場合でも、単に Web 開発スキルを強化したい場合でも、React をマスターすることは貴重な資産です。

このガイドでは、開発環境のセットアップ、React の基礎の理解、最初のコンポーネントの作成など、React を始めるための重要な概念と手順を説明します。

リアクトとは何ですか?

React は、ユーザー インターフェイス、特に動的でインタラクティブなユーザー エクスペリエンスが必要な単一ページ アプリケーションの構築に使用される JavaScript ライブラリです。 React の核心として、開発者は自身の状態を管理し、それらを構成して複雑な UI を作成するカプセル化されたコンポーネントを構築できます。 React の宣言的な性質により、アプリケーションについての推論が容易になり、そのコンポーネントベースのアーキテクチャにより再利用性と保守性が促進されます。

React の簡単な歴史と進化

React は 2013 年に Facebook によって初めてリリースされ、UI を構築するための革新的なアプローチによりすぐに注目を集めました。 DOM を直接操作する従来のライブラリやフレームワークとは異なり、React は仮想 DOM の概念を導入しました。この抽象化により、React は変更された UI の部分のみを更新することでレンダリングを最適化し、パフォーマンスの効率化につながります。

React はその誕生以来、フック、コンテキスト API、同時レンダリングなどの機能を導入して大幅に進化してきました。このライブラリには、その機能をさらに強化する多数のツール、ライブラリ、およびフレームワークが構築された活発なエコシステムがあります。

React の主な機能

1. コンポーネントベースのアーキテクチャ: React のコンポーネントベースのアプローチにより、開発者は複雑な UI を、それぞれ独自のロジックとレンダリングを持つ、より小さく再利用可能な部分に分割できます。

2. 仮想 DOM: 仮想 DOM は、実際の DOM のメモリ内表現です。 React はこの仮想 DOM を使用して、以前の状態と比較し、必要な変更のみを適用することで UI を効率的に更新します。

3. 宣言構文: React の宣言構文を使用すると、UI の変更方法を指定するのではなく、特定の状態で UI がどのように見えるかを記述することで、UI の設計が容易になります。

4. 一方向データ フロー: React は一方向データ フローを強制します。これは、データが親コンポーネントから子コンポーネントに流れることを意味し、状態の変更の追跡と管理が容易になります。

開発環境のセットアップ

React に入る前に、HTML、CSS、JavaScript の基本を理解しておく必要があります。 React はこれらの基本的な Web テクノロジーに基づいて構築されているため、これらのテクノロジーに精通していると、React の概念をより効果的に理解するのに役立ちます。

Node.js と npm のインストール

React 開発には、プロジェクトの依存関係を管理し、開発ツールを実行するために使用される Node.js と npm (ノード パッケージ マネージャー) が必要です。

Node.js と npm をインストールする方法:

1. Node.js をダウンロードしてインストールする: Node.js 公式 Web サイトにアクセスし、オペレーティング システム用の最新の LTS (長期サポート) バージョンをダウンロードします。このインストール パッケージには npm.

が含まれています

2. インストールの確認: インストール後、ターミナル (またはコマンド プロンプト) を開き、次のコマンドを実行して、Node.js と npm が正しくインストールされていることを確認します。
   

   node -v
   npm -v

Node.js と npm の両方のバージョン番号が表示され、インストールが成功したことが確認されます。

React アプリケーションの作成

React を使い始める最も簡単な方法は、create-react-app ツールを使用することです。このツールは、適切なデフォルト構成で新しい React プロジェクトをセットアップします。

新しい React プロジェクトを初期化するためのステップバイステップ ガイド:

1. create-react-app をグローバルにインストール: ターミナルを開いて次を実行します。

   npx create-react-app my-app

my-app を目的のプロジェクト名に置き換えます。このコマンドは、指定された名前で新しいディレクトリを作成し、その中に React プロジェクトをセットアップします。

1. プロジェクト ディレクトリに移動します:

   cd my-app

1. 開発サーバーを起動します:

   npm start

このコマンドは開発サーバーを実行し、デフォルトの Web ブラウザで新しい React アプリケーションを開きます。デフォルトの React ようこそページが表示され、すべてが正しく設定されていることを示します。

React の基本を理解する

コンポーネントは、React アプリケーションの構成要素です。 UI 要素とロジックをカプセル化することで、コードの管理と再利用が容易になります。コンポーネントは次の 2 つのタイプに分類できます:

1. 関数コンポーネント: これらは、React 要素を返す JavaScript 関数です。これらは、単純でステートレスなコンポーネントによく使用されます。

例：

   function Welcome(props) {
     return 
Hello, {props.name}
;
   }

1. クラス コンポーネント: これらは React.Component を拡張し、render メソッドを含む ES6 クラスです。これらは、ローカル状態およびライフサイクル メソッドを備えたより複雑なコンポーネントに使用されます。

例：

   class Welcome extends React.Component {
     render() {
       return 
Hello, {this.props.name}
;
     }
   }

JSX (JavaScript XML)

JSX は、JavaScript 内で HTML に似たコードを記述できるようにする JavaScript の構文拡張機能です。 React 要素とコンポーネントの作成が簡単になります。

JSX が JavaScript に変換される方法:

JSX 自体は有効な JavaScript ではありません。ビルド プロセス中に、Babel などのツールが JSX を通常の JavaScript に変換します。例えば：

JSX:

const element = 
Hello, world!
;

変換された JavaScript:

const element = React.createElement('h1', null, 'Hello, world!');

小道具 (プロパティ)

Props は、親コンポーネントから子コンポーネントにデータを渡すために使用されます。これらは読み取り専用であり、コンポーネントを再利用可能にするのに役立ちます。

コンポーネントに Props を渡す例:

function Greeting(props) {
  return 
Welcome, {props.username}!
;
}

function App() {
  return ;
}

この例では、Greeting コンポーネントは App コンポーネントからユーザー名プロパティを受け取り、それを表示します。

州

State を使用すると、コンポーネントが独自のデータを管理し、ユーザーの操作に反応できるようになります。機能コンポーネントでは、useState フックを使用して状態を管理します。

useState フックの概要:

useState フックは、現在の状態値とそれを更新する関数の 2 つの要素を含む配列を返す関数です。

useState:
を使用した状態管理の例

import React, { useState } from 'react';

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

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

この例では、Counter コンポーネントはカウント状態を維持します。ボタンをクリックすると状態が更新され、UI に新しいカウント値が反映されます。

最初の React コンポーネントを構築する

挨拶メッセージを表示する簡単な機能コンポーネントを作成してみましょう。

ステップバイステップの例:

1. 新しいファイルの作成: プロジェクトの src ディレクトリに、Greeting.js.

という名前のファイルを作成します。

2. コンポーネントを定義します:
   

   import React from 'react';

   function Greeting() {
     return 
Hello, React!
;
   }

   export default Greeting;

1. コンポーネントのレンダリング: src/App.js を開いて、Greeting コンポーネントをレンダリングします。

   import React from 'react';
   import Greeting from './Greeting';

   function App() {
     return (
       

         
     );
   }

   export default App;

基本スタイルの追加

インライン スタイルまたは外部 CSS ファイルを使用してコンポーネントのスタイルを設定できます。基本的なスタイルを追加する方法は次のとおりです:

1. インライン スタイル:

   function StyledGreeting() {
     const style = {
       color: 'blue',
       textAlign: 'center'
     };

     return 
Hello, styled React!
;
   }

1. 外部CSS: srcディレクトリにCSSファイル(Greeting.css)を作成します。

   .greeting {
     color: green;
     text-align: center;
   }

CSS ファイルを Greeting.js にインポートし、クラスを適用します:

   import React from 'react';
   import './Greeting.css';

   function Greeting() {
     return 
Hello, styled React!
;
   }

   export default Greeting;

結論

React は、開発者が動的でインタラクティブなユーザー インターフェイスを効率的に構築できる強力なライブラリです。このガイドでは、中心となる概念、開発環境のセットアップ、コンポーネント、JSX、プロパティ、状態の理解、最初のコンポーネントの構築など、React の基本について説明しました。また、コンポーネントを強化するためのスタイル オプションも検討しました。