React: Core Concepts & JSX Flashcards
Subtopics: JSX syntax and expressions Babel transpilation of JSX Component structure (function vs class) ReactDOM and rendering Interview-style Questions: What is JSX and how is it compiled? Can a React component return multiple elements? (20 cards)
What is JSX in React?
JSX is a syntax extension for JavaScript that lets you write HTML-like code inside React components.
How is JSX compiled?
JSX is compiled by Babel into React.createElement() calls that produce React elements.
What are the benefits of using JSX?
JSX improves code readability and makes it easier to visualize UI structure directly within JavaScript.
What is the difference between a function component and a class component?
Function components are simpler and use hooks, while class components use lifecycle methods and ‘this’ context.
Can a React component return multiple elements?
Yes, a component can return multiple elements using fragments <>…</> or an array of elements.
What does ReactDOM.render() do?
ReactDOM.render() mounts a React component into the real DOM, connecting virtual DOM to browser UI.
What are the advantages of function components over class components?
Function components are simpler, encourage cleaner code, support hooks, and reduce boilerplate.
What are disadvantages of class components?
Class components are more verbose, harder to refactor, and don’t benefit from hooks without rewrites.
What is the best practice for writing reusable components?
Keep them pure, stateless if possible, and use props to pass data and callbacks for interaction.
What is a use case for JSX expressions?
Dynamic values inside UI, like displaying Hello, {userName} or conditionally rendering elements.
What is the architectural implication of using JSX?
JSX enables declarative UI building, improving maintainability but requiring transpilation in the toolchain.
What is the impact of JSX on performance?
JSX itself doesn’t impact runtime; its compiled form can affect render performance depending on structure and depth.
What are common interview questions about React JSX?
‘What is JSX?’, ‘How is JSX compiled?’, ‘Difference between class and function components?’, ‘How to return multiple elements?’
What is a potential gotcha when returning multiple JSX elements?
Forgetting to wrap elements in a single parent, like a div or fragment, causes syntax errors.
What does Babel do in a React project?
Babel transpiles modern JavaScript and JSX into backward-compatible JavaScript that browsers can run.
What happens if you omit React import when using JSX in older setups?
JSX won’t compile because React.createElement will be undefined (in older versions before React 17).
What is the role of ReactDOM?
ReactDOM provides DOM-specific methods to render React components and manage updates in browser environments.
What’s a disadvantage of heavy JSX nesting?
Deeply nested JSX can hurt readability and maintainability; splitting into smaller components is better.
How does JSX improve developer experience?
JSX enables combining markup and logic, reducing context-switching and aligning code with UI structure.
What is a potential error when embedding JS in JSX?
Not wrapping JavaScript expressions in curly braces {} or placing statements (like if or loops) directly inside JSX.
