Getting Started

Advertisement

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

Getting Started 1
https://reactjs.org/

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

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

Top ↑

Edit Edit

For testing lets edit the file src/App.js

Getting Started 6

Replace the :

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

with:

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

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

Getting Started 8

Top ↑

Build Build

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

npm run build
Getting Started 9

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

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

Created empty GitHub repo.

Getting Started 12

Now, Navigate to our ReactJS repository and execute below commands

Command 1: Set remote origin with command git remote add origin https://github.com/maheshwaghmare/reactjs-beginer.git

Getting Started 13

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

Getting Started 14

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

Getting Started 15

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

Now, The repo contain the latest data with https://github.com/maheshwaghmare/reactjs-beginer

Getting Started 17

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

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": "https://maheshwaghmare.github.io/reactjs-beginer",
...
"deploy": "gh-pages -d build"
Getting Started 19

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

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

E.g. Visit https://github.com/maheshwaghmare/reactjs-beginer/settings/pages

Getting Started 21

Okay. So, We had deployed the project now lets visit https://maheshwaghmare.github.io/reactjs-beginer/

First time you may see below error:

Getting Started 22

Why?

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

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

You can fork or checkout the code from https://github.com/maheshwaghmare/reactjs-beginer/

Also, visit deployed page https://maheshwaghmare.github.io/reactjs-beginer/

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: