Practices for Lesson 1:

Introduction to ReactJS

Copyright © 2022, Proton Expert Systems & Solutions. All rights reserved

1 Practice of lesson 1: Introduction to react js

Practices for Lesson 1
Overview
In the practices for this lesson, you will learn how to install NodeJS, verifying the NodeJS
version and setup the development environment of ReactJS.

Copyright © 2022, Proton Expert Systems & Solutions. All rights reserved

2 Practice of lesson 1: Introduction to react js

Practice of 1-2: Setting up the Development Environment
Overview
In this practice, you will learn to set up React environment for creating React applications.
Assumptions
You should have completed the Practice of 1-1.
Tasks:
1. Set up the React application environment.
a. Create the folder name Reactjs and change the folder to Reactjs. Execute the
command to create the react project.
npx create-react-app my-app

b. On successful execution of the command, verify the app created with the name
my-app as shown below.
Note: Here “my-app” is the project name. You can specify any name to the project.

c. Navigate to the project folder and start the development server by executing the
below given command.

Copyright © 2022, Proton Expert Systems & Solutions. All rights reserved

3 Practice of lesson 1: Introduction to react js

 cd my-app
npm start

d. The output is displayed in the terminal as shown.

e. Open the browser and provide the URL as localhost:3000 as specified above.
Verify the ReachJS application as shown below.

2. Close the terminal and the browser.

Copyright © 2022, Proton Expert Systems & Solutions. All rights reserved

4 Practice of lesson 1: Introduction to react js