React Foundation

Understand why React is used to build interfaces and how a React application differs from the HTML, CSS, and JavaScript approach you have already used.

Understand what a React component is, why interfaces are divided into components, and how a component represents a reusable part of an interface.

Create a simple React component and render it as part of an application.

Combine multiple React components to build a complete interface from smaller, meaningful parts.

Identify the responsibilities of different parts of a React interface and decide which parts should become separate components.

Create React components in separate files and import them into the main application so the interface remains organised and easy to maintain.

Reuse a React component in multiple places to avoid duplicating interface markup and keep repeated UI consistent.

Build a small React interface by organising meaningful UI sections into separate components and composing them into one application.

Understand how JSX describes the structure of a React interface and apply its basic syntax rules when writing a component.

Embed JavaScript Expressions in JSX

Use JSX attributes to configure elements, apply CSS classes, and provide information required to display images correctly.

Work with JSX Elements and Fragments

Understand how props allow a parent component to pass data to a child component and influence what the child displays.

Pass multiple values from a parent component to a child component and use those props to display different content in a reusable React interface.

Use JavaScript object destructuring to access individual props directly in a React component.

Pass string, number, and boolean values as props and use those values appropriately inside a React component.

Provide default values for optional props so a React component can display meaningful content when a parent does not supply those values.

Build a reusable React interface by passing and destructuring props, using different value types, and providing default values for optional content.

Handle a button click in React by attaching an event handler that executes when the user interacts with the button.

Define event handler functions inside a React component and connect different handlers to the appropriate interface elements.

Pass specific values to an event handler when a user interacts with a React element by using an arrow function in the event attribute.

Handle text input events in React and read the current input value from the event object.

Combine button-click and input event handlers to respond to different user interactions within a React interface.

Understand how React state stores changing information in a component and how updating state causes React to render the interface with the new value.

Use React's `useState` hook to initialise a state variable and update its value through the setter function.

Explain how updating React state triggers a re-render and how the component uses the updated state value to produce the interface.

Update React state using a functional setter that receives the previous state value and returns the next value.

Manage multiple independent state values in a React component and update each value through its own state setter.

Update React state through its setter function rather than directly assigning a new value to the state variable.

Build an interactive React counter that displays state and supports increasing, decreasing, and resetting its value through state updates.

Use React state to store text entered by a user and update the interface as the input value changes.

Manage multiple form input values using React state and display the current values in a live profile preview.

Build an interactive React interface that uses state and user events to update displayed information and status messages.

Render an array of data as a list of React elements using JavaScript's `map()` method.

Assign unique, stable keys to elements rendered from arrays so React can identify individual items when a list changes.

Use JavaScript conditional expressions in JSX to display different interface content based on a value or condition.

Use JavaScript's logical AND (`&&`) operator in JSX to render an element only when a specified condition is true.

Use JavaScript conditional logic inside a React component to render different interface messages for multiple possible states.

Render a list of data in React and use conditional expressions to display appropriate content when the list contains items or is empty.

Render a collection of objects in React by accessing multiple properties from each object and displaying them in a structured interface.

Combine list rendering and conditional expressions to display structured data and show different content according to each item's properties.

Build a small React interface that combines array rendering, object properties, stable keys, and conditional UI to display data-driven content.

Choose appropriate conditional expressions and combine them with list rendering to display data-driven interface elements for different item states.

Explain how HTML forms collect user input and how React can handle form submission to respond to user-provided information.

Use React state to store a form input's value and update the interface as the user types.

Manage multiple controlled form inputs using React state and display their current values together in a live preview.

Handle React form submission by reading the current input values, preventing the browser's default submission behaviour, and displaying the submitted information.

Validate required form fields during submission and display appropriate feedback when input is missing or the form is submitted successfully.

Build a complete React form that combines controlled inputs, state management, submission handling, basic validation, and conditional feedback.

Identify the main parts of a small React application and decide how to divide its interface into components based on their responsibilities.

Compose a React interface by rendering multiple function components inside a parent component and organising them into a meaningful page structure.

Pass data from a parent component to child components through props so that the same component can display different content based on the data it receives.

Use React state and event handlers to capture a user interaction, update application data, and display the updated interface.

Render a collection of learning goals from an array of objects and display appropriate status messages based on the current collection data.

Build a controlled React form that validates user input and adds a new learning goal to a state-managed collection, updating the list and summary automatically.

Apply CSS to a React application using `className`, an imported stylesheet, and basic layout, spacing, typography, and colour rules to create a clear and usable interface.

Build and verify a complete interactive React application by integrating reusable components, props, state, event handling, dynamic lists, form validation, conditional UI, and CSS styling.