Web Development · Intermediate level

Intermediate level · Module 3 of 6 · 18 guided hours

Component-Based Front Ends with React

Build interfaces from React components with props, state, events and data fetching, and add client-side routing.

Learning objectives

  • Build React components with JSX and props
  • Manage state and handle events and forms
  • Fetch data with effects and add routing

Topics

  • why components
  • creating a project with Vite
  • JSX and props
  • useState and events
  • controlled forms
  • useEffect and data fetching
  • React Router

Lessons

  1. Lesson 1 Components, JSX and Props

    Create a React project, write components with JSX and pass data down with props.

    componentJSXpropskey for list items

  2. Lesson 2 State, Events and Forms in React

    Make components interactive with state and events, and build controlled forms.

    useStateevent handlerscontrolled inputlifting state up

  3. Lesson 3 Effects, Data Fetching and Routing

    Load data from an API with useEffect, handle loading and errors, and add pages with client-side routing.

    useEffectdependency arrayloading and error stateReact Router

Practical activity

Build the course catalogue front end: course cards from data, a search box, a course detail page and an enquiry form.

Expected outcomes

  • Working React applications
  • A component-based way of thinking about interfaces

Assessment

Practical: build two components and a route for a provided design; marked on behaviour, structure and accessibility.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.