⚛️ React Core — TypeScript & Modern React Fundamentals

🚀 Building Strong React Foundations with TypeScript

A hands-on learning repository covering React Components, TSX, Props, Rendering, Events, State Management, API Integration, Hooks, Suspense, and Component-Based Thinking.

---

📖 About This Repository

This repository is part of my Programming Hero React learning journey.

The goal is to build a strong foundation in React with TypeScript by understanding how React applications are structured, how components communicate, how state works, and how applications interact with APIs.

Rather than only learning syntax, this repository focuses on developing a component-based mindset and understanding how React works internally at a practical level.

---

🎯 Learning Progress

React Fundamentals
        │
        ▼
   Components
        │
        ▼
    JSX / TSX
        │
        ▼
       Props
        │
        ▼
Conditional Rendering
        │
        ▼
    List Rendering
        │
        ▼
   Event Handling
        │
        ▼
  State Management
        │
        ▼
     useState
        │
        ▼
    API / Fetch
        │
        ▼
     useEffect
        │
        ▼
     use() API
        │
        ▼
   React Suspense
        │
        ▼
 Thinking in React

---

📚 Modules & Topics

🧩 Module 27 — React Core Fundamentals

Lesson	Topic	Status
27-1	What is React & React vs Next.js with TypeScript	✅
27-2	Components, Component Types & First Component	✅
27-3	JSX with TypeScript & Dynamic Content	✅
27-4	JSX & CSS in Components	✅
27-5	Passing & Reading Props	✅
27-6	Component Import/Export & TypeScript Props	✅
27-7	Conditional Rendering	✅
27-8	Rendering Lists with map()	✅

🔑 Core Concepts

Components
    ↓
JSX / TSX
    ↓
Props
    ↓
Conditional Rendering
    ↓
List Rendering
    ↓
Reusable UI

---

⚡ Module 28 — Events, State, APIs & Hooks

Lesson	Topic	Status
28-1	Vite Setup & Folder Structure	✅
28-2	Event Handling Patterns	✅
28-3	React State & Re-rendering	✅
28-4	useState Hook	✅
28-5	API Fundamentals	✅
28-6	Fetch, Async/Await & React Suspense	✅
28-7	Users & Posts API Data	✅
28-8	useEffect & Dependencies	✅
28-9	Thinking in React	✅

🔑 Core Concepts

Events
  ↓
State Management
  ↓
useState
  ↓
API Request
  ↓
Async/Await
  ↓
use() API
  ↓
useEffect
  ↓
Data Rendering
  ↓
Component Architecture

---

🛠️ Tech Stack

Technology	Purpose
⚛️ React	Building reusable UI components
🔷 TypeScript	Type-safe React development
⚡ Vite	Modern development environment
🟨 JavaScript ES6+	Programming fundamentals
🎨 CSS3	Component styling
🌐 REST API	Fetching external data
🔄 Fetch API	HTTP requests
🪝 React Hooks	State & side-effect management
🧩 React Suspense	Handling asynchronous UI

---

📊 Progress Dashboard

🏆 Learning Milestones

Area	Progress
React Fundamentals	██████████ 100%
Components	██████████ 100%
JSX / TSX	██████████ 100%
Props	██████████ 100%
Conditional Rendering	██████████ 100%
List Rendering	██████████ 100%
Event Handling	██████████ 100%
State Management	██████████ 100%
API Integration	██████████ 100%
React Hooks	██████████ 100%

---

🧠 Key Concepts Learned

⚛️ Components

Understanding how React applications are divided into small, reusable UI components.

🧱 JSX / TSX

Writing dynamic UI using JSX while taking advantage of TypeScript's type safety.

📦 Props

Passing data from parent components to child components and defining proper TypeScript prop types.

🔀 Conditional Rendering

Using different approaches to render UI conditionally:

{condition && <Component />}

{condition ? <Success /> : <Error />}

if (!condition) {
  return <Component />;
}

🔁 List Rendering

Rendering dynamic collections using map().

users.map(user => (
  <UserCard key={user.id} user={user} />
))

🖱️ Event Handling

Working with React events such as:

onClick
onChange
onSubmit
onMouseEnter

🔄 State Management

Understanding how state changes trigger React components to re-render and update the UI.

🪝 useState

Managing component-level state:

const [count, setCount] = useState(0);

🌐 API Integration

Fetching external data using the Fetch API and handling asynchronous operations with Promises and async/await.

Also exploring React's use() API for reading Promises directly inside components.

