🚀 React Learning Journey

A complete hands-on journey to learn React.js from fundamentals to advanced concepts.

This repository documents my progress while learning React through structured lessons, practical examples, challenges, and mini-projects.

The goal of this repository is not only to learn React concepts, but also to understand how professional React applications are designed, optimized, tested, and deployed.

---

📌 About This Repository

React Learning Journey is a structured learning repository that covers:

• React fundamentals
• Modern React hooks
• Component architecture
• State management
• Routing
• Performance optimization
• Testing
• Deployment
• Professional project structure

Each lesson contains:

• 📚 Concept explanation
• 💻 Practical implementation
• 🧩 Challenges
• 🏗️ Mini projects
• 📝 Git commits for progress tracking

---

🛠️ Technologies Used

Core

• React.js
• JavaScript ES6+
• JSX
• HTML5
• CSS3

Development Tools

• Vite
• npm
• VS Code
• Git & GitHub

React Ecosystem

• React Router
• Context API
• React Hooks
• React Testing Library
• Vitest

---

📂 Project Structure

src/
│
├── assets/
│
├── challenges/
│   ├── 01-jsx
│   ├── 02-components
│   ├── 03-props
│   ├── 04-state
│   ├── 05-events
│   ├── 06-conditional-rendering
│   ├── 07-lists-and-keys
│   ├── 08-useEffect
│   ├── 09-api-calls
│   ├── 10-custom-hooks
│   ├── 11-forms
│   ├── 12-react-router
│   ├── 13-context-api
│   ├── 14-useReducer
│   └── 15-performance-optimization
│
├── lessons/
│   ├── 01-jsx
│   ├── 02-components
│   ├── 03-props
│   ├── 04-state
│   ├── 05-events
│   ├── 06-conditional-rendering
│   ├── 07-lists-and-keys
│   ├── 08-useEffect
│   ├── 09-api-calls
│   ├── 10-custom-hooks
│   ├── 11-forms
│   ├── 12-react-router
│   ├── 13-context-api
│   ├── 14-useReducer
│   └── 15-performance-optimization
│
├── App.jsx
├── main.jsx
└── index.css

---

📚 Learning Roadmap

🟢 React Fundamentals

01 - JSX

Learn:

• JSX syntax
• Embedding JavaScript
• Expressions
• JSX rules
• Rendering elements

---

02 - Components

Learn:

• Functional components
• Component composition
• Reusable UI
• Component organization

---

03 - Props

Learn:

• Passing data between components
• Props destructuring
• Children props
• Reusable components

---

04 - State

Learn:

• useState hook
• State updates
• Managing component data
• State-driven UI

---

05 - Events

Learn:

• Event handling
• Click events
• Form events
• Event functions

---

06 - Conditional Rendering

Learn:

• if statements
• Ternary operators
• Logical rendering
• Dynamic UI

---

07 - Lists and Keys

Learn:

• Rendering arrays
• map()
• Keys
• Dynamic components

---

08 - useEffect

Learn:

• Side effects
• Lifecycle behavior
• Dependencies
• Cleanup functions

---

09 - API Calls

Learn:

• Fetch API
• Async/Await
• Loading states
• Error handling

---

10 - Custom Hooks

Learn:

• Creating reusable logic
• Custom hooks patterns
• useFetch
• useCounter

---

11 - Forms

Learn:

• Controlled components
• Form handling
• Validation
• Multiple inputs

---

12 - React Router

Learn:

• BrowserRouter
• Routes
• Route parameters
• Navigation
• Protected routes basics

---

13 - Context API

Learn:

• Global state
• createContext
• Provider pattern
• useContext

---

14 - useReducer

Learn:

• Reducer pattern
• Actions
• Dispatch
• Complex state management

---

15 - Performance Optimization

Learn:

• React.memo
• useMemo
• useCallback
• Preventing unnecessary renders

---

🧩 Challenges

Each lesson includes practical challenges to apply the concept.

Examples:

State Challenge

Build:

• Counter application
• Theme switcher
• User profile editor

---

API Challenge

Build:

• User list
• Search functionality
• Loading and error states

---

Forms Challenge

Build:

• Registration form
• Validation system
• Contact form

---

🎯 Learning Goals

By completing this repository, I aim to:

✅ Understand React fundamentals deeply

✅ Build reusable components

✅ Manage application state effectively

✅ Work with APIs

✅ Create scalable React structures

✅ Write cleaner and maintainable code

✅ Understand modern React development practices

✅ Prepare for real-world React projects

---

🚀 Running The Project

Clone Repository

git clone https://github.com/HaithamAbuDraz/react-learning-journey.git

Navigate

cd react-learning-journey

Install Dependencies

npm install

Start Development Server

npm run dev

---

📈 Progress

React Fundamentals

████████████████████ 100%

Lessons Completed: 15/15

Status: Completed ✅

---

🔮 Future Learning Path

After completing React fundamentals, the next advanced topics will include:

• TypeScript with React
• Advanced React Hooks
• React Design Patterns
• Redux Toolkit
• TanStack Query
• Authentication
• React + Node.js
• Next.js
• Advanced Performance Optimization
• Production React Applications

---

🏆 Repository Highlights

⭐ Structured learning path

⭐ Practical coding examples

⭐ Challenges for every topic

⭐ Clean folder organization

⭐ Git-based progress tracking

⭐ Beginner → Professional progression

---

👨‍💻 Author

Haitham Abu Draz

Software Engineering Student | React Developer

GitHub

LinkedIn

---

⭐ Support

If this repository helped you learn React, consider giving it a ⭐ on GitHub.

Learning never stops. Keep building 🚀