github pages with react code example

Example 1: upload react project to github

Make sure you have already created a repo in github.
In "package.json" file of project add - "homepage": "https://username.github.io/reponame"
Run Install - "yarn add gh-pages"
In "package.json/scripts" add `"predeploy":"npm run build", "deploy":"gh-pages -d build"` 
Run "npm run build" to create the build
To push in git use following steps:
1) git init
2) git add -A
3) git commmit -m "first commit"
4) git remote add origin https://github.com/username/reponame.git
5) git push -u origin master
Now in github repo create a new branch "gh-pages"
In settings -> github pages -> source -> branch -> gh-pages -> save
Run "npm run deploy"
*****************************voilà it's done!!*************************

Example 2: deploy react express to github pages

npm run deploy

Example 3: hide urls in .env in react app

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

outside our src folder create .env file and add it to gitignore
REACT_APP_WEATHER_API_KEY=123456
inside where you want to access the variable 
const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

make sure to restart the server