React

React is an open-source JavaScript library (not a framework) maintained by Meta for building interactive user interfaces through a component-based, declarative programming model. It underpins the single-page-application architecture used in the Burger Builder project.

---

Core Concepts

Components

The fundamental unit of React UIs. A component is a function or class that accepts props and returns JSX (a JavaScript syntax extension that looks like HTML). The burgerApp distinguishes two categories:

• Presentational components (src/components/) — receive data via props, render UI, raise events via callback props; have no knowledge of redux or application state.
• Container components (src/containers/) — connected to the Redux store via connect(); retrieve state and dispatch actions.

Virtual DOM

React maintains an in-memory representation of the DOM. On each state change it re-renders the affected component tree to this virtual DOM, diffs the result against the previous snapshot, and applies only the minimal set of real DOM mutations. This makes frequent small updates fast.

Lifecycle Methods (Class Components)

Key lifecycle hooks used in the burgerApp:

Method	When it runs	Used for
componentDidMount	After first render	Fetching data (initIngredients), auto-sign-in check
render	On every state/prop change	JSX output
setState	Called by component	Triggers re-render with merged state delta

Props & State

• Props — immutable inputs passed from parent to child. The only way for a parent to communicate with a child.
• State — mutable data owned by a component (or the Redux store). Mutating state with setState() schedules a re-render.

JSX

JSX compiles to React.createElement() calls via Babel. It allows HTML-like syntax inside JavaScript but requires: className instead of class, camelCase event names (onClick, onChange), and explicit closing tags.

---

Pattern: Higher-Order Components

A higher-order component (HOC) is a function that takes a component and returns an enhanced component. See higher-order-components for details. Examples in burgerApp: withErrorHandling, withRouter.

---

React Router

Client-side navigation is handled by react-router (BrowserRouter, Route, Switch, withRouter). Routes map URL paths to container components without any full-page reload.

---

Redux Integration

The burgerApp connects React to redux via react-redux:

• <Provider store={store}> wraps the app and makes the store accessible everywhere.
• connect(mapStateToProps, mapDispatchToProps) generates a connected container from a presentational component.

---

Version in burgerApp

React 17.0.2 (October 2020). Key characteristics of this era:

• Class components are the primary pattern (hooks exist but the course predates hook-first teaching).
• No concurrent mode / Suspense in use.
• Webpack 3 build toolchain (ejected from Create React App).

---

See Also

• redux — state management used alongside React
• react-router — routing companion library
• single-page-application — architectural pattern React enables
• higher-order-components — composition pattern used in the burgerApp
• schwarzmuller-2021-react-burger-app — source repo