Front End Web Development Using React

The course curriculum is built around a single comprehensive module — FS React — that systematically covers all major aspects of React development. The module begins with an introduction to React, explaining its purpose, architecture, and role in building single-page applications. Learners progress through setting up a React environment using package managers, Webpack, and Create React App before diving into components, component types, states, and lifecycle methods. The curriculum then advances to event handling, conditional rendering, lists and keys, and forms. Learners gain experience making API calls from React, before exploring reconciliation, Refs, DOM interaction, fragments, higher-order components, error boundaries, and portals. The module concludes with React Hooks, React Router, Redux integration, and both unit and integration testing using React Testing utilities.

The FS React module is the sole and complete curriculum unit, structured as a progressive series of lessons. It opens by establishing the conceptual foundation of React — what it is, how it works, and why it is used — before guiding learners through writing their first React code and setting up a development environment with a package manager and Webpack. The Create React App tool is introduced to streamline project scaffolding. Learners then study components in detail — functional and class-based — followed by an in-depth treatment of state management and component lifecycle, including lifecycle methods and their practical application in code. The middle section covers event handling, conditional rendering, list rendering with keys, and building forms in React across two dedicated lessons each. Learners then learn how to reach out to external APIs, understand React's reconciliation algorithm, and manipulate the DOM using Refs. Advanced structural patterns — fragments, higher-order components, error boundaries, and portals — are covered before the module moves into React Hooks across two lessons, emphasising their importance in modern React development. The module concludes with two lessons on React testing, an introduction to React Router followed by its implementation, and three lessons on integrating Redux — covering the introduction, core concepts, and actual implementation in code.