React を学ぶ | Hello World デモ | LabEx チュートリアル

はじめに

🧑‍💻 Linux または LabEx の初心者ですか？「Linux のクイックスタート」コースから始めることをお勧めします。

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

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この中級レベルの実験の完了率は 64%です。学習者から 99% の好評価を得ています。

始める前に、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 の「Hello World」デモを起動してみましょう。

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

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

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

次に、既定の 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 回です。やりましょう！