PracticeReact

A comprehensive collection of React practice projects covering core concepts from components and props to API calling, routing, and real-world mini applications.

📁 Path: Desktop > Web Development and Designing > ReactApps > PracticeReact

---

👤 Author

Muhammad Abdullah

---

📁 Projects Overview

1. Practice-1

Created: 17-May-26

First steps in React — understanding the project structure and JSX basics.

Topics Covered:

• JSX syntax
• Rendering elements
• Project folder structure (src/, public/)
• App.js entry point

---

2. ReactComponents

Created: 17-May-26

Building and organizing functional components in React.

Topics Covered:

• Functional components
• Component structure and naming conventions
• Importing and exporting components
• Rendering multiple components

---

3. ReactProps

Created: 17-May-26

Understanding how to pass data between components using props.

Topics Covered:

• Passing props to components
• Accessing props inside a component
• Default props
• Props with different data types (string, number, array, object)

---

4. Css

Created: 21-May-26

Styling React components using different CSS approaches.

Topics Covered:

• External CSS files
• CSS Modules
• Inline styles in JSX
• Conditional class names

---

5. PropsDrillingProject

Created: 19-May-26

Understanding props drilling — passing data through multiple component levels.

Topics Covered:

• Multi-level props passing
• Problems with props drilling
• Component hierarchy design
• Introduction to the need for state management

---

6. UseState-Hook

Created: 30-May-26

Mastering the useState hook for managing component-level state.

Topics Covered:

• useState syntax and usage
• Updating state with setter functions
• State with different data types
• Re-rendering on state change

---

7. AdvanceConceptOfUseState

Created: 31-May-26

Deeper dive into advanced useState patterns and techniques.

Topics Covered:

• State with objects and arrays
• Functional updates setState(prev => ...)
• Avoiding direct state mutation
• Multiple state variables

---

8. DealingWithEventHandler

Created: 30-May-26

Handling user interactions and events in React.

Topics Covered:

• onClick, onChange, onSubmit events
• Passing arguments to event handlers
• Synthetic events in React
• Preventing default behavior

---

9. DealWithUseEffect

Created: 06-Jun-26

Understanding the useEffect hook for side effects in React.

Topics Covered:

• useEffect syntax and lifecycle
• Dependency array ([], [dep], no array)
• Cleanup functions
• Fetching data with useEffect

---

10. FormHandling

Created: 01-Jun-26

Building and managing forms in React with controlled inputs.

Topics Covered:

• Controlled components
• Handling multiple form fields
• Form submission with onSubmit
• Form validation and reset

---

11. LocalStorage

Created: 04-Jun-26

Persisting React state using the browser's LocalStorage API.

Topics Covered:

• localStorage.setItem() / getItem()
• Syncing state with LocalStorage
• Custom useLocalStorage hook
• Persisting data across page reloads

---

12. ApiCallingInReact

Created: 04-Jun-26

Fetching and displaying data from external APIs in React.

Topics Covered:

• fetch() and axios for API calls
• Loading and error states
• useEffect + useState for async data
• Displaying API data in components

---

13. TailwindCSS

Created: 26-May-26

Styling React applications with Tailwind CSS utility classes.

Topics Covered:

• Setting up Tailwind CSS in React
• Utility-first styling approach
• Responsive design with Tailwind
• Hover, focus, and conditional classes

---

14. ReactRouterDom

Created: 08-Jun-26

Adding multi-page navigation to React apps using React Router.

Topics Covered:

• Installing and setting up react-router-dom
• <BrowserRouter>, <Routes>, <Route>
• <Link> and <NavLink> navigation
• useNavigate and useParams hooks

---

15. NotesAppProject

Created: 01-Jun-26

A mini Notes app — a real-world project combining multiple React concepts.

Topics Covered:

• CRUD operations (Create, Read, Update, Delete)
• Managing list state
• LocalStorage for persistence
• Component composition

---

16. GalleryProject

Created: 06-Jun-26

An image gallery app with dynamic rendering and filtering.

Topics Covered:

• Rendering image lists dynamically
• Filtering and searching
• Conditional rendering
• API or local image data

---

17. React-UI-Project

Created: 26-May-26

A UI-focused project combining React with modern design principles.

Topics Covered:

• Reusable UI components
• Layout and design patterns
• Component-based architecture
• Responsive styling

---

🗺️ Learning Path

Practice-1 → ReactComponents → ReactProps → Css
  → PropsDrillingProject → UseState-Hook → AdvanceConceptOfUseState
    → DealingWithEventHandler → DealWithUseEffect → FormHandling
      → LocalStorage → ApiCallingInReact → TailwindCSS
        → ReactRouterDom → NotesAppProject → GalleryProject → React-UI-Project

---

🚀 Getting Started

Each project is a standalone React app. To run any project:

cd <project-folder>
npm install
npm start

---

🛠️ Prerequisites

• Node.js v16 or above
• npm or yarn
• VS Code with ES7+ React snippets extension

---

📖 Useful Resources

• React Official Docs
• React Router Docs
• Tailwind CSS Docs
• Axios Docs

---

🔗 Connect with Me

• 💼 LinkedIn — Muhammad Abdullah
• 🐙 GitHub — React Series