freeCodeCamp Front End Development Libraries Syllabus

How does inheritance work in Sass with @extend?

@extend lets one selector inherit all the styles of another and then add or override rules: .info-important { @extend .info; background-color: red; }. Sass compiles this by adding the extending selector to the original rule set, avoiding duplicated CSS.

What is JSX and how does it become executable JavaScript in a React app?

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript, with JavaScript expressions embedded in curly braces { }. Browsers cannot run JSX directly — a transpiler such as Babel compiles it into React.createElement() calls (plain JavaScript).

State three syntax rules JSX imposes that differ from plain HTML.

(1) A component must return a single parent element — sibling elements must be wrapped (e.g., in a div or Fragment). (2) HTML attributes use camelCase and reserved words are renamed: class → className, for → htmlFor, onclick → onClick. (3) Every element must be closed; void elements are self-closed like <br /> and <img />.

Compare a functional (stateless) React component with a class component, and state the naming rule both must follow.

A functional component is a JavaScript function that receives props and returns JSX. A class component extends React.Component, requires a constructor calling super(props), holds this.state, and returns JSX from its render() method. Both must be named with a capital first letter so React treats them as components, not HTML tags.

In React, what are props, and how do you access a prop named user in a functional component versus a class component?

Props are read-only inputs passed from a parent to a child component as JSX attributes (<Child user={name} />). In a functional component access it as props.user (from the function argument); in a class component as this.props.user. A child must never modify its own props.

How do you initialize state and update it correctly in a React class component?

Initialize in the constructor: this.state = { count: 0 }. Update only with this.setState({ count: 1 }) — never assign to this.state directly, because setState triggers a re-render while direct mutation does not.

Why should you pass a function to setState when the new state depends on the previous state?

Because setState is asynchronous and React may batch multiple calls, this.state may be stale when read. Passing this.setState((prevState, props) => ({ count: prevState.count + 1 })) guarantees the update computes from the most recent state.

What do the React lifecycle methods componentDidMount and componentWillUnmount do, and give a typical use for each.

componentDidMount runs once, right after the component is first rendered into the DOM — typically used for API calls, setting up timers, or attaching event listeners. componentWillUnmount runs just before the component is removed — used to clean up timers, listeners, and subscriptions to prevent memory leaks.

What is a controlled input (controlled component) in React?

A form element whose value is driven by React state: its value attribute is set from state (value={this.state.input}) and an onChange handler calls setState with each keystroke. React state, not the DOM, becomes the single source of truth for the input's value.

What does 'unidirectional data flow' mean in React, and how do parent and child components share data?

State flows one way — down the component tree. State lives in a parent (often lifted to the closest common ancestor) and is passed to children as props; children send data back up by calling callback functions that the parent passed down as props. Children never modify parent state directly.

How does event handler syntax in React JSX differ from plain HTML, and why must class-component handlers often be bound?

React events use camelCase and take a function reference in braces: <button onClick={this.handleClick}> (not onclick="handleClick()"). In class components, this inside a handler is undefined unless bound — typically this.handleClick = this.handleClick.bind(this) in the constructor, or by defining the handler as an arrow function.

Why do you write onClick={handleClick} and not onClick={handleClick()} in React?

Braces must contain a function reference for React to call later when the event fires. Writing handleClick() invokes the function immediately during render, running it on every render and passing its return value (often undefined) as the handler.

Give three techniques for conditional rendering in React JSX.

(1) An if/else statement outside the return that returns different JSX. (2) The logical && operator inline: {condition && <Element />} renders the element only when condition is true. (3) The ternary operator inline: {condition ? <A /> : <B />}. A component can also return null to render nothing.

How do you render a list of items in React, and what special prop is required?

Use Array.prototype.map to transform data into JSX elements: {items.map(item => <li key={item.id}>{item.text}</li>)}. Each sibling element needs a unique, stable key prop so React can efficiently identify which items changed, were added, or removed during reconciliation. Array indexes are a poor key choice when the list can reorder.

In Redux, what is the store, how is it created, and what principle does it embody?

The store is the single object holding the entire application state — the 'single source of truth.' It is created with Redux.createStore(reducer), taking the root reducer as its argument. An app has exactly one store.

What is a Redux action, and what is an action creator?

An action is a plain JavaScript object that must have a type property describing what happened (e.g., { type: 'ADD_TODO', payload: text }); it may carry extra data. An action creator is simply a function that returns an action object, e.g., const addTodo = text => ({ type: 'ADD_TODO', payload: text }).

Define a Redux reducer and state the two purity rules it must obey.

