🌍 ReactJS · flashcards
ReactJS React Basics Flashcards
51 question-and-answer cards covering React Basics as it is examined in ReactJS. 24 of them are printed below, taken from across the deck — no signup, no paywall on the preview.
24 sample cards from the React Basics deck
Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.
On which default port does the Create React App development server run?
Port 3000 (http://localhost:3000).
Which command produces an optimized production build in Create React App?
npm run build
What build tool does Create React App use under the hood to bundle code (traditionally)?
Webpack (with Babel for transpilation), abstracted away behind react-scripts.
In a Create React App project, what does the 'public' folder contain?
Static assets served as-is, including index.html (the app's single HTML page) and files like favicon.ico and manifest.json.
In a Create React App project, what does the 'src' folder contain?
The application's JavaScript/JSX source code, including index.js (entry point) and App.js (root component).
Which file is the JavaScript entry point in a standard Create React App project?
src/index.js
Which element in public/index.html does React render the app into by default?
The <div> with id="root" (accessed via document.getElementById('root')).
What is the role of App.js in a Create React App project?
App.js defines the root/App component, the top-level component that composes the rest of the UI.
What is JSX?
JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like markup directly inside JavaScript code.
Does the browser understand JSX directly?
No. JSX must be transpiled (e.g., by Babel) into regular JavaScript function calls before the browser can run it.
What JavaScript function call does JSX compile to?
JSX compiles to React.createElement(type, props, ...children) calls (or the automatic JSX runtime's equivalent) that produce React elements.
Is JSX required to use React?
No, JSX is optional; you can call React.createElement directly, but JSX is strongly recommended for readability.
In JSX, why is 'className' used instead of 'class'?
Because 'class' is a reserved word in JavaScript, so JSX uses className to set the CSS class attribute.
How are HTML attributes named in JSX?
In camelCase, e.g., onClick, tabIndex, htmlFor (instead of onclick, tabindex, for).
What is the rule about the number of root elements a JSX expression can return?
A JSX expression must return a single root element; multiple siblings must be wrapped in one parent or a React Fragment (<>...</>).
How must self-closing tags be written in JSX?
They must be explicitly closed with a slash, e.g., <img />, <br />, <input />.
What is a React Fragment and why is it used?
A Fragment (<>...</> or <React.Fragment>) groups multiple children without adding an extra DOM node to the output.
How do you embed a JavaScript expression inside JSX?
By wrapping the expression in curly braces, e.g., <h1>{user.name}</h1>.
Can you put statements like if/for directly inside JSX curly braces?
No. Only JavaScript expressions are allowed inside {}; statements are not. Use ternaries, &&, or precompute values outside the JSX.
How would you render the sum of 2 and 3 inside a JSX heading?
Write <h1>{2 + 3}</h1>, which renders 5 because the expression is evaluated in the curly braces.
How do you write a JavaScript comment inside JSX?
Wrap it in curly braces as an expression comment: {/* this is a comment */}.
How do you conditionally render an element in JSX using a boolean expression?
Use short-circuit &&, e.g., {isLoggedIn && <p>Welcome!</p>}, or a ternary {isLoggedIn ? <A/> : <B/>}.
How do you set an inline style on a JSX element?
Pass a JavaScript object to the style attribute with camelCased properties, e.g., style={{ color: 'red', fontSize: '14px' }}.
What do false, null, undefined, and true render to when embedded in JSX?
They render nothing (are ignored), which is why {condition && <Element/>} safely renders nothing when the condition is false.
What this deck covers
The React Basics deck follows the ReactJS React Basics syllabus — 3 chapters and 9 topics — so questions land on material that is genuinely examinable rather than trivia around it. That works out to roughly 17.0 cards per chapter.
Answers are written to be recallable, not just readable — averaging about 94 characters, which is long enough to carry the reasoning and short enough to say out loud.
A deck like this earns its keep on the second and third pass. Read the syllabus first so you know the shape of the subject, then use the cards to find the specific facts that have not stuck.
React Basics flashcards FAQ
How many React Basics flashcards are in this ReactJS deck?
51 cards. This page previews 24 of them, sampled evenly across the deck so you can judge the difficulty before installing anything.
Are these ReactJS flashcards free?
Yes. The preview here is free to read with no signup, and the full 51-card deck is free inside the Examius app.
What do the React Basics cards cover?
They follow the ReactJS React Basics syllabus — 3 chapters and 9 topics — so the questions track what is actually examinable.
How should I use these flashcards?
Read the syllabus first so you know the shape of the subject, then drill the deck. Examius schedules each card with spaced repetition, so cards you keep missing come back sooner and ones you know drift further apart.