Week 4: React Fundamentals

Frontend

Introduction to React components, props, state, and hooks. Building your first React application.

Learning Objectives

Detailed Schedule

Session 1: React Fundamentals (1 hour)

React Basics (25 minutes)

  • Introduction to React and JSX
  • Component-based architecture
  • Functional components
  • Props and component communication

Component Lifecycle (20 minutes)

  • Component mounting and unmounting
  • State and props updates
  • Event handling in React

Practice Exercise (15 minutes)

Create basic React components with props and event handling

Session 2: React Hooks (1 hour)

useState Hook (25 minutes)

  • State management with useState
  • State updates and re-rendering
  • Form handling with state
  • State immutability principles

useEffect Hook (20 minutes)

  • Side effects in React
  • useEffect dependencies
  • Cleanup functions

Practice Exercise (15 minutes)

Build interactive components using useState and useEffect hooks

Session 3: Component Architecture (1 hour)

Component Composition (25 minutes)

  • Component composition patterns
  • Children props and composition
  • Higher-order components
  • Render props pattern

State Management (20 minutes)

  • Lifting state up
  • Context API basics
  • State sharing between components

Practice Exercise (15 minutes)

Create a component library with composition and state management

Key Concepts

React Components

  • • Functional vs Class components
  • • Component composition
  • • JSX syntax and rules
  • • Component lifecycle

State Management

  • • useState hook
  • • useEffect hook
  • • State updates and re-renders
  • • Side effects management

Props & Data Flow

  • • Passing props between components
  • • Prop types and validation
  • • Unidirectional data flow
  • • Lifting state up

Event Handling

  • • React event system
  • • Event handlers and callbacks
  • • Form events and validation
  • • Preventing default behavior

Hands-on Activities

Activity 1: Component Library

Build a reusable component library including Button, Card, and Input components.

Components Props JSX

Activity 2: Counter App

Create an interactive counter with increment, decrement, and reset functionality.

useState Event Handling State Updates

Activity 3: Contact Form

Build a contact form with validation and form submission handling.

Forms Validation Controlled Components

Activity 4: Todo List

Create a todo list with add, edit, delete, and mark as complete functionality.

Lists Keys CRUD Operations

Weekly Project: Social Media Dashboard

Project Overview

Build a social media dashboard that displays user posts, comments, and engagement metrics using React components and state management.

Features:

  • User profile display
  • Post feed with interactions
  • Comment system
  • Like/unlike functionality
  • Post creation form
  • Real-time engagement metrics

Technical Requirements:

  • Functional components with hooks
  • State management with useState
  • Form handling and validation
  • Component composition
  • Responsive design
  • Local storage integration

Project Structure:

src/
├── components/
│   ├── Header.jsx
│   ├── UserProfile.jsx
│   ├── PostFeed.jsx
│   ├── Post.jsx
│   ├── Comment.jsx
│   ├── CreatePost.jsx
│   └── EngagementMetrics.jsx
├── hooks/
│   └── useLocalStorage.js
├── data/
│   └── mockData.js
└── App.jsx

Assessment Criteria

Technical Skills (60%)

  • Proper use of React components and JSX (15%)
  • Effective state management with hooks (20%)
  • Form handling and validation (15%)
  • Component composition and reusability (10%)

Project Quality (40%)

  • Code organization and structure (15%)
  • User interface and experience (15%)
  • Functionality and features (10%)

Teaching Resources

Code Examples:

Additional Resources: