React アプリの作成方法

React は、Facebook によって開発された、ユーザー インターフェイスを構築するための強力な JavaScript ライブラリです。これにより、動的で対話型の Web アプリケーションを作成するプロセスが簡素化されます。このガイドでは、React アプリケーションを最初から作成する手順を説明します。

前提条件

始める前に、以下がシステムにインストールされていることを確認してください:

1. Node.js と npm:

   • Node.js をダウンロードしてインストールします (npm は Node.js に含まれています)。
   • インストールを確認します:

    node -v
    npm -v
   

2. テキストエディタ:
   
   Visual Studio Code.

など、選択したコード エディターを使用します。

ステップ 1: create-react-app をインストールする

create-react-app は、適切なデフォルト構成で新しい React プロジェクトを迅速にセットアップするための React チームによる公式ツールです。

• ターミナルまたはコマンド プロンプトを開き、create-react-app をグローバルにインストールします。

  npm install -g create-react-app

ステップ 2: 新しい React アプリを作成する

1. プロジェクト ディレクトリに移動します: プロジェクトを配置する場所を選択します。例えば：

   cd Desktop

1. React アプリを作成します: todolist を目的のプロジェクト名に置き換えます。

   npx create-react-app todolist

• このコマンドは、必要なファイルと依存関係をすべて含む新しいフォルダー (todolist) を作成します。

1. プロジェクト フォルダーに移動します:

   cd todolist

ステップ 3: 開発サーバーを起動する

次のコマンドを実行して開発サーバーを起動します:

npm start

• デフォルトのブラウザが自動的に開き、http://localhost:3000 にある React アプリが表示されます。
• そうでない場合は、ブラウザを手動で開き、そのアドレスにアクセスしてください。

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

create-react-app によって作成されるファイルとフォルダーの概要は次のとおりです。

 node -v
 npm -v

ステップ 5: React アプリを変更する

1. メインコンポーネント (App.js) を編集します: テキスト エディターで src/App.js を開き、JSX をカスタマイズしてコンテンツを変更します。

  npm install -g create-react-app

1. 変更を保存して更新を確認します: 保存後、ブラウザが自動的に更新されて変更が反映されます。

結論

おめでとうございます!最初の React アプリが正常に作成され、実行されました。このセットアップは、強力なコンポーネントベースの Web アプリケーションを構築するための強固な基盤を提供します。 React コンポーネント、状態管理、フックを調べてスキルをさらに強化してください!

以上がReact アプリの作成方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。