Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/baguilar6174/react-heroes-app
This application is the result of the React: De cero a experto ( Hooks y MERN ) course, it consists of a simple application with basic and advanced React concepts.
https://github.com/baguilar6174/react-heroes-app
react spa vite
Last synced: about 1 month ago
JSON representation
This application is the result of the React: De cero a experto ( Hooks y MERN ) course, it consists of a simple application with basic and advanced React concepts.
- Host: GitHub
- URL: https://github.com/baguilar6174/react-heroes-app
- Owner: baguilar6174
- Created: 2022-10-26T15:24:47.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-18T19:12:57.000Z (about 2 years ago)
- Last Synced: 2024-11-07T12:33:05.981Z (3 months ago)
- Topics: react, spa, vite
- Language: JavaScript
- Homepage:
- Size: 10.8 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Heroes React App
This application is the result of the React: [De cero a experto ( Hooks y MERN )](https://www.udemy.com/course/react-cero-experto/) course, it consists of a simple application with basic and advanced React concepts.
## Installation
Get code using
```
git clone https://github.com/baguilar6174/react-heroes-app.git
```
Step 2:
Install the necessary libraries (make sure you have node and yarn)
```
yarn
```
Step 3:
Runs the app in the development mode
```
yarn dev
```
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
## My process
### Built with
- Semantic HTML5 markup
- Bootstrap
- React JS 18
- React Router DOM
- Vite
## What I learned
- SPA (Single Page Application)
- Multiple Routers
- Push and Replace in History
- Read arguments by URL
- QueryParams
- Apply filters using QueryStrings
- Public routes
- Private routes
- Login and logout - No backend
- Remember which was the last visited route to improve the user experience.
- Context
- Reducer
- Custom Hooks
- Testing on private and public routes
- MemoryRouter
- Tests on our DashboardRouter
- Testing in the AppRouter
- Simulate URLs and segments
- Simulating queryParams and queryStrings
## Project status
Currently, the project contains a simple application that loads hero data from a JS file. This data is displayed using Boostrap. In addition, the application contains a public and private route handler and the login and logout function using localstorage.
## Heroes React App
## Author
- Website - [www.bryan-aguilar.com](https://www.bryan-aguilar.com/)
- Medium - [baguilar6174](https://baguilar6174.medium.com/)
- LinkeIn - [baguilar6174](https://www.linkedin.com/in/baguilar6174)
- Email - [[email protected]](mailto:[email protected])