This fast-paced course equips you with the skills to build modern web applications using React, no prior React experience required.

By the end of this course, you will be able to develop dynamic Web Applications with React, utilizing the latest features and best practices:

• Build reusable, functional components and work with props, state, and hooks.
• Leverage modern routing solutions to create dynamic, multi-page experiences.
• Master modern testing practices to ensure reliability and maintainability.
• Implement efficient form handling with validation and advanced techniques.
• Explore and create custom hooks to encapsulate reusable logic.
• Understand and apply rendering techniques (client-side, server-side, and static rendering).
• Follow industry best practices for testing, performance optimization, and maintainability.
• Gain a deep understanding of React's architecture, principles, and evolution.
• Be aware of popular tools, frameworks, and component libraries used by React developers today.

Through hands-on labs and a non-trivial/real-world recipe application project, you'll tackle practical challenges and learn to implement robust solutions for modern React applications.

Students for this course should be familiar with JavaScript and have a strong understanding of HTML/CSS. Ideally people are familiar with ES6 (arrow functions, import/export, classes, fetch API). The course uses TypeScript so it is helpful students are already familiar with that. In addition, students beneift if they are familiar with a more "Functional" way of developing JavaScript/TypeScript. We recommend to follow our Introduction to Modern JavaScript and Introduction to TypeScript courses before.

Introduction

• Understand the rationale behind React
• Define the scope of the React library
• Understand the overall architecture of React,
• Understand its component-based design
• Explore how React adheres to Declarative programming principles and incorporates concepts from Functional Programming.
• Contrast with other popular frameworks and libraries (e.g., Vue, Angular, Svelte)
• Introduce foundational concepts: Elements, Components, JSX, Props, State, and Hooks.
• Understand client-side rendering and server-side rendering (SSR) as a techniques supported by React's architecture.
• Understand the virtual DOM, the reconciliation process, and its impact on performance.
• Discuss modern toolchains (emphasizing Vite and Create React App), along with considerations for new projects.
• Recap important ES6+ features critical for React development
• Discuss styling options, including CSS Modules, SASS, Styled Components, and Tailwind CSS

Elements, JSX and Components

JSX and Elements

• Understand the JSX syntax and how it simplifies rendering logic
• Explore what JSX transpiles/compiles into (and its relationship to createElement)
• Embed JavaScript expressions and functions inside JSX for dynamic rendering
• Perform conditional rendering using different techniques (ternary operators, logical AND, and * *immediately invoked function expressions (IIFEs)**)
• Learn how to create dynamic class lists efficiently and discuss tools (e.g., clsx and classnames)
• Work with lists in JSX
• Recognize the importance of providing a unique key when rendering lists and the potential issues with improper key usage

Introduction to Components, Props, State and Life-cycle

Although class-based components are no longer the primary choice for building applications, we include them in this introduction to provide a historical perspective and a deeper understanding of React's principles and lifecycle methods. This foundational knowledge is crucial for grasping how React operates and how React evolved. After covering class-based components, we will focus on writing modern functional components and utilizing hooks.

• Define ES6 class components and understand their structure.
• Learn about the constructor, state, and lifecycle methods in class components.
• Understand what components transpile to and their role in building user interfaces.
• Discuss composing a User Interface into components.
• Introduce the concepts of state and the lifecycle
• Understand the difference between props and state
• Changing/merging state using setState
• Understand the relation between setState and render
• Understand the React Life-cycle
• What triggers state transitions (between mounted, update and unmounted)
• Explain callback handlers (e.g., componentDidMount, getDerivedStateFromProps etc...)
• How to deal with state based on side effects (e.g., fetching data)

Components (Functional)

• Define functional components and compare them with class components.
• Work with props to pass data into components.
• Understand and use the children prop for component composition.
• Add type information to a component's props using TypeScript (and PropTypes for vanilla ES projects).
• Discuss (legacy) patterns: Higher-Order Components (HOCs) and Render Props

Testing

Testing is a crucial part of building reliable and maintainable applications. In this session, we introduce modern testing practices to ensure your components work as intended and continue to do so as your application evolves. By learning testing early, you'll integrate it into your workflow and use it to drive development throughout the course.

• Understand the different types of tests: unit, integration, and end-to-end (e2e)
• Introduce and use React Testing Library to test components
• Write unit tests for components
• Best practices for writing tests for components
• Simulate user interactions and assert expected DOM updates
• Use Jest for assertions, mocking, and running tests
• Mock APIs and external dependencies for isolated tests
• Use snapshot testing to detect unintended UI changes
• Setup e2e testing (e.g., Cypress) with a React Project

Hooks

Overview

We explain most of the hooks here. Some specialized hooks, such as routing or form hooks, are explained in their respective sections.

• Introduce React Hooks
• Understand how Hooks impact application design
• Introduce and use the useState hook for managing local component state
• Introduce and use the useContext hook for accessing context values
• Introduce and use the useEffect hook for handling side effects
• Introduce and use the use hook to work with promises
• using the use hook for effects and context
• When to use the use hook vs useEffect for effects
• Use useOptimistic to "optimistic" (immediately) UI updates
• useRef: Accessing and interacting refs to values (mutable values without re-render, such as DOM Elements)
• using forwardRef render function to expose refs to parent components
• Discuss additional hooks:
  • useCallback: Memoizing functions to prevent unnecessary re-renders
  • useMemo: Memoizing (explicit) for performance optimization
  • useLayoutEffect for reading layout (e.g., measurements)
  • useImperativeHandle to customize the ref value exposed to parent components
  • useReducer: Managing complex state logic

Building Custom Hooks

Learn how to build custom hooks to encapsulate reusable logic and promote clean, maintainable code. This lesson demonstrates how to abstract complex logic into hooks that integrate seamlessly with functional components.

• Recognize when to build custom hooks
• Learn how custom hooks work by combining other React hooks like useState, useEffect, and useContext.
• Use custom hooks for fetching data
• Explore how to share stateful logic between components using custom hooks
• Discuss best practices for custom hooks
• Adding unit tests for custom hooks:

Routing

• Discuss different routing libraries
• Introduce and use react-router (including different routers)
• Define routes using the <Routes> and <Route> components
• Explore various route matching techniques
• Implement path parameters for dynamic routing
• Define nested routes to create hierarchical navigation structures (and the <Outlet> component)
• Use the different rendering techniques (element and children)
• Imperative navigation using the useNavigate hook
• Get information about your route using hooks (e.g, useHref, useParams, useLocation, useMatch, …)
• Use declarative navigation (Link, NavLink, Navigate, etc.)
• Using custom Location objects
• Passing state with the state property in navigation

Forms

• Understand controlled and uncontrolled components
• Create and manage controlled components
• Work with various form elements in React (input, select, textarea, checkbox, radio, etc.).
• How to handle form submit
• Adding standard HTML validation
• Using Schema Validation (using *Yup, Zod, …)
• Use useActionState hook for form handling
• useFormStatus hook to access parent form submission status
• Introduction React Hook Form for building forms

Next.js (Brief Introduction)

• Understand what Next.js is and its role in modern React development
• Learn the different rendering techniques in (Server-Side/SSR, Static/SSG and ISR, Client-side/CSR)
• Explore dynamic data techniques using getServerSideProps, getStaticProps, and getStaticPaths
• Compare the Pages Router and the App Router, and understand when to use each
• Discuss powerful data fetching and caching techniques
• Adding an API to your Next.js project