あなたの最初の React 実験

はじめに

こんにちは、LabEx へようこそ！この最初の実験では、React における古典的な「Hello, World!」プログラムを学びます。

以下の「続行」ボタンをクリックして実験を開始してください。

React のはじめに

前提条件

始める前に、LabEx VM に Node.js と npm がインストールされていることを確認しましょう。

ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します。

cd ~/project
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get update
sudo apt-get install -y nodejs

React の初期化

React の「Hello World」デモを起動してみましょう。

ターミナルまたはコマンドプロンプトを開き、新しい React プロジェクトを作成するために次のコマンドを実行します。

cd ~/project
npx create-react-app hello-world-demo

インストールが完了するのを待ちましょう。

React アプリの更新

次に、既定の React アプリを更新して、「Hello, World!」のメッセージを表示しましょう。

好きなコードエディタで src/App.js ファイルを開き、内容を次のコードに置き換えます。

import React from "react";

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

既定では、React 開発サーバーはポート 3000 を使用します。ポートを 8080 に変更するには、コードエディタで package.json ファイルを開きます。

scripts セクションを見つけて、start スクリプトを更新して PORT 環境変数を含めます。

"scripts": {
  "start": "BROWSER=none PORT=8080 react-scripts start",
...
}

最後に、次のコマンドを実行して React 開発サーバーを起動します。

cd hello-world-demo
npm start

これで完了です！ポート 8080 を使用して、ローカル サーバー上で React の「Hello World」デモを正常に起動しました。

次に、Web 8080 タブに切り替えて、更新ボタンをクリックして Web ページを表示します。

まとめ

おめでとうございます！最初の LabEx 実験を完了しました。

LabEx とその使い方についてもっと学びたい場合は、サポートセンター を訪問してください。または、LabEx について詳しく学ぶために ビデオ を見ることができます。

プログラミングは長い旅ですが、「次の実験」はクリック 1 回です。やりましょう！