A reducer is a function (state, action) => newState that computes the next state from the current state and an action. It must (1) be pure — no side effects, API calls, or randomness — and (2) never mutate state; it returns a new object (e.g., using {...state, prop: value} or [...arr, item]) or returns the existing state unchanged for unknown action types.

What does Redux's combineReducers do?

It merges multiple reducers — each managing its own slice of state — into one root reducer to pass to createStore: combineReducers({ auth: authReducer, notes: notesReducer }). The keys become the top-level state properties, so state.auth is managed by authReducer.

Name the three core Redux store methods and what each does.

store.dispatch(action) sends an action to the store, running the reducer to produce new state. store.getState() returns the current state object. store.subscribe(listener) registers a callback that runs after every dispatched action (returns an unsubscribe function).

How does Redux handle asynchronous actions such as API requests?

With middleware — most commonly redux-thunk, installed via createStore(reducer, applyMiddleware(ReduxThunk)). A thunk action creator returns a function that receives dispatch, letting you dispatch a 'requesting' action, perform the async work, then dispatch a 'received' action with the data when it resolves.

State the three principles of Redux.

(1) Single source of truth — all app state lives in one store. (2) State is read-only — the only way to change it is to dispatch an action. (3) Changes are made with pure functions — reducers take previous state and an action and return new state without mutation.

In React-Redux, what is the Provider component and how is it used?

Provider is a wrapper component from react-redux that takes the Redux store as a prop and makes it available to every nested component: <Provider store={store}><App /></Provider>. Without it, connected components could not access the store via connect (or hooks).

What does react-redux's connect function do, and what are its two arguments?

connect(mapStateToProps, mapDispatchToProps)(Component) returns a new component wired to the Redux store. mapStateToProps maps store state into the component's props; mapDispatchToProps maps dispatch calls into callback props. Pass null for either argument you don't need (e.g., connect(null, mapDispatchToProps)).

Write the typical shapes of mapStateToProps and mapDispatchToProps.

mapStateToProps = state => ({ messages: state.messages }) — returns an object whose keys become props holding pieces of state. mapDispatchToProps = dispatch => ({ submitNewMessage: msg => dispatch(addMessage(msg)) }) — returns an object whose keys become function props that dispatch actions.

In a typical React-Redux app, what is the division of labor between React local state and the Redux store?

Redux holds global application state shared across components (e.g., the list of submitted messages), while React component state handles local, transient UI concerns (e.g., the current text in an input box). A connected container component reads Redux state via props and dispatches actions on events like form submission.

For the freeCodeCamp Random Quote Machine project, what required element ids must exist and what must each do?

#quote-box (wrapper), #text (displays the quote), #author (displays the quote's author), #new-quote (button that fetches/displays a new random quote and author on click), and #tweet-quote (an <a> with href pointing to twitter.com/intent/tweet so the current quote can be tweeted).

Describe the required structure and behavior of the freeCodeCamp Markdown Previewer, including the library used and two required markdown features.

A textarea with id="editor" and an element with id="preview": as the user types GitHub-flavored markdown in #editor, #preview updates in real time with the rendered HTML, typically converted by the marked library (marked.parse(text), often with dangerouslySetInnerHTML). The default text must demonstrate at minimum: a heading, sub-heading, link, inline code, code block, list item, blockquote, image, and bold text.

List the key user-story requirements of the freeCodeCamp Drum Machine project.

An outer container with id="drum-machine" containing an element with id="display". Nine clickable .drum-pad elements, each containing an <audio> element with class "clip" whose id matches its pad's inner text — the letters Q, W, E, A, S, D, Z, X, C. A pad's sound must play both on click and when its corresponding keyboard key is pressed (keydown listener), and #display must show a description of the triggered sound.

In the freeCodeCamp JavaScript Calculator project, contrast 'immediate execution' logic with 'formula/expression' logic for the input $3 + 5 \times 6 - 2$.

Immediate execution evaluates left to right as each operator is entered: $((3 + 5) \times 6) - 2 = 46$. Formula logic stores the whole expression and applies operator precedence (multiplication before addition/subtraction): $3 + 5 \times 6 - 2 = 31$. freeCodeCamp accepts either, but the calculator must follow one consistently.

Name three required input-handling behaviors (edge cases) the freeCodeCamp JavaScript Calculator must implement, given its required ids (#display, #clear, #equals, digit and operator buttons).

(1) Decimal control: a number may contain only one '.', so ignore a second decimal press. (2) No leading-zero pile-up: numbers cannot begin with multiple zeros. (3) Consecutive operators: if two or more operators are entered in a row, perform the last one entered (except a trailing '-' may act as a negative sign); also, pressing #clear resets to the initialized state showing 0, and after #equals the result must be reusable in the next calculation.