Your First React Lab

Introduction

Hi there, welcome to LabEx! In this first lab, you'll learn the classic "Hello, World!" program in React.

Click the Continue button below to start the lab.

Skills Graph

Hello React

Prerequisites

Before we start, we need to make sure that Node.js and npm are installed on LabEx VM.

Open the terminal or command prompt and run the following commands:

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 Initialization

Let's try to launch a React "Hello World" demo.

Open your terminal or command prompt and run the following command to create a new React project:

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

Please wait for the installation to complete.

Update the React App

Next, let's update the default React app to display a "Hello, World!" message.

Open the file src/App.js in your preferred code editor and replace the contents with the following code:

import React from "react";

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

export default App;

By default, the React development server uses port 3000. To change it to port 8080, open the file package.json in your code editor.

Locate the scripts section and update the start script to include the PORT environment variable:

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

Finally, run the following command to start the React development server:

cd hello-world-demo
npm start

That's it! You have successfully launched a React "Hello World" demo on your local server using port 8080.

Now, you can switch to the Web 8080 Tab, and click the refresh button to see the web page.

Summary

Congratulations! You have completed your first LabEx Lab.

If you want to learn more about LabEx and how to use it, you can visit our Support Center . Or you can watch the video to learn more about LabEx.

Programming is a long journey, but Next Lab is just one click away. Let's do it!