Clean • Professional
Answer: React is an open-source JavaScript library developed by Facebook for building user interfaces, particularly single-page applications (SPAs), using a component-based architecture.
Answer: React was developed by Facebook in 2013.
Answer: JSX (JavaScript XML) is a syntax extension that allows writing HTML-like code within JavaScript, making it easier to define component structures.
Answer: No, browsers cannot read JSX directly. It must be compiled into JavaScript using tools like Babel.
Answer: You can create a React component as a function or a class.
Example (Functional):
function Welcome() {
return <h1>Hello, World!</h1>;
}
Answer:
Functional Components: Simple JavaScript functions returning JSX.
Class Components: Use ES6 classes, extend React.Component, and include lifecycle methods and render().
Functional components are preferred in modern React using hooks.
Answer: The render() method returns the JSX that defines a component’s UI and must be included in class components.
Answer: Props (short for “properties”) are read-only inputs passed from parent to child components to display dynamic data.
Answer:
Pass:
<Welcome name="Alice" />Access (Functional):
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}Answer: State is an object that stores dynamic data that can change over time. When updated, it triggers a re-render of the component.
Answer: Using the useState hook.
Example:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return <div>{count}</div>;
}Answer: Use the setter function provided by useState.
Example:
setCount(count + 1);Answer: Directly modifying state (e.g., count = count + 1) doesn’t trigger a re-render and can cause unexpected behavior.
Answer:
Answer: The virtual DOM is a lightweight copy of the real DOM that React uses to efficiently update only the changed parts of the UI.
Answer: The key prop uniquely identifies elements in a list, helping React optimize rendering and updates.
Answer:
const fruits = ['Apple', 'Banana', 'Orange'];
function List() {
return (
<ul>
{fruits.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}Answer: Fragments (<></>) allow you to group multiple elements without adding extra nodes to the DOM.
Answer: A form element whose value is controlled by React state, ensuring a single source of truth.
Answer: A component where form data is handled by the DOM instead of React state.
Answer: Use camelCase event handlers and pass functions.
Example:
function Button() {
const handleClick = () => alert('Clicked!');
return <button onClick={handleClick}>Click Me</button>;
}Answer: A React hook used to perform side effects (e.g., fetching data, DOM manipulation, or subscriptions) in functional components.
Answer: useEffect combines the functionality of lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.
Answer: Special methods in class components that control the behavior of components at different stages — e.g., componentDidMount, componentDidUpdate, componentWillUnmount.
Answer: Displaying UI based on conditions using operators like if, &&, or ? :.
Example:
{isLoggedIn ? <Dashboard /> : <Login />}Answer: A library used for navigation and routing in React applications, enabling multiple views without full page reloads.
Answer: Use the command:
npx create-react-app my-appAnswer: Moving shared state to a common parent component so sibling components can access or modify it through props.
Answer:
React.memo() for functional components.shouldComponentUpdate() in class components.Answer: Passing props through multiple levels of components just to reach a deeply nested one, making code harder to maintain.
Answer: It’s the entry point of a React app, where the root component (e.g., <App />) is rendered into the DOM using ReactDOM.render.
Answer: Use curly braces with JavaScript comments:
{/* This is a comment */}
Answer: