ReactJS is a JavaScript library that is created by Facebook to build fast UI with virtual DOM.
![Getting Started 1 Getting Started 1](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-org-website-landing-page-1024x493.png)
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 Getting Started 2](https://maheshwaghmare.com/wp-content/uploads/2021/05/npx-create-react-app-installing.png)
It takes some time depends on the internet connection.
After successfully project setup you can see something similar message:
![Getting Started 3 Getting Started 3](https://maheshwaghmare.com/wp-content/uploads/2021/05/npx-create-react-app-success.png)
ReactJS provides self-explaining commands to get started after creating the app.
I’m sharing the same with additional screenshots for beginner.
Run Run
To start the React app simply execute npm start command. E.g.
npm start
![Getting Started 4 Getting Started 4](https://maheshwaghmare.com/wp-content/uploads/2021/05/react-js-npm-start-success.png)
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 5](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-create-react-app-default-page-1024x520.png)
Edit Edit
For testing lets edit the file src/App.js
![Getting Started 6 Getting Started 6](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-create-react-app-edit-app-file.png)
Replace the :
<p> Edit <code>src/App.js</code> and save to reload. </p>
with:
<h1>Hello World</h1>
![Getting Started 7 Getting Started 7](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-create-react-app-update-app-file.png)
And then you notice that the browser automatically refresh and show the string Hello World.
![Getting Started 8 Getting Started 8](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-org-website-landing-after-edit-page-1024x520.png)
Build Build
Now, Lets build our ReactJS project with npm run build command.
npm run build
![Getting Started 9 Getting Started 9](https://maheshwaghmare.com/wp-content/uploads/2021/05/react-js-npm-run-build-success.png)
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 10](https://maheshwaghmare.com/wp-content/uploads/2021/05/react-js-localhost-deploy-console-error-1024x521.png)
This is because the build is expecting the relative URL as http://localhost/
So, Let’s deploy it on GitHub with gh-pages.
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 11](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-beginer-github-repo-create-1024x522.png)
Created empty GitHub repo.
![Getting Started 12 Getting Started 12](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-beginer-github-repo-created-new-1024x521.png)
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 Getting Started 13](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-beginer-set-origin.png)
Command 2: Set main branch with command git branch -M main
![Getting Started 14 Getting Started 14](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-beginer-github-set-main-branch.png)
Command 3: Push main branch with command git push -u origin main
![Getting Started 15 Getting Started 15](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-beginer-github-push-changes.png)
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 16](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-beginer-github-save-commit-push-changes.png)
Now, The repo contain the latest data with https://github.com/maheshwaghmare/reactjs-beginer
![Getting Started 17 Getting Started 17](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-beginer-github-after-push-changes-1024x522.png)
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 18](https://maheshwaghmare.com/wp-content/uploads/2021/05/npm-install-gh-pages-save-dev-1024x420.png)
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 Getting Started 19](https://maheshwaghmare.com/wp-content/uploads/2021/05/edit-reactjs-beginer-package-json-file.png)
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 20](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-beginer-run-deploy.png)
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 Getting Started 21](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-beginer-github-pages-setting-1024x520.png)
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 Getting Started 22](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-beginer-after-deploy-error-1024x519.png)
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 Getting Started 23](https://maheshwaghmare.com/wp-content/uploads/2021/05/reactjs-beginer-after-deploy-success-1024x521.png)
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/