ヒーローからの反応: レッスンの開始

開発者の皆さん、

0 からヒーローまで反応 シリーズの 最初のレッスン へようこそ!このチュートリアルでは、React を使い始めるために必要な絶対的な基本について説明します。このレッスンが終わるまでに、React がマシンにインストールされて実行されるようになり、React を最新の Web アプリケーションを構築するための強力なライブラリにする核となる概念を理解できるようになります。

---

リアクトとは何ですか?

React は、動的でインタラクティブなユーザー インターフェイスを構築するために Facebook によって作成された JavaScript ライブラリ です。これは、アプリケーション全体で再利用できる、再利用可能な コンポーネント (小規模な自己完結型のコード) の作成に重点を置いています。 React の宣言的な性質により、複雑な UI の構築がシンプルかつ効率的になり、Web 開発コミュニティで広く採用されています。

---

Reactを学ぶ理由

• 再利用可能なコンポーネント: 一度作成すれば、どこでも使用できます。 React コンポーネントを使用すると、コードの保守性と拡張性が向上します。
• 高速かつ効率的: React は仮想 DOM を使用して、変更が必要なアプリの部分のみを効率的に更新およびレンダリングします。
• 強力なコミュニティ: ツールとライブラリの巨大なエコシステムを備えた React は、現在最も人気のあるフロントエンド フレームワークの 1 つです。

---

ステップ 1: Node.js と npm のインストール

React に入る前に、Node.js と npm (ノード パッケージ マネージャー) をインストールする必要があります。これらは、依存関係を管理し、React を実行するのに役立ちます。

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

1. Node.js をダウンロード: Node.js の公式 Web サイトにアクセスし、最新の安定バージョン (LTS) をダウンロードします。インストーラーには npm も含まれます。
2. Node.js をインストールします: インストーラーを実行し、プロンプトに従います。
3. インストールの確認: インストールしたら、ターミナルまたはコマンド プロンプトを開き、次のコマンドを入力してすべてが動作していることを確認します。

   node -v
   npm -v

Node と npm の両方のバージョンが出力されるはずです。

---

ステップ 2: 最初の React アプリをセットアップする

React は、Create React App というツールを提供します。これを使用すると、ビルド ツールを構成せずに、新しい React プロジェクトをすばやくセットアップできます。

React アプリの作成方法:

1. ターミナルまたはコマンド プロンプトを開きます。
2. 次のコマンドを実行して、Create React App をグローバルにインストールします。

   npx create-react-app my-first-react-app

これにより、開始するために必要なものがすべて含まれた my-first-react-app という新しいフォルダーが作成されます。

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

   cd my-first-react-app

1. React アプリを起動します。

   npm start

これにより開発サーバーが開き、デフォルトのブラウザで http://localhost:3000/ で実行されている新しい React アプリのタブが自動的に開きます。

---

ステップ 3: プロジェクト構造を調べる

Create React App によって作成されたファイルとフォルダーを見てみましょう:

• public/: このフォルダーには、HTML ファイルとその他の静的アセット (画像、アイコンなど) が含まれます。
• src/: これは、すべての React コンポーネントとメイン コードが存在する場所です。ほとんどの時間をここで過ごすことになります。
• package.json: このファイルには、プロジェクトのすべての依存関係とスクリプトがリストされます。

---

ステップ 4: 最初の React コンポーネント

次に、アプリのメインコンポーネントを定義する src/App.js ファイルについて詳しく見ていきましょう。コンポーネントは、HTML のようなコード (JSX と呼ばれます) を返す JavaScript 関数です。デフォルトのコンポーネントは次のようになります:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
      <p>Welcome to your first React app.</p>
    </div>
  );
}

export default App;

App.js ファイルを編集してカスタマイズできます。見出しを別のものに変更してみてください:

<h1>Welcome to React from 0 to Hero!</h1>

ファイルを保存すると、ブラウザが自動的に更新され、変更内容が表示されます。

---

結論

おめでとうございます! ?最初の React アプリを正常にセットアップし、最初のコンポーネントの変更を行いました。これが React を使った旅の始まりです。次のレッスンでは、React コンポーネントをさらに深く掘り下げ、state と props を管理して動的ユーザー インターフェイスを作成する方法を学びます。

以下にお気軽にコメントや質問を残してください。レッスン 2 をお楽しみに!

---

次は何ですか?

次のレッスンでは、以下について説明します:

• コンポーネントの詳細
• ユーザー インタラクションの処理方法
• 状態 と 小道具 の概要

コーディングを続けてください:)

以上がヒーローからの反応: レッスンの開始の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。