What is a React component?
A piece of the UI with its own logic and appearance. It’s a JavaScript function that returns markup (JSX).
How do you nest one component inside another?
Use it as a JSX tag: <MyButton></MyButton>. Component names must start with a capital letter; HTML tags are lowercase.
What do the export default keywords do?
They specify the main component in the file. export makes it accessible to other files, default marks it as the primary export.
What is JSX?
A markup syntax that combines JavaScript and HTML-like tags. It’s stricter than HTML — you must close all tags and return a single root element.
Why can’t a component return multiple adjacent JSX tags?
JSX requires a single root element. Wrap siblings in a <div> or a Fragment (<>…</>) to fix this.
How do you specify a CSS class in React?
Use the className attribute instead of class: <img></img>. Then define the CSS rules in a separate file.
How do you display a JavaScript variable inside JSX?
Use curly braces: {user.name}. Curly braces let you “escape into JavaScript” from JSX.
How do you use JavaScript expressions in JSX attributes?
Use curly braces instead of quotes: src={user.imageUrl}. Quotes pass a literal string, braces evaluate the expression.
What does style={{}} mean in JSX?
It’s a regular JS object {} inside the JSX curly braces style={ }. The outer braces are JSX syntax, the inner braces are the object literal.
How do you do conditional rendering with an if statement?
Assign JSX to a variable inside an if/else block, then embed that variable in your returned JSX with curly braces.
How do you do inline conditional rendering in JSX?
Use the ternary operator: {isLoggedIn ? <Admin></Admin> : <Login></Login>}. For no else branch, use logical &&: {isLoggedIn && <Admin></Admin>}.
How do you render a list of items in React?
Use array .map() to transform data into JSX elements. Each element needs a unique key prop (usually from your data, like a database ID).
Why does React need a key prop on list items?
Keys let React track which items changed, were added, or removed. Without them, React can’t efficiently update the list when it changes.
How do you respond to a click event?
Declare a handler function inside your component, then pass it (don’t call it) to onClick: <button onClick={handleClick}>. No parentheses after the function name.
Why should you NOT write onClick={handleClick()} with parentheses?
Parentheses call the function immediately during render instead of on click. You need to pass the function reference, not invoke it.
What is useState and what does it return?
A built-in React Hook that adds state to a component. It returns a pair: the current state value and a setter function, e.g. const [count, setCount] = useState(0).
What happens when you call a state setter like setCount(count + 1)?
React re-renders the component with the new state value. On the next render, count reflects the updated value.
If you render the same component twice, do they share state?
No. Each instance of a component gets its own independent state. Clicking one button doesn’t affect the other.
What are Hooks in React?
Functions starting with use (like useState). They can only be called at the top level of components or other Hooks — not inside conditions or loops.
What does “lifting state up” mean?
Moving state from child components into their closest common parent so multiple children can share and stay in sync with the same data.
How do you share state between two sibling components?
Move the state into their common parent. The parent passes the state value and an updater function down to each child as props.
What are props?
Information passed down from a parent component to a child component via JSX attributes. The child receives them as a function parameter, often destructured: function MyButton({ count, onClick }).
Describe the full flow when a button with lifted state is clicked.
Child’s onClick fires → calls parent’s handler (passed as prop) → parent calls setState → React re-renders parent → new state value flows down as props to all children.
