https://github.com/pranabdas/planets
A React application for learning purpose.
https://github.com/pranabdas/planets
beginner learning learning-react react react-router reactjs tutorial
Last synced: 15 days ago
JSON representation
A React application for learning purpose.
- Host: GitHub
- URL: https://github.com/pranabdas/planets
- Owner: pranabdas
- Created: 2022-02-10T11:28:50.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-07T01:59:19.000Z (about 4 years ago)
- Last Synced: 2025-05-07T11:34:23.103Z (about 1 year ago)
- Topics: beginner, learning, learning-react, react, react-router, reactjs, tutorial
- Language: JavaScript
- Homepage: https://explore-planets.netlify.app/
- Size: 644 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Planets
Explore the planets in our solar system. Visit the app at
### Initialize the project
```console
npx create-react-app planets
```
Remove all unnecessary files to begin with empty project.
### Add bootstrap
```console
npm install --save bootstrap reactstrap react-popper @popperjs/core
```
Add bootstrap css to `index.js`.
### Implement Navbar
Learn about reactstrap components here
### React component
Add planet images inside `public/assets/images` folder. Build `Planets`
component.
### React router
```console
npm i react-router-dom
```
### Deploy via GitHub Pages
```console
npm install --save-dev gh-pages
```
Add `"homepage": "."` and `"predeploy": "npm run build"` and
`"deploy": "gh-pages -d build"` script in `package.json`. Include a 404 redirect
to homepage because react router won't work for the static site. Currently
GitHub deploy is broken due to use of react-router (alternative would be to use
hash-router), however Netlify deploy working.
### Resources
-