React Fundamentals
Every React app — from a landing page to an editor with a million users — is built from the handful of ideas in this deck. You will learn what a component really is, how JSX turns markup-in-JavaScript into elements on screen, and why React re-renders instead of letting you poke the DOM by hand. Several cards show a short snippet and ask what it renders; predicting output before you flip the card is the fastest way to make the mental model stick.
Practice this set for free — no account needed. Loads 14 flashcards into the learner.
Practice in the free learnerHow to study this set
Read each code card slowly and answer out loud before revealing — "an h1 with Hello" is a real answer, "some HTML" is not. If a card surprises you, paste the snippet into a sandbox once and watch it run; one concrete observation beats three abstract repetitions. Let the spaced-repetition schedule bring back the cards you miss.
All 14 flashcards
What is React?
A JavaScript library for building user interfaces out of small, reusable components.
What is a React component, at its core?
A JavaScript function that receives props and returns JSX describing what should appear on screen.
What is JSX?
A syntax extension that lets you write markup inside JavaScript. It compiles to plain function calls that create React elements — it is not HTML.
What does this component render?
function Greeting() {
return <h1>Hello, React!</h1>;
}An <h1> element with the text "Hello, React!".
Why must React component names start with a capital letter?
JSX treats lowercase tags like div as DOM elements and capitalized tags like Greeting as your components.
How do you embed a JavaScript expression inside JSX?
With curly braces — {expression}. Anything inside them is evaluated as JavaScript.
What does this render?
const name = 'Ada';
return <p>Hello, {name.toUpperCase()}!</p>;A paragraph with the text "Hello, ADA!".
Why does JSX use className instead of the HTML attribute class?
JSX compiles to JavaScript, where class is a reserved keyword — so React uses the DOM property name className.
How many root elements can a component return — and what if you need more?
Exactly one root. Group siblings with a fragment — <>…</> — which adds no extra DOM node.
What is wrong with this JSX?
return <img src="/logo.png">;JSX requires every tag to be closed — <img src="/logo.png" />.
What is the "virtual DOM" idea behind React?
React keeps a lightweight description of the UI, compares it to the previous one on each render, and applies only the minimal real-DOM changes.
What does this line do?
ReactDOM.createRoot(document.getElementById('root')).render(<App />);It mounts the React app: it creates a React root inside the #root DOM node and renders the <App /> component tree into it.
React is called "declarative". What does that mean in practice?
You describe what the UI should look like for a given state, and React figures out the DOM updates — instead of you imperatively mutating elements step by step.
What is the difference between an element and a component?
A component is the function (the blueprint); an element is the cheap object a render produces — e.g. <Greeting /> creates an element that tells React to render the Greeting component.
What to learn next
Comfortable with what a component is and how JSX renders? Move on to level 2, "Components & Props", where single components become composable UIs — props, children, conditional rendering and the list keys everyone gets asked about.
Continue to Level 2: Components & Props →