JSX Marks the Spot
This syntax extension lets React developers write HTML-like markup inside JavaScript.
What is JSX?
Props normally travel through a React component tree in this direction.
What is from parent to child/down the component tree?
This React Hook is the usual starting point for adding state to a functional component.
What is useState?
An input whose displayed value is controlled by React state is known by this name.
What is a controlled input?
In the first step of Thinking in React, you break your UI into a hierarchy of these.
What are components?
To insert a JavaScript expression inside JSX, surround it with these.
What are curly braces {}
React uses these to pass data from a parent component to a child component.
What are props?
When state changes, React automatically does this so the UI can reflect the new state.
What is re-render the component?
This event is commonly used to update state as the user types into a controlled input.
What is onChange?
Before adding interactivity, Thinking in React recommends building this version of your application first.
What is a static version?
HTML uses class, but JSX uses this attribute instead.
What is className?
A Profile component receives name as a prop. Complete this component definition: function Profile(_____){ ... } if you want to destructure the prop immediately.
What is { name }?
const [score, setScore] = useState(0) gives score this initial value.
What is 0?
Inside an input's change handler, this expression commonly gives you the text currently in the input.
What is event.target.value (or e.target.value)?
True or false: You should use state extensively while building the initial static version of your app.
What is false?
A React component's name should begin with this kind of letter so React can distinguish it from an HTML element.
What is a capital/uppercase letter?
Instead of creating five nearly identical ProductCard components, you can create one and change the information it displays using these.
What are props?
In const [isOpen, setIsOpen] = useState(false), this function should be used to change isOpen.
What is setIsOpen?
A parent can allow a child to change state owned by the parent by passing one of these down as a prop.
What is a callback function/state-update function?
When deciding whether data belongs in state, ask whether it changes, whether it comes from props, and whether you can do this using other props or state.
What is calculate/compute it?
These reusable pieces of code are the basic building blocks from which React applications are constructed.
What are components?
This special prop lets a component access JSX nested between its opening and closing tags.
What is children (or props.children)?
React state should be changed through React's state APIs rather than by doing this to the existing state directly.
What is mutating/modifying state directly?
If two sibling components need to use and update the same state, React developers commonly move that state here.
What is their closest common parent?
Your state contains an array called students. You need to display the number of students. Thinking in React says don't create another state variable—get the number this way instead.
What is calculate it from students.length?