Using async/await

const response = await fetch(url);
const data = await response.json();

async function getData () {
  const response = await fetch(url);
  const data = await response.json();

  return data;
};

const getData = async function () {
  const response = await fetch(url);
  const data = await response.json();

  return data;
};

const getData = async () => { 
  const response = await fetch(url);
  const data = await response.json();

  return data; 
};

Working with Promises + use()

const dataPromise = fetch(url)
  .then(response => response.json());

const data = use(dataPromise);

This helped me understand how Promises represent asynchronous operations, how async/await simplifies working with Promises, and how React's use() API can read a Promise directly inside a component.

🪝 use() API

Exploring React's use() API for reading Promises and Context directly inside components and using it with React Suspense for handling asynchronous data.

use() → Reads a resource such as a Promise or Context and returns its value.

const users = use(usersPromise);

🔁 useEffect

Understanding side effects, dependency arrays, and synchronization with external systems.

useEffect() → Performs side-effect logic after rendering, such as synchronizing with external systems.

useEffect(() => {
  // side effect logic
}, []);

🧠 use() vs useEffect()

use()
 ↓
READ a resource
 ↓
Promise / Context
 ↓
Returns the value / data


useEffect()
 ↓
PERFORM a side effect
 ↓
After rendering
 ↓
Synchronize with external systems

🧩 Thinking in React

Learning to break a UI into a hierarchy of components and think about:

UI
 ↓
Components
 ↓
Props
 ↓
State Management
 ↓
Events
 ↓
Data Flow

---

📂 Project Structure

src/
│
├── assets/
│
├── components/
│   ├── ...
│   └── ...
│
├── App.tsx
├── main.tsx
└── ...
│
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

The project structure may evolve as new React concepts and exercises are added.

---

🚀 Getting Started

1️⃣ Clone the repository

git clone https://github.com/marleyDip/Programming-Hero_Milestone-05_Module-28-29_React-Core_Components-TSX-Props-Rendering-Events-State.git

2️⃣ Navigate into the project

cd Programming-Hero_Milestone-05_Module-28-29_React-Core_Components-TSX-Props-Rendering-Events-State

3️⃣ Install dependencies

npm install

4️⃣ Start the development server

npm run dev

5️⃣ Open the local development URL

http://localhost:5173

---

💡 What I Can Build After This

These fundamentals create the foundation for more advanced React development:

React Core
    │
    ├── Advanced React Hooks
    │
    ├── React Router
    │
    ├── Context API
    │
    ├── Custom Hooks
    │
    ├── Redux Toolkit
    │
    ├── API Architecture
    │
    ├── Authentication
    │
    ├── Form Management
    │
    └── Full-Stack Applications

---

📈 Learning Journey

JavaScript
     │
     ▼
ES6+
     │
     ▼
TypeScript
     │
     ▼
React Fundamentals
     │
     ▼
Components + JSX
     │
     ▼
Props + Events
     │
     ▼
State + Hooks
     │
     ▼
API Integration
     │
     ▼
Advanced React 🚀

---

🎓 Learning Source

This repository was created as part of my Programming Hero learning journey.

The focus is on learning concepts through:

• 📖 Understanding
• 💻 Coding
• 🧪 Experimentation
• 🐛 Debugging
• 🔄 Refactoring
• 🚀 Building

---

🌟 Repository Goals

• Understand React fundamentals
• Build reusable components
• Work with JSX / TSX
• Use TypeScript with React
• Pass and type props
• Implement conditional rendering
• Render dynamic lists
• Handle React events
• Understand state and re-rendering
• Use useState
• Fetch API data
• Work with async/await and Promises
• Use use() API
• Use useEffect
• Explore React Suspense
• Develop a component-based mindset

---

🏁 Final Takeaway

Don't just learn React — learn to think in React. ⚛️

This repository represents another step in my journey toward becoming a stronger Full-Stack Developer by building a solid foundation in modern React and TypeScript.

---

⚡ Learn → Build → Debug → Refactor → Repeat

Made with ❤️ while learning React + TypeScript

⭐ If you find this repository useful, feel free to explore the code and follow the learning journey.

---

👨‍💻 Author

✨ Md. Sofian Hasan ✨

Software Engineer | Full-Stack (MERN / PERN) Developer

 

Passionate about building modern, scalable, and user-focused web applications while continuously improving JavaScript, TypeScript, React, problem-solving, and full-stack development skills.

🚀 Tech Focus