React の初心者ガイド: 基本から始める

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. Navigate to Your Project Directory:

   cd my-app

1. Start the Development Server:

   npm start

This command runs the development server and opens your new React application in your default web browser. You should see a default React welcome page, indicating that everything is set up correctly.

Understanding React Basics

Components are the building blocks of a React application. They encapsulate UI elements and logic, making it easier to manage and reuse code. Components can be classified into two types:

1. Functional Components: These are JavaScript functions that return React elements. They are often used for simple, stateless components.

Example:

   function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
   }

1. Class Components: These are ES6 classes that extend React.Component and include a render method. They are used for more complex components with local state and lifecycle methods.

Example:

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

JSX (JavaScript XML)

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It makes it easier to create React elements and components.

How JSX is Transformed into JavaScript:

JSX is not valid JavaScript by itself. During the build process, a tool like Babel transforms JSX into regular JavaScript. For example:

JSX:

const element = <h1>Hello, world!</h1>;

Transformed JavaScript:

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

Props (Properties)

Props are used to pass data from a parent component to a child component. They are read-only and help make components reusable.

Example of Passing Props to a Component:

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

function App() {
  return <Greeting username="Alice" />;
}

In this example, the Greeting component receives a username prop from the App component and displays it.

State

State allows components to manage their own data and react to user interactions. In functional components, the useState hook is used to manage state.

Introduction to the useState Hook:

The useState hook is a function that returns an array with two elements: the current state value and a function to update it.

Example of State Management Using useState:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In this example, the Counter component maintains a count state. Clicking the button updates the state, and the UI reflects the new count value.

Building Your First React Component

Let’s create a simple functional component to display a greeting message.

Step-by-Step Example:

1. Create a New File: In the src directory of your project, create a file named Greeting.js.

2. Define the Component:
   

   import React from 'react';

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

   export default Greeting;

1. Render the Component: Open src/App.js and render the Greeting component.

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

   function App() {
     return (
       <div className="App">
         <Greeting />
       </div>
     );
   }

   export default App;

Adding Basic Styles

You can style your components using inline styles or external CSS files. Here’s how to add basic styles:

1. Inline Styles:

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

     return <h1 style={style}>Hello, styled React!</h1>;
   }

1. External CSS: Create a CSS file (Greeting.css) in the src directory.

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

Import the CSS file in Greeting.js and apply the class:

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

   function Greeting() {
     return <h1 className="greeting">Hello, styled React!</h1>;
   }

   export default Greeting;

Conclusion

React is a powerful library that enables developers to build dynamic and interactive user interfaces efficiently. In this guide, we covered the basics of React, including its core concepts, setting up the development environment, understanding components, JSX, props, and state, and building your first component. We also explored styling options to enhance your components.

以上がReact の初心者ガイド: 基本から始めるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。