Getting Started


ReactJS is a JavaScript library that is created by Facebook to build fast UI with virtual DOM.

Getting Started 1

We are going to learn:

Install Install

ReactJs provides the package “create-react-app” which create new React project.

I’m creating the new ReactJS project into the directory: c:\xampp\htdocs\

NOTE: By mistake I have type directory name the beginner as beginer. So just ignore this mistake.

Okay. Now got to the htdocs directory and execute the command:

npx create-react-app reactjs-beginer
Getting Started 2
Creating new ReactJS app

It takes some time depends on the internet connection.

After successfully project setup you can see something similar message:

Getting Started 3
Getting Started 24

ReactJS provides self-explaining commands to get started after creating the app.

I’m sharing the same with additional screenshots for beginner.

Top ↑

Run Run

To start the React app simply execute npm start command. E.g.

npm start
Getting Started 4
Execute “npm start” command

Now, your browser will open with the link http://localhost:3000/

If browser not open then simply open the browser and navigate to link http://localhost:3000/

You can see the screen something like:

Getting Started 5
Getting Started 25

Top ↑

Edit Edit

For testing lets edit the file src/App.js

Getting Started 6
Getting Started 26

Replace the :

    Edit <code>src/App.js</code> and save to reload.


<h1>Hello World</h1>
Getting Started 7
Getting Started 27

And then you notice that the browser automatically refresh and show the string Hello World.

Getting Started 8
Getting Started 28

Top ↑

Build Build

Now, Lets build our ReactJS project with npm run build command.

npm run build
Getting Started 9
Getting Started 29

Now, Our build HTML file build/index.html is ready.

Lets see it with URL: http://localhost/reactjs-beginer/build/index.html

Here, We get below error:

GET http://localhost/static/css/main.9d5b29c0.chunk.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost/static/js/2.15ab9b0c.chunk.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost/static/js/main.854f86f5.chunk.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost/static/js/2.15ab9b0c.chunk.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost/static/js/main.854f86f5.chunk.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost/manifest.json 404 (Not Found)
Manifest: Line: 1, column: 1, Syntax error.

Getting Started 10
Getting Started 30

This is because the build is expecting the relative URL as http://localhost/

So, Let’s deploy it on GitHub with gh-pages.

Top ↑

Pre-Deploy Pre-Deploy

To deploy the project on GitHub we need to create and setup the GitHub repo.

Let’s, Create project new project reactjs-beginer

Note: Skip the typo mistake. Also, Skip this step if you already have the repo.

Getting Started 11
Getting Started 31

Created empty GitHub repo.

Getting Started 12
Getting Started 32

Now, Navigate to our ReactJS repository and execute below commands

Command 1: Set remote origin with command git remote add origin

Getting Started 13
Getting Started 33

Command 2: Set main branch with command git branch -M main

Getting Started 14
Getting Started 34

Command 3: Push main branch with command git push -u origin main

Getting Started 15
Getting Started 35

Now, Our GitHub repo contain our ReactJS code. But, We had modified the App.js file so lets save, commit, and push changes with below commands:

git add .
git commit -m "Updated the string."
git push origin main
Getting Started 16
Getting Started 36

Now, The repo contain the latest data with

Getting Started 17
Getting Started 37

Top ↑

Deply Deply

We are going to use package gh-pages to push our changes to GitHub.

npm i gh-pages --save-dev
Getting Started 18
Getting Started 38

Now, We need to edit the package.json file and set homepage and deploy command to make it easy to deply the changes to GitHub.

Open package.json file and add do below changes:

"homepage": "",
"deploy": "gh-pages -d build"
Getting Started 19
Getting Started 39

Now, We are ready to go. Just execute below commands to build and deploy the ReactJS project on GitHub pages.

npm run build
npm run deploy
Getting Started 20
Getting Started 40

After deploy first confirm that you have set the gh-pages branch for the GitHub pages.

E.g. Visit

Getting Started 21
Getting Started 41

Okay. So, We had deployed the project now lets visit

First time you may see below error:

Getting Started 22
Getting Started 42


Rarely it take some time to reflect the changes on GitHub pages. But don’t worry.

After few minutes you can see something below:

Getting Started 23
Getting Started 43

Great! We have successfully deploy the ReactJS application on GitHub pages.

You can fork or checkout the code from

Also, visit deployed page

Leave a Reply