How to Create and Deploy a React.js App to Github Pages

Creating a React.js App

npx create-react-app <name>

How Do I Get Started?

Success! Created project1 at /Users/admin/react_tutorial/project1
npm run start
yarn start
All set!
Ta da!

Deploying to Github Pages

npm install gh-pages --save-dev
My Project’s package.json
"homepage": "http://{username}.github.io/{repo-name}",
"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},
"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","predeploy": "npm run build","deploy": "gh-pages -d build"},

Issues with Images?

<img src={`${process.env.PUBLIC_URL}images/${img}`}/>
<img src=yourprojectnameimages/image.png>
<img src={`${process.env.PUBLIC_URL}/images/${img}`}/>

Blank Screen?

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store