React
The world's most popular library for building user interfaces. Created by Facebook, React uses a component-based model and virtual DOM.
01What is React?React Overview React (also called React.js) is an open-source JavaScript library for building user interfaces, maintained by Meta. Components — the building blocks. Everything is a component. Virtual DOM — React keeps an in-memory representation of. codequizbeginner
React Overview React (also called React.js) is an open-source JavaScript library for building user interfaces, maintained by Meta. Components — the building blocks. Everything is a component. Virtual DOM — React keeps an in-memory representation of.
// Create a new React app (Vite recommended)
npm create vite@latest my-app -- --template react
cd my-app && npm install && npm run dev
// Or with Create React App (legacy)
npx create-react-app my-appReact was created by:
What is JSX?
What does the React Virtual DOM help with?
02Components & PropsReact Components & Props Everything in React is a component — a reusable, self-contained piece of UI. Components accept props (properties) as inputs and return JSX. Function Components // Simple component function Greeting({ name }) { return <h1&gcodequizbeginner
React Components & Props Everything in React is a component — a reusable, self-contained piece of UI. Components accept props (properties) as inputs and return JSX. Function Components // Simple component function Greeting({ name }) { return <h1&g
// Simple component
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
// Usage
<Greeting name="Alice" />What are React props?
Which is the correct way to pass a prop?
What prop allows you to pass children between component tags?
03State & useState HookReact State & useState While props are read-only inputs, state is data that changes over time inside a component. React. import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // initial value = 0 return ( <dcodequizintermediate
React State & useState While props are read-only inputs, state is data that changes over time inside a component. React. import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // initial value = 0 return ( <d
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // initial value = 0
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}useState returns what?
How should you update a state array to add an item?
When does React re-render a component?
04useEffect & EventsuseEffect & Event Handling useEffect Hook useEffect runs side effects after render — data fetching, subscriptions, DOM manipulation. import { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(nullcodequizadvanced
useEffect & Event Handling useEffect Hook useEffect runs side effects after render — data fetching, subscriptions, DOM manipulation. import { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null
import { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
// Runs after every render where userId changed
useEffect(() => {
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(data => setUser(data));
// Cleanup function (runs before next effect or unmount)
return () => {
// Cancel requests, clear timers, unsubscribe
};
}, [userId]); // dependency array
if (!user) return <p>Loading...</p>;
return <p>{user.name}</p>;
}An empty dependency array [] in useEffect means:
What is the function returned from useEffect for?
How do you prevent form default browser submission in React?