Skip to Content
Module Outline

React Fundamentals

Module Summary

This module introduces React, a powerful JavaScript library for building user interfaces, combined with TypeScript for enhanced type safety and developer experience. You will learn fundamental React concepts such as components, props, state management, hooks, event handling, conditional rendering, and list rendering, while leveraging TypeScript to create robust and maintainable applications. By the end of this module, learners will be able to build interactive web applications using React and TypeScript, implementing modern best practices and patterns.

Learning Objectives

By the end of this module, learners will be able to:

  • Set up and navigate a React + TypeScript development environment
  • Write and compose functional React components using TypeScript
  • Use JSX syntax and embed JavaScript expressions in UI code
  • Pass and type props, and use the children prop for composition
  • Manage component state with useState and update state immutably
  • Handle user events and implement the callback pattern for child-to-parent communication
  • Implement conditional rendering using various React patterns
  • Render lists dynamically and use keys correctly for performance and correctness
  • Build forms with controlled components and validation
  • Apply TypeScript features to enhance React development

Learning Outcomes

Upon completing this module, learners will be able to:

  • Build interactive web applications using React and TypeScript
  • Implement proper state management and data flow
  • Create type-safe components and handle user input
  • Apply modern React patterns and best practices
  • Debug and maintain React applications effectively

Module Outline

Lesson 1: Introduction to React & Development Environment

  • Time: 1.5 hours
  • Topics:
    • What is React? (library vs. framework, SPA vs. MPA)
    • The Virtual DOM
    • Component-based architecture
    • Setting up a React + TypeScript project with Vite
    • Project structure and key files
    • Running the dev server and using React DevTools
  • Activities:
    • Create a new React + TypeScript project with Vite
    • Explore the project structure
    • Run the dev server and make a change
    • Install and use React DevTools

Lesson 2: JSX Deep Dive

  • Time: 2 hours
  • Topics:
    • What is JSX and how it differs from HTML
    • Embedding JavaScript expressions in JSX
    • Key differences: attribute naming, self-closing tags, fragments
    • Inline styles in JSX
  • Activities:
    • Embed variables and expressions in JSX
    • Convert HTML snippets to valid JSX
    • Use fragments to return multiple elements

Lesson 3: Functional Components & Props

  • Time: 2 hours
  • Topics:
    • Writing functional components in TypeScript
    • Exporting/importing components
    • Component composition
    • Props and unidirectional data flow
    • Typing props with interfaces
    • Prop destructuring and the children prop
  • Activities:
    • Create a reusable Button component with typed props
    • Create a Section wrapper component using children
    • Compose components in App

Lab 1: Component Creation & Props

  • Time: 2 hours (asynchronous)
  • Overview:
    Build a set of reusable UI components for a company’s internal component library, focusing on component creation, TypeScript interfaces, prop handling, and composition.
  • Objectives:
    • Create reusable React components with TypeScript interfaces for props.
    • Implement proper prop handling and validation.
    • Use component composition effectively.
    • Apply TypeScript best practices for component development.
  • Activities:
    • Implement components such as AlertBox, UserProfileCard, and ProductDisplay.
    • Test different prop combinations and document usage.
    • Compose components and demonstrate prop passing and nesting.

Lesson 4: State Management with useState

  • Time: 2 hours
  • Topics:
    • What is state? Props vs. state
    • The useState hook: syntax and usage
    • Reading and updating state
    • Immutability in state updates (objects/arrays)
    • Typing state with TypeScript
  • Activities:
    • Build a simple counter with increment/decrement/reset
    • Create a toggle visibility component

Lesson 5: Handling User Events

  • Time: 1.5 hours
  • Topics:
    • Attaching event handlers in JSX
    • Event handler functions and inline handlers
    • React SyntheticEvent and typing events
    • Preventing default browser behavior
    • The callback pattern for child-to-parent communication
  • Activities:
    • Build a parent/child color picker with callback communication
    • Implement a form with controlled input and event handling

Lab 2: State & Events

  • Time: 2 hours (asynchronous)
  • Overview:
    Create an interactive character counter application that demonstrates state management and event handling in React.
  • Objectives:
    • Implement state management using the useState hook.
    • Create and handle user events effectively.
    • Build components that update their UI based on state changes.
    • Implement the callback pattern for component communication.
  • Activities:
    • Build a TextInput component for user input.
    • Build a StatsDisplay component for real-time statistics.
    • Compose components in a CharacterCounter parent.
    • Add progress indicators and responsive UI.

Lesson 6: Conditional Rendering

  • Time: 2.5 hours
  • Topics:
    • Why conditional rendering is needed
    • Using if/else outside JSX
    • Ternary operator and logical AND in JSX
    • Returning null to render nothing
    • Choosing the right technique for the scenario
  • Activities:
    • Build a Toggler component using ternary and &&
    • Build a ContentSwitcher component using if/else

Lesson 7: Rendering Lists

  • Time: 3 hours
  • Topics:
    • Using .map() to render lists from data
    • The key prop: why and how to use it
    • Choosing good keys and anti-patterns (index as key)
    • Rendering lists of objects and components
  • Activities:
    • Render a list of user profiles with unique keys
    • Add/remove items from a list and observe key behavior

Lab 3: Lists, Keys, and Conditionals

  • Time: 2 hours (asynchronous)
  • Overview:
    Build a Task Management application that demonstrates dynamic list rendering, proper key usage, and conditional rendering.
  • Objectives:
    • Create components that render lists of data with proper key management.
    • Implement filtering and sorting of list items.
    • Use conditional rendering to show different states based on item properties.
    • Apply TypeScript interfaces for type safety.
  • Activities:
    • Implement TaskList, TaskItem, and TaskFilter components.
    • Add filtering, sorting, and visual feedback for task properties.
    • Compose components to create a complete task management interface.

Lesson 8: Basic Forms

  • Time: 2 hours
  • Topics:
    • Controlled components and form state
    • Handling different input types (text, textarea, select, checkbox)
    • Form submission and preventDefault
    • Managing state for multiple inputs
    • TypeScript for form state and events
  • Activities:
    • Build a contact form with controlled inputs and validation
    • Practice managing multiple form fields

Final Assessments

Skills-Based Assessment (SBA)

  • Time: 3.5 hours (in class) + 2 hours (outside class)
  • Format: Practical project
  • Activity: Build a Task Management Dashboard using React and TypeScript. Implement components, state management, forms, and proper TypeScript integration.
  • Deliverable: Submit the project via GitHub and provide a reflection on the implementation approach.

Knowledge-Based Assessment (KBA)

  • Time: 1.5 hours (asynchronous)
  • Format: 30 multiple-choice questions
  • Coverage: React components, state management, forms, conditional rendering, and component patterns
  • Focus: Practical understanding of React concepts through scenario-based questions and code snippets

Total Module Time: 22 hours

Lesson 1: Introduction to React & Development Environment