Scribd
Upload
2 views

handsonlab

This document outlines a hands-on lab for creating HTML pages and React applications, requiring basic knowledge of JavaScript and HTML. It provides step-by-step instructions for setting up the environment, cloning necessary files, and running simple React applications, including a todo app and a basic React component. The lab exercises include viewing HTML pages, starting servers, and modifying React components to understand properties and states.

Uploaded by

Adonay Yirga
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

handsonlab

This document outlines a hands-on lab for creating HTML pages and React applications, requiring basic knowledge of JavaScript and HTML. It provides step-by-step instructions for setting up the environment, cloning necessary files, and running simple React applications, including a todo app and a basic React component. The lab exercises include viewing HTML pages, starting servers, and modifying React components to understand properties and states.

Uploaded by

Adonay Yirga
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Hands-on Lab - React Application (1 hour 15 mins)

Objective for Exercise:

By the end of this lab, create HTML Pages with React Components and React applications.

Prerequisites

Before you start, be sure that you meet these prerequisites:

Basic knowledge of JavaScript


Basic knowledge of HTML

Set-up : Check for the cloned files


1. Open a terminal window by using the menu in the editor: Terminal > New Terminal.

2. Change to your project folder.


1. 1

1. cd /home/project

Copied!

3. Check if you have the folder lkpho-Cloud-applications-with-Node.js-and-React


1. 1

1. ls /home/project

Copied!

If you do, you can skip to step 5.


4. Clone the git repository that contains the artifacts needed for this lab, if it doesn’t already exist.
1. 1

1. git clone https://github.com/ibm-developer-skills-network/lkpho-Cloud-applications-with-Node.js-and-React.git

Copied!

5. Change to the directory for this lab.


1. 1

1. cd lkpho-Cloud-applications-with-Node.js-and-React/CD220Labs/

Copied!

6. List the contents of react_pages. This should contain HTML page(s) which you can download and view in your
local system.
1. 1

1. ls react_pages

Copied!

7. List the contents of todoapp. This should contain a directory structure with a pre-installed react app.
1. 1

1. ls todoapp

Copied!

8. List the contents of react-apps. This should contain a directory structure with a pre-installed react app that
you can change to apply what you have learned.
1. 1

1. ls react-apps

Copied!

These are the two directories you will be using for this lab.

Exercise 1: Simple HTML with React


1. In the file explorer goto lkpho-Cloud-applications-with-Node.js-and-React->CD220Labs->react_pages and view
firstReactPage.html. The contents will appear as below. It is a HTML page where the clock is displayed through
a react component.
2. Right-click on firstReactPage.html and click on Download. This will download a copy of this file in your local
system.

3. Now open the downloaded file in your local browser. The page will appear as below.
Exercise 2: First React Application
The todoapp is a react app that has been created for you using npx create-react-app todoapp command. In the files
explorer view todoapp directory. It would appear like this.

2. In the terminal window run the following commands one after the other.
1. 1
2. 2
3. 3

1. cd todoapp
2. npm install
3. npm start
Copied!

The first command changes to the todoapp directory. Second command installs the files required for the React app in
your lab environment and the third one starts the server.

You will see this output indicating that the server is running.

3. Click on the button below to open the React application on new browswer tab or click Skills Network button
on the left, choose the Other option and then click Launch Application and connect to port 3000.

REACT Application

The todoapp UI will appear on the browser as seen in the image below.
4. To stop the server, go to the main command window and press Ctrl+c to stop the server.

Exercise 3: Function Components, Class Components,


Properties and States
The react-apps is a react app that has been created for you using npx create-react-app react-apps command. In the
files explorer view react-apps directory. It would appear like this.

2. In the terminal window run the following commands one after the other.
1. 1
2. 2
3. 3
1. cd /home/project/lkpho-Cloud-applications-with-Node.js-and-React/CD220Labs/react-apps
2. npm install
3. npm start

Copied!

The first command changes to the react-apps directory. Second command installs the files required for the React
app in your lab environment and the third one starts the server.

You will see this output indicating that the server is running.

3. To see what UI this React app renders, click on the Skills Network button on the left, it will open the “Skills
Network Toolbox”. Then click the Other then Launch Application. From there enter the port number the
server is running on, which is 3000 and then launch.

The react-apps UI will appear on the browser. All the styling has been removed and you should see Hello World
written on the page.

4. View the content on App.js under react-apps->src in the file explorer. It will appear as below.
5. Now let’s start adding a component to the page. When the server is running, any change made to the files is
automatically picked up by the server.

The code in App.js will show as given below.


1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9

1. function App() {
2. return (
3. <div >
4. Hello World!
5. </div>
6. );
7. }
8.
9. export default App;

Copied!

It is a function component. Let’s make changes to the code to accept the color as props.

6. Replace the content of App.js with the following code.


1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8

You might also like