Introducing React Flashcards
What are the key benefits of using React?
Component-based structure, efficient rendering with virtual DOM, minimized real DOM updates.
Why is updating the real DOM costly?
The real DOM update requires recalculating styles and layouts, which impacts performance.
What is JSX in React?
A syntax extension that looks like HTML but is transpiled into JavaScript.
Why does JSX use className instead of class?
class is a reserved keyword in JavaScript, so React uses className.
How do you embed JavaScript expressions in JSX?
By wrapping the expression inside {} (e.g., <h1>{title}</h1>).
What is the entry file of a React app?
index.js, where createRoot() initializes the React app.
What does StrictMode do in React?
Helps detect potential problems by logging warnings in the console.
What is the structure of a typical React component tree?
A hierarchy where the root component (e.g., App) contains nested components and elements.
What is the difference between a named export and a default export?
Named exports allow multiple exports from a module, while default exports export a single value.
How do you import a default export from a module?
import myFunc from './myModule'; (import name can be different).
How do you import named exports from a module?
import { myFunc1, myFunc2 } from './myModule'; (names must match).
What are props in React?
Props are an object used to pass data from a parent component to a child component.
How do you pass props to a React component?
Using JSX attributes: <Component propName="value" />.
What is state in React?
A special variable that holds component data and triggers re-rendering when updated.
How do you declare state in a functional component?
Using the useState hook: const [state, setState] = useState(initialState);.
How do you handle events in React?
By passing an event handler function to an element’s event prop: <button onClick={handleClick}>Click</button>.
