Web Development · Intermediate level

Intermediate level · Module 5 of 6 · 13 guided hours

Connecting Front End and API

Connect the React front end to the Express API for reading and writing data, handling errors, CORS and configuration for different environments.

Learning objectives

  • Read and write data from the front end through the API
  • Show server validation errors and handle failures
  • Configure CORS and environment-specific API addresses

Topics

  • API client module
  • POST from forms
  • displaying server errors
  • CORS
  • development proxy
  • environment configuration

Lessons

  1. Lesson 1 An API Client for the Front End

    Put all API calls in one module with shared error handling, and use it from React components.

    API client modulebase URLshared error handlingseparation of concerns

  2. Lesson 2 Submitting Forms and Showing Server Errors

    Send form data to the API, show progress and display server-side validation errors next to the right fields.

    POST with JSONsubmitting statefield error mappingsuccess feedback

  3. Lesson 3 CORS and Environments

    Understand cross-origin requests and configure the front end and API for development and production.

    originCORS headersdevelopment proxyenvironment variables in front-end builds

Practical activity

Connect the catalogue front end to the API: load courses, submit enquiries and display server-side validation errors next to the form fields.

Expected outcomes

  • A working full-stack feature
  • Clear handling of cross-origin and environment issues

Assessment

Practical demonstration of the full enquiry flow, including a server-side validation error and a server that is down.

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.