https://github.com/veerajxcode/react-projects

Learning and understanding basic concepts of React with basic projects
https://github.com/veerajxcode/react-projects

reactjs

Last synced: about 2 months ago
JSON representation

Learning and understanding basic concepts of React with basic projects

• Host: GitHub
• URL: https://github.com/veerajxcode/react-projects
• Owner: veerajxcode
• Created: 2023-09-11T05:04:10.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2024-10-24T09:11:12.000Z (over 1 year ago)
• Last Synced: 2025-04-08T12:47:53.097Z (about 1 year ago)
• Topics: reactjs
• Homepage:
• Size: 537 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 my **React Projects** repository! 👋

**NOTE:** Learning **React** and understanding its basic concept helped me develop my first WordPress plugin and theme which contain **Gutenberg** blocks and block-patterns. Please go through **[Choose Your Best Selling Products](https://github.com/veerajxcode/chooseyourbestsellingproducts)** plugin and **[NintyNine](https://github.com/veerajxcode/nintynine)** theme.

Now, this repository contains a series of projects where I learned and applied key concepts of **React** while building practical applications. Each project represents my progress in mastering React, starting from the basics to more advanced topics like **hooks**, **custom hooks**, **Context API**, and integrating third-party libraries like **TailwindCSS**.

## 📝 Project Listing

### [Project 1](https://github.com/veerajxcode/react-projects/tree/react-project1)

- **Focus**: Understanding the basic structure and workflow of React.

- **Key Learning**: Difference between default React setup vs. Vite + React setup.

### [Project 2](https://github.com/veerajxcode/react-projects/tree/react-project2)

- **Focus**: Creating a basic React application.

- **Key Learning**: React components and JSX structure.

### [Project 3](https://github.com/veerajxcode/react-projects/tree/react-project3)

- **Focus**: Counter application.

- **Key Learning**: 

  - Introduction to **Hooks** and their usage in React.

  - Conditions implemented: 

    - Alert "Limit Exceeded !!" if count > 20.

    - Alert "Negative value not allowed !!" if count is negative.

### [Project 4](https://github.com/veerajxcode/react-projects/tree/react-project4)

- **Focus**: TailwindCSS integration and Props.

- **Key Learning**: 

  - Using **TailwindCSS** for styling.

  - Using **Props** with static values, objects, and arrays.

### [Project 5](https://github.com/veerajxcode/react-projects/tree/react-project5)

- **Focus**: Background changer project.

- **Key Learning**: 

  - Deepened understanding of **TailwindCSS**.

  - Using **Hooks** for state management.

### [Project 6](https://github.com/veerajxcode/react-projects/tree/react-project6)

- **Focus**: Password generator.

- **Key Learning**: 

  - Using **useEffect**, **useRef**, and **useCallback** hooks.

  - Improved efficiency with **useCallback**.

### [Project 7](https://github.com/veerajxcode/react-projects/tree/react-project7)

- **Focus**: Currency converter.

- **Key Learning**: 

  - Creating **custom hooks**.

  - Integrating and using third-party APIs for fetching data.

### [Project 8](https://github.com/veerajxcode/react-projects/tree/react-project8)

- **Focus**: Context API.

- **Key Learning**: 

  - Understanding the flow and functionality of **Context API**.

### [Project 9](https://github.com/veerajxcode/react-projects/tree/react-project9)

- **Focus**: User data with Context API and theme management.

- **Key Learning**: 

  - Displaying user data using **Context API**.

  - Implementing **light/dark mode** with **TailwindCSS**.

### [Project 10](https://github.com/veerajxcode/react-projects/tree/react-project10)

- **Focus**: Todo List project.

- **Key Learning**: 

  - Building a complete **Todo List** application.

  - Using **localStorage** to persist data across sessions.

## 🛠️ Technologies Used

- **React**: Core framework for building these projects.

- **Hooks**: useState, useEffect, useRef, useCallback, custom hooks.

- **TailwindCSS**: Used for styling in multiple projects.

- **Context API**: For managing state globally in React applications.

- **LocalStorage**: Used in the Todo List project for data persistence.

## 🎓 Learning Journey

This repository reflects my continuous learning and application of React concepts, including both foundational and more advanced techniques. It showcases my ability to create functional, responsive applications and highlights my growth in working with modern web technologies.

A big shoutout to the **[Chai aur React series by (Hitesh Choudhery) ](https://youtube.com/playlist?list=PLu71SKxNbfoDqgPchmvIsL4hTnJIrtige&si=h1sL6_USV7p9ceM6)** for providing invaluable tutorials and guidance throughout this journey! 🍵

Feel free to explore the projects. 😊