⚛️
Frontend Library · Arena

React

100 challenges · 0 mastered

0%
Arena cleared
0/100 mastered Let's go 🚀
Answer

React is a JavaScript library for building user interfaces using reusable components and a declarative, component-based approach.

💡 Simple Analogy

React is like a box of LEGO bricks. You build small pieces (components) and snap them together to make a whole page.

Answer

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside JavaScript. It gets compiled to React.createElement calls.

Code Example
const element = <h1>Hello, world!</h1>;
💡 Simple Analogy

JSX lets you write what looks like HTML right inside your JavaScript, so describing the UI feels natural.

Answer

A component must return one element because the compiled output is a single function call. You can wrap siblings in a parent div or use a Fragment.

Code Example
return (
  <>
    <h1>Title</h1>
    <p>Text</p>
  </>
);
💡 Simple Analogy

It is like handing someone one bag of groceries instead of loose items - everything must be packed into one container.

Answer

You use curly braces to embed any valid JavaScript expression, such as variables, function calls, or math, inside JSX.

Code Example
const name = 'Sam';
return <h1>Hello, {name}!</h1>;
💡 Simple Analogy

The curly braces are a window into JavaScript - whatever value is inside gets shown on the page.

Answer

The Virtual DOM is an in-memory representation of the real DOM. React updates it first, compares it to the previous version, and applies only the minimal changes to the real DOM.

💡 Simple Analogy

It is like editing a draft on paper before writing the final copy - you only rewrite the lines that changed.

Answer

An element is a plain object describing what should appear on screen, while a component is a function that returns elements. Elements are the output; components are the blueprint.

Code Example
const element = <App />; // an element
function App() { return <h1>Hi</h1>; } // a component
💡 Simple Analogy

A component is the cookie cutter; an element is one cookie it stamps out.

Answer

A component is a reusable, self-contained piece of UI. In modern React it is a JavaScript function that returns JSX.

Code Example
function Welcome() {
  return <h1>Welcome!</h1>;
}
💡 Simple Analogy

A component is like a custom rubber stamp - define it once and stamp it wherever you need that piece of UI.

Answer

Props are inputs passed from a parent component to a child. They are read-only and let you configure or customize a component.

Code Example
function Greeting(props) {
  return <h1>Hi, {props.name}</h1>;
}
<Greeting name='Alex' />
💡 Simple Analogy

Props are like settings you hand to a component, the way you tell a coffee machine 'large, no sugar'.

Answer

A component must never modify its own props. This keeps data flow predictable and one-directional, from parent to child.

💡 Simple Analogy

Props are like a gift - you can use it but you should not change what the giver handed you.

Answer

Function components are plain functions that use hooks for state and lifecycle. Class components use ES6 classes with lifecycle methods. Function components with hooks are the modern standard.

Code Example
function Hi() { return <p>Hi</p>; }

class Hi extends React.Component {
  render() { return <p>Hi</p>; }
}
💡 Simple Analogy

Function components are the new lightweight model; class components are the older, heavier model.

Answer

You can destructure props directly in the function parameter list for cleaner, shorter code.

Code Example
function Greeting({ name, age }) {
  return <p>{name} is {age}</p>;
}
💡 Simple Analogy

Destructuring is like unpacking a box and laying each item out by name instead of digging into the box each time.

Answer

props.children holds whatever JSX is nested between a component's opening and closing tags, letting you build wrapper components.

Code Example
function Card({ children }) {
  return <div className='card'>{children}</div>;
}
<Card><p>Inside</p></Card>
💡 Simple Analogy

children is like an empty picture frame - whatever you place inside it gets shown.

Answer

You assign default values using default parameters when destructuring props.

Code Example
function Button({ label = 'Click' }) {
  return <button>{label}</button>;
}
💡 Simple Analogy

It is like a form that fills in a sensible default when you leave a field blank.

Answer

State is data that a component owns and can change over time. When state changes, React re-renders the component to reflect the new data.

Code Example
const [count, setCount] = useState(0);
💡 Simple Analogy

State is a component's memory - like a scoreboard that updates as the game goes on.

Answer

You pass a function to an event prop like onClick or onChange. React uses camelCase event names and passes a synthetic event object.

Code Example
<button onClick={() => alert('Hi')}>Click</button>
💡 Simple Analogy

Handling events is like wiring a doorbell - when someone presses the button, your function rings.

Answer

Props are passed in from a parent and are read-only. State is managed inside the component and can change. Both trigger re-renders when they change.

💡 Simple Analogy

Props are instructions handed to you from outside; state is your own notebook that you can edit.

Answer

Directly mutating state does not tell React to re-render. You must use the setter function so React knows to schedule an update.

Code Example
// Wrong
count = count + 1;
// Right
setCount(count + 1);
💡 Simple Analogy

Updating state directly is like changing a scoreboard's wires by hand - the official display never notices.

Answer

You wrap the handler in an arrow function so the argument is passed when the event fires, not immediately during render.

Code Example
<button onClick={() => deleteItem(id)}>Delete</button>
💡 Simple Analogy

The arrow function is a wrapper that waits until the click happens before running with your value.

Answer

It stops the browser's default behavior for an event, such as a form submitting and reloading the page.

Code Example
function onSubmit(e) {
  e.preventDefault();
  // handle form
}
💡 Simple Analogy

It is like catching a falling object before it hits the ground - you stop the automatic outcome.

Answer

You map over an array and return a JSX element for each item, giving each element a unique key prop.

Code Example
{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}
💡 Simple Analogy

It is like a mail-merge - you have a list of names and you stamp out one label per name.

Answer

Keys give each list item a stable identity so React can efficiently track which items changed, were added, or removed during re-renders.

💡 Simple Analogy

Keys are like name tags at a party - they let React tell people apart even when the crowd shifts.

Answer

You use a ternary expression inside JSX to choose between two outputs based on a condition.

Code Example
{isLoggedIn ? <Dashboard /> : <Login />}
💡 Simple Analogy

It is a fork in the road - if true go left, if false go right.

Answer

You use the logical AND operator. If the left side is true, the right side renders; otherwise nothing renders.

Code Example
{hasError && <p className='error'>Something went wrong</p>}
💡 Simple Analogy

It is like a guard at a gate - the content only passes through if the condition is true.

Answer

Index keys can cause bugs and inefficient updates when the list is reordered, filtered, or items are inserted, because the identity shifts with position.

💡 Simple Analogy

Using the index is like labeling people by their seat number - if they swap seats, the labels become wrong.

Answer

React intentionally ignores booleans, null, and undefined so you can use short-circuit conditions without rendering unwanted text.

Code Example
{count > 0 && <Badge count={count} />}
💡 Simple Analogy

These values are like blank ballots - React simply skips them instead of showing anything.