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 plugin and 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

• Focus: Understanding the basic structure and workflow of React.
• Key Learning: Difference between default React setup vs. Vite + React setup.

Project 2

• Focus: Creating a basic React application.
• Key Learning: React components and JSX structure.

Project 3

• 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

• Focus: TailwindCSS integration and Props.
• Key Learning:
  • Using TailwindCSS for styling.
  • Using Props with static values, objects, and arrays.

Project 5

• Focus: Background changer project.
• Key Learning:
  • Deepened understanding of TailwindCSS.
  • Using Hooks for state management.

Project 6

• Focus: Password generator.
• Key Learning:
  • Using useEffect, useRef, and useCallback hooks.
  • Improved efficiency with useCallback.

Project 7

• Focus: Currency converter.
• Key Learning:
  • Creating custom hooks.
  • Integrating and using third-party APIs for fetching data.

Project 8

• Focus: Context API.
• Key Learning:
  • Understanding the flow and functionality of Context API.

Project 9

• 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

• 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) for providing invaluable tutorials and guidance throughout this journey! 🍵

Feel free to explore the projects. 😊