Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/susisarvesh/react
React Training
https://github.com/susisarvesh/react
javascript jsx react react-router-dom react-sarveshsusi sarvesh sarvesh-project-react tailwindcss virtual-dom-library
Last synced: 20 days ago
JSON representation
React Training
- Host: GitHub
- URL: https://github.com/susisarvesh/react
- Owner: susisarvesh
- Created: 2024-12-17T15:48:23.000Z (24 days ago)
- Default Branch: master
- Last Pushed: 2024-12-19T07:05:55.000Z (22 days ago)
- Last Synced: 2024-12-19T08:21:27.699Z (22 days ago)
- Topics: javascript, jsx, react, react-router-dom, react-sarveshsusi, sarvesh, sarvesh-project-react, tailwindcss, virtual-dom-library
- Language: JavaScript
- Homepage:
- Size: 49.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Projects Repository
Welcome to the **React Projects Repository**! 🚀 This repository contains a series of 40 React projects aimed at mastering React development. Each project is organized within its respective folder under the `rec` directory. 🌟
---
## Table of Contents
1. [Introduction](#introduction)
2. [Folder Structure](#folder-structure)
3. [Technologies Used](#technologies-used)
4. [Concepts Utilized](#concepts-utilized)
5. [Getting Started](#getting-started)
6. [Projects Overview](#projects-overview)
---
## Introduction
This repository serves as a comprehensive learning and practice space to become proficient in React.js. Each project focuses on different aspects of React development, ranging from fundamental concepts to advanced features. 🧑💻✨
---
## Folder Structure
```
rec/Components
├── project-01/
├── project-02/
├── project-03/
├── ...
└── project-40/
```
Each folder contains the project code with its own README file explaining the objectives and steps to run the project.
---
## Technologies Used
I have utilized a variety of powerful tools and libraries to build these projects, including:
- **React** ⚛️ for building user interfaces
- **React Router DOM** 🌐 for implementing dynamic routing
- **Zustand** 🐻 for state management
- **TailwindCSS** 🎨 for styling with utility-first CSS classes
---
## Concepts Utilized
Throughout these projects, I have explored and implemented the following React concepts:
### Fundamental Concepts
- JSX Syntax 📝
- Components and Props 📦
- State and Lifecycle Methods 🔄
- Event Handling 🖱️
- Conditional Rendering ❓
- Lists and Keys 📋
### Advanced Concepts
- React Context API 🌐
- Custom Hooks 🪝
- Performance Optimization (Memoization) ⚡
- Lazy Loading and Suspense 🕒
- Error Boundaries 🚧
- Controlled vs. Uncontrolled Components 🎛️
- Portals 🚪
### Major React Hooks
- `useState` 🗃️
- `useEffect` 🌍
- `useContext` 🛠️
- `useRef` 🔗
- `useReducer` 🔄
- `useCallback` 📞
- `useMemo` 🧠
- `useLayoutEffect` 🏗️
- `useImperativeHandle` ✋
---
## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org/) installed
- Basic understanding of JavaScript and React
### Installation
1. Clone the repository:
```bash
git clone https://github.com/susisarvesh/React.git
cd React
```
2. Navigate to a project folder:
```bash
cd rec/Components/project-01
```
3. Install dependencies:
```bash
npm install
```
4. Start the project:
```bash
npm start
```
---
## Projects Overview
| Project | Description | Status |
|---------|----------------------------------------------|--------------|
| 1 | Basic React Setup and Hello World | ✅ Completed |
| 2 | To-Do List with CRUD Operations | 🔄 In Progress |
| 3 | Weather App with API Integration | ⏳ Pending |
| ... | ... | ... |
| 40 | Final Capstone Project | ⏳ Pending |
---
## License
This repository is licensed under the MIT License. See the LICENSE file for more details.