Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nikhilmandaliya/the-react-quiz
https://github.com/nikhilmandaliya/the-react-quiz
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/nikhilmandaliya/the-react-quiz
- Owner: NikhilMandaliya
- Created: 2023-10-15T08:04:52.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-21T09:41:51.000Z (about 1 year ago)
- Last Synced: 2023-10-21T10:29:11.249Z (about 1 year ago)
- Language: JavaScript
- Size: 239 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# The React Quiz
Welcome to the The React Quiz project!
This project is built for the sole purpose of learning and improving my React skills.
## Getting Started
### Prerequisites
Before you begin, make sure you have the following installed on your machine:
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
### Installation
1. Clone this repository to your local machine:
```bash
git clone https://github.com/NikhilMandaliya/The-React-Quiz.git
```
2. Navigate to the project directory:
```bash
cd The-React-Quiz
```
3. Install project dependencies:
```bash
npm install
```
4. Start the fake API server (for simulating backend data):
We are using [json-server](https://www.npmjs.com/package/json-server) so we have to start out server.
```bash
npm run server
```
6. Start the React application:
```bash
npm start
```
7. Open your web browser and visit http://localhost:3000 to access the React Quiz application.
## What I Have Learned
Throughout the development of The React Quiz project, I've gained valuable experience and knowledge in several key areas:
**1. Reducers**: I've learned how to use reducers in React to manage complex state logic efficiently. Reducers have allowed me to handle state changes more predictably, making my code more maintainable.
**2. Context API**: Working with the Context API has enabled me to create a centralized store for my application's state. This has made it easier to access and manage state across different components, reducing the need for prop drilling.
**3. useEffect**: I've become proficient in using the useEffect hook to manage side effects in my React components. Whether it's fetching data, subscribing to events, or handling clean-up operations, useEffect has proven to be a versatile tool.
**4. Custom Hooks**: I've created custom hooks to encapsulate and share common stateful logic throughout my application. This has not only improved code organization but also allowed for code reuse across various components.
## Acknowledgement
* This project is part of the online course I've taken at Udemy. Thanks to Jonas Schmedtmann for creating this awesome course! Link to the course: [The Ultimate React Course 2023: React, Redux & More](https://www.udemy.com/course/the-ultimate-react-course/)