Home›Tutorials›React
?? JavaScript Library (Frontend Library)

React — Complete Tutorial

Learn React from absolute zero. Every topic explained simply with real examples you can edit and run live, right here in your browser.

🟩 Beginner Friendly ▶ Live Code Editor 📚 47 Topics
Your Progress3% complete
TutorialHomeIntroGet StartedFirst AppRender HTMLUpgradeES6JSX IntroJSX ExpressionsJSX AttributesJSX If StatementsComponentsClassPropsProps DestructuringProps ChildrenEventsConditionalsListsFormsForms Submit
⚡Live React Lab

Edit the React example below and click Run. Use this to quickly test component logic and UI behavior.

react-lab.jsx
📝 Edit Code
👁 Live Preview
💡 Try this: edit JSX and rerun preview.
∙ Chapter 001

React Tutorial

Learn React Tutorial with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-tutorial.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
return <h2>Welcome to React</h2>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Tutorial
∙ Chapter 002

React Home

Learn React Home with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-home.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
return <h2>Welcome to React</h2>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Home
∙ Chapter 003

React Intro

Learn React Intro with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-intro.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
return <h2>Welcome to React</h2>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Intro
∙ Chapter 004

React Get Started

Learn React Get Started with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-get-started.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
return <h2>Welcome to React</h2>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Get Started
∙ Chapter 005

React First App

Learn React First App with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-first-app.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const now = new Date().toLocaleTimeString();Declares code used in the example.
return <p>My first app - {now}</p>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React First App
∙ Chapter 006

React Render HTML

Learn React Render HTML with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-render-html.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
return <h2>React Render HTML</h2>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Render HTML
∙ Chapter 007

React Upgrade

Learn React Upgrade with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-upgrade.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
return <h2>React Upgrade</h2>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Upgrade
∙ Chapter 008

React ES6

Learn React ES6 with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-es6.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
return <h2>React ES6</h2>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React ES6
React JSX
∙ Chapter 009

React JSX Intro

Learn React JSX Intro with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-jsx-intro.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
return <h2>Welcome to React</h2>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React JSX Intro
∙ Chapter 010

React JSX Expressions

Learn React JSX Expressions with a small example you can edit and run.

📝Syntax
{expression}
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-jsx-expressions.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const a = 7, b = 5;Declares code used in the example.
return <p>{a} + {b} = {a + b}</p>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React JSX Expressions
∙ Chapter 011

React JSX Attributes

Learn React JSX Attributes with a small example you can edit and run.

📝Syntax
<Button disabled={isDisabled} />
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-jsx-attributes.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const ok = true;Declares code used in the example.
return <button disabled={!ok}>Click</button>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React JSX Attributes
∙ Chapter 012

React JSX If Statements

Learn React JSX If Statements with a small example you can edit and run.

📝Syntax
{condition ? <A /> : <B />}
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-jsx-if-statements.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const loggedIn = false;Declares code used in the example.
return loggedIn ? <p>Welcome back</p> : <p>Please login</p>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React JSX If Statements
React Core
∙ Chapter 013

React Components

Learn React Components with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-components.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function Badge({ text }){ return <span>{text}</span>; }Declares code used in the example.
function App(){Declares code used in the example.
return <Badge text="Reusable" />;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Components
∙ Chapter 014

React Class

Learn React Class with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-class.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
class Counter extends React.Component {Declares code used in the example.
state = { count: 0 };JavaScript/JSX line.
render(){JavaScript/JSX line.
return <button onClick={() => this.setState({count:this.state.count+1})}>count: {this.state.count}</button>;Returns JSX (UI).
}JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Class
∙ Chapter 015

React Props

Learn React Props with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-props.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function Hello(props){ return <h2>Hello, {props.name}</h2>; }Declares code used in the example.
ReactDOM.createRoot(document.getElementById('root')).render(<Hello name="Developer" />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Props
∙ Chapter 016

React Props Destructuring

Learn React Props Destructuring with a small example you can edit and run.

📝Syntax
function Card({ title }) { return <h3>{title}</h3>; }
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-props-destructuring.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function Card({ title }){ return <h3>{title}</h3>; }Declares code used in the example.
ReactDOM.createRoot(document.getElementById('root')).render(<Card title="Hello" />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Props Destructuring
∙ Chapter 017

React Props Children

Learn React Props Children with a small example you can edit and run.

📝Syntax
function Box({ children }) { return <div>{children}</div>; }
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-props-children.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function Box({ children }){ return <div style={{border:'1px solid #ddd', padding:12}}>{children}</div>; }Declares code used in the example.
function App(){Declares code used in the example.
return <Box><b>Children content</b></Box>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Props Children
∙ Chapter 018

React Events

Learn React Events with a small example you can edit and run.

📝Syntax
<button onClick={handleClick}>Click</button>
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-events.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [msg, setMsg] = React.useState('Click');Declares code used in the example.
return <button onClick={() => setMsg('Clicked!')}>{msg}</button>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Events
∙ Chapter 019

React Conditionals

Learn React Conditionals with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-conditionals.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [open, setOpen] = React.useState(false);Declares code used in the example.
return (JavaScript/JSX line.
<div>JavaScript/JSX line.
<button onClick={() => setOpen(!open)}>{open ? 'Hide' : 'Show'}</button>JavaScript/JSX line.
{open && <p>Now visible</p>}JavaScript/JSX line.
</div>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Conditionals
∙ Chapter 020

React Lists

Learn React Lists with a small example you can edit and run.

📝Syntax
{items.map(x => <li key={x.id}>{x.name}</li>)}
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-lists.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const items = [{id:1,name:'React'},{id:2,name:'JSX'}];Declares code used in the example.
return <ul>{items.map(x => <li key={x.id}>{x.name}</li>)}</ul>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Lists
React Forms
∙ Chapter 021

React Forms

Learn React Forms with a small example you can edit and run.

📝Syntax
<input value={value} onChange={e => setValue(e.target.value)} />
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-forms.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [value, setValue] = React.useState('');Declares code used in the example.
return <input value={value} onChange={e => setValue(e.target.value)} placeholder="Type" />;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Forms power logins, checkout flows, and dashboards.
  • 2Controlled inputs keep UI in sync.
⚠Common Mistakes
  • 1Not preventing default submit when needed.
  • 2Storing duplicate form state.
✅Best Practices
  • 1Prefer controlled inputs.
  • 2Validate before submit.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Forms
∙ Chapter 022

React Forms Submit

Learn React Forms Submit with a small example you can edit and run.

📝Syntax
<input value={value} onChange={e => setValue(e.target.value)} />
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-forms-submit.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [name, setName] = React.useState('');Declares code used in the example.
return (JavaScript/JSX line.
<form onSubmit={(e)=>{e.preventDefault(); alert(name);}}>JavaScript/JSX line.
<input value={name} onChange={e => setName(e.target.value)} placeholder="Name" />JavaScript/JSX line.
<button type="submit">Submit</button>JavaScript/JSX line.
</form>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Forms power logins, checkout flows, and dashboards.
  • 2Controlled inputs keep UI in sync.
⚠Common Mistakes
  • 1Not preventing default submit when needed.
  • 2Storing duplicate form state.
✅Best Practices
  • 1Prefer controlled inputs.
  • 2Validate before submit.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Forms Submit
∙ Chapter 023

React Textarea

Learn React Textarea with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-textarea.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [text, setText] = React.useState('Hello');Declares code used in the example.
return (JavaScript/JSX line.
<div>JavaScript/JSX line.
<textarea rows={3} value={text} onChange={e => setText(e.target.value)} />JavaScript/JSX line.
<p>len: {text.length}</p>JavaScript/JSX line.
</div>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Forms power logins, checkout flows, and dashboards.
  • 2Controlled inputs keep UI in sync.
⚠Common Mistakes
  • 1Not preventing default submit when needed.
  • 2Storing duplicate form state.
✅Best Practices
  • 1Prefer controlled inputs.
  • 2Validate before submit.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Textarea
∙ Chapter 024

React Select

Learn React Select with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-select.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [lang, setLang] = React.useState('react');Declares code used in the example.
return (JavaScript/JSX line.
<div>JavaScript/JSX line.
<select value={lang} onChange={e=>setLang(e.target.value)}>JavaScript/JSX line.
<option value="react">React</option>JavaScript/JSX line.
<option value="vue">Vue</option>JavaScript/JSX line.
</select>JavaScript/JSX line.
<p>{lang}</p>JavaScript/JSX line.
</div>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
🏢Real-world
  • 1Forms power logins, checkout flows, and dashboards.
  • 2Controlled inputs keep UI in sync.
⚠Common Mistakes
  • 1Not preventing default submit when needed.
  • 2Storing duplicate form state.
✅Best Practices
  • 1Prefer controlled inputs.
  • 2Validate before submit.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Select
∙ Chapter 025

React Multiple Inputs

Learn React Multiple Inputs with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-multiple-inputs.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [form, setForm] = React.useState({name:'', email:''});Declares code used in the example.
const onChange = e => setForm({ ...form, [e.target.name]: e.target.value });Declares code used in the example.
return (JavaScript/JSX line.
<div>JavaScript/JSX line.
<input name="name" value={form.name} onChange={onChange} placeholder="Name" />JavaScript/JSX line.
<input name="email" value={form.email} onChange={onChange} placeholder="Email" />JavaScript/JSX line.
<pre>{JSON.stringify(form, null, 2)}</pre>JavaScript/JSX line.
</div>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Multiple Inputs
∙ Chapter 026

React Checkbox

Learn React Checkbox with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-checkbox.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [agree, setAgree] = React.useState(false);Declares code used in the example.
return (JavaScript/JSX line.
<label>JavaScript/JSX line.
<input type="checkbox" checked={agree} onChange={e => setAgree(e.target.checked)} />JavaScript/JSX line.
Agree: {String(agree)}JavaScript/JSX line.
</label>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Forms power logins, checkout flows, and dashboards.
  • 2Controlled inputs keep UI in sync.
⚠Common Mistakes
  • 1Not preventing default submit when needed.
  • 2Storing duplicate form state.
✅Best Practices
  • 1Prefer controlled inputs.
  • 2Validate before submit.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Checkbox
∙ Chapter 027

React Radio

Learn React Radio with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-radio.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [size, setSize] = React.useState('m');Declares code used in the example.
return (JavaScript/JSX line.
<div>JavaScript/JSX line.
<label><input type="radio" checked={size==='s'} onChange={()=>setSize('s')} /> S</label>JavaScript/JSX line.
<label><input type="radio" checked={size==='m'} onChange={()=>setSize('m')} /> M</label>JavaScript/JSX line.
<p>size: {size}</p>JavaScript/JSX line.
</div>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Forms power logins, checkout flows, and dashboards.
  • 2Controlled inputs keep UI in sync.
⚠Common Mistakes
  • 1Not preventing default submit when needed.
  • 2Storing duplicate form state.
✅Best Practices
  • 1Prefer controlled inputs.
  • 2Validate before submit.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Radio
React Advanced
∙ Chapter 028

React Portals

Learn React Portals with a small example you can edit and run.

📝Syntax
ReactDOM.createPortal(<Modal />, document.body)
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-portals.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function Modal({ onClose }){Declares code used in the example.
return ReactDOM.createPortal(JavaScript/JSX line.
<div style={{position:'fixed',inset:0,background:'rgba(0,0,0,.45)',display:'grid',placeItems:'center'}}>JavaScript/JSX line.
<div style={{background:'#fff',padding:16,borderRadius:10}}>JavaScript/JSX line.
<b>Portal Modal</b>JavaScript/JSX line.
<button onClick={onClose}>Close</button>JavaScript/JSX line.
</div>JavaScript/JSX line.
</div>,JavaScript/JSX line.
document.bodyJavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
function App(){Declares code used in the example.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Portals
∙ Chapter 029

React Suspense

Learn React Suspense with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-suspense.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
const LazyHello = React.lazy(() => new Promise(resolve => {Declares code used in the example.
setTimeout(() => resolve({ default: () => <h2>Loaded!</h2> }), 600);JavaScript/JSX line.
}));JavaScript/JSX line.
function App(){Declares code used in the example.
return (JavaScript/JSX line.
<React.Suspense fallback={<p>Loading...</p>}>JavaScript/JSX line.
<LazyHello />JavaScript/JSX line.
</React.Suspense>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Suspense
∙ Chapter 030

React Router

Learn React Router with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-router.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function Route({ path, children }){Declares code used in the example.
return window.location.hash === path ? children : null;JavaScript/JSX line.
}JavaScript/JSX line.
function Link({ to, children }){ return <a href={to} style={{marginRight:10}}>{children}</a>; }Declares code used in the example.
function App(){Declares code used in the example.
const [, force] = React.useState(0);Declares code used in the example.
React.useEffect(() => {Effect hook: runs after render.
const onHash = () => force(x => x + 1);Declares code used in the example.
window.addEventListener('hashchange', onHash);JavaScript/JSX line.
return () => window.removeEventListener('hashchange', onHash);JavaScript/JSX line.
}, []);JavaScript/JSX line.
return (JavaScript/JSX line.
🏢Real-world
  • 1Routing enables multi-page SPA navigation.
⚠Common Mistakes
  • 1Hardcoding route logic deep inside components.
✅Best Practices
  • 1Keep routes centralized.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Router
∙ Chapter 031

React Transitions

Learn React Transitions with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-transitions.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [on, setOn] = React.useState(false);Declares code used in the example.
return (JavaScript/JSX line.
<div>JavaScript/JSX line.
<style>{`\n.box{width:110px;height:42px;background:#7c4dff;color:#fff;display:grid;place-items:center;border-radius:10px;transition:transform .25s,opacity .25s}\n.on{transform:translateX(120px)}\n.off{opacity:.7}\n`}</style>JavaScript/JSX line.
<button onClick={() => setOn(!on)}>Toggle</button>JavaScript/JSX line.
<div className={'box ' + (on ? 'on' : 'off')}>Move</div>JavaScript/JSX line.
</div>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Transitions
∙ Chapter 032

React Forward Ref

Learn React Forward Ref with a small example you can edit and run.

📝Syntax
const Input = React.forwardRef((props, ref) => <input ref={ref} />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-forward-ref.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
const FancyInput = React.forwardRef(function FancyInput(props, ref){Declares code used in the example.
return <input ref={ref} placeholder="focus" />;Returns JSX (UI).
});JavaScript/JSX line.
function App(){Declares code used in the example.
const inputRef = React.useRef(null);Declares code used in the example.
return (JavaScript/JSX line.
<div>JavaScript/JSX line.
<FancyInput ref={inputRef} />JavaScript/JSX line.
<button onClick={() => inputRef.current && inputRef.current.focus()}>Focus</button>JavaScript/JSX line.
</div>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Forward Ref
∙ Chapter 033

React HOC

Learn React HOC with a small example you can edit and run.

📝Syntax
const Enhanced = withSomething(Component);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-hoc.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function withBorder(Component){Declares code used in the example.
return function Wrapped(props){JavaScript/JSX line.
return <div style={{border:'2px solid #00e5ff', padding:12, borderRadius:10}}><Component {...props} /></div>;Returns JSX (UI).
};JavaScript/JSX line.
}JavaScript/JSX line.
function Hello({ name }){ return <h2>Hello {name}</h2>; }Declares code used in the example.
const Enhanced = withBorder(Hello);Declares code used in the example.
ReactDOM.createRoot(document.getElementById('root')).render(<Enhanced name="Mana" />);Creates a root for rendering.
🏢Real-world
  • 1React is used to build interactive UIs for web apps and dashboards.
⚠Common Mistakes
  • 1Making components too large (hard to maintain).
✅Best Practices
  • 1Prefer small components and clear state.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React HOC
React Styling
∙ Chapter 034

React CSS Styling

Learn React CSS Styling with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-css-styling.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
return (JavaScript/JSX line.
<div>JavaScript/JSX line.
<style>{`\n.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#00e5ff;color:#000;font-weight:700}\n`}</style>JavaScript/JSX line.
<span className="badge">Styled</span>JavaScript/JSX line.
</div>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Styling systems keep UI consistent across screens.
⚠Common Mistakes
  • 1Overusing global styles that leak.
✅Best Practices
  • 1Use a consistent naming and spacing system.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React CSS Styling
∙ Chapter 035

React CSS Modules

Learn React CSS Modules with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-css-modules.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
return (JavaScript/JSX line.
<div>JavaScript/JSX line.
<style>{`\n.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#00e5ff;color:#000;font-weight:700}\n`}</style>JavaScript/JSX line.
<span className="badge">Styled</span>JavaScript/JSX line.
</div>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Styling systems keep UI consistent across screens.
⚠Common Mistakes
  • 1Overusing global styles that leak.
✅Best Practices
  • 1Use a consistent naming and spacing system.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React CSS Modules
∙ Chapter 036

React CSS-in-JS

Learn React CSS-in-JS with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-css-in-js.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
return (JavaScript/JSX line.
<div>JavaScript/JSX line.
<style>{`\n.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#00e5ff;color:#000;font-weight:700}\n`}</style>JavaScript/JSX line.
<span className="badge">Styled</span>JavaScript/JSX line.
</div>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Styling systems keep UI consistent across screens.
⚠Common Mistakes
  • 1Overusing global styles that leak.
✅Best Practices
  • 1Use a consistent naming and spacing system.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React CSS-in-JS
∙ Chapter 037

React Sass

Learn React Sass with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-sass.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
return <p>Sass compiles to CSS (use with a build tool).</p>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Styling systems keep UI consistent across screens.
⚠Common Mistakes
  • 1Overusing global styles that leak.
✅Best Practices
  • 1Use a consistent naming and spacing system.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Sass
React Hooks
∙ Chapter 038

React Hooks

Learn React Hooks with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-hooks.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [count, setCount] = React.useState(0);Declares code used in the example.
return <button onClick={() => setCount(count + 1)}>count: {count}</button>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Hooks let you reuse stateful logic across components.
  • 2They are the modern default in React.
⚠Common Mistakes
  • 1Calling hooks conditionally.
  • 2Forgetting dependencies in effects.
✅Best Practices
  • 1Follow the Rules of Hooks.
  • 2Keep dependency arrays accurate.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Hooks
∙ Chapter 039

What is Hooks?

Learn What is Hooks? with a small example you can edit and run.

📝Syntax
function App(){ return <h2>Hello</h2>; }
ReactDOM.createRoot(root).render(<App />);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

what-is-hooks.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [count, setCount] = React.useState(0);Declares code used in the example.
return <button onClick={() => setCount(count + 1)}>count: {count}</button>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Hooks let you reuse stateful logic across components.
  • 2They are the modern default in React.
⚠Common Mistakes
  • 1Calling hooks conditionally.
  • 2Forgetting dependencies in effects.
✅Best Practices
  • 1Follow the Rules of Hooks.
  • 2Keep dependency arrays accurate.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React What is Hooks?
∙ Chapter 040

React useState

Learn React useState with a small example you can edit and run.

📝Syntax
const [state, setState] = React.useState(initialValue);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-usestate.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [open, setOpen] = React.useState(false);Declares code used in the example.
return <button onClick={() => setOpen(!open)}>{String(open)}</button>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Hooks let you reuse stateful logic across components.
  • 2They are the modern default in React.
⚠Common Mistakes
  • 1Calling hooks conditionally.
  • 2Forgetting dependencies in effects.
✅Best Practices
  • 1Follow the Rules of Hooks.
  • 2Keep dependency arrays accurate.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React useState
∙ Chapter 041

React useEffect

Learn React useEffect with a small example you can edit and run.

📝Syntax
React.useEffect(() => { /* effect */ }, [deps]);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-useeffect.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [n, setN] = React.useState(0);Declares code used in the example.
React.useEffect(() => { document.title = 'n=' + n; }, [n]);Effect hook: runs after render.
return <button onClick={() => setN(n + 1)}>n: {n}</button>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Hooks let you reuse stateful logic across components.
  • 2They are the modern default in React.
⚠Common Mistakes
  • 1Calling hooks conditionally.
  • 2Forgetting dependencies in effects.
✅Best Practices
  • 1Follow the Rules of Hooks.
  • 2Keep dependency arrays accurate.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React useEffect
∙ Chapter 042

React useContext

Learn React useContext with a small example you can edit and run.

📝Syntax
const value = React.useContext(SomeContext);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-usecontext.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
const Theme = React.createContext('light');Declares code used in the example.
function Badge(){Declares code used in the example.
const t = React.useContext(Theme);Declares code used in the example.
return <span>theme: {t}</span>;Returns JSX (UI).
}JavaScript/JSX line.
function App(){Declares code used in the example.
return <Theme.Provider value="dark"><Badge /></Theme.Provider>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Hooks let you reuse stateful logic across components.
  • 2They are the modern default in React.
⚠Common Mistakes
  • 1Calling hooks conditionally.
  • 2Forgetting dependencies in effects.
✅Best Practices
  • 1Follow the Rules of Hooks.
  • 2Keep dependency arrays accurate.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React useContext
∙ Chapter 043

React useRef

Learn React useRef with a small example you can edit and run.

📝Syntax
const ref = React.useRef(null);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-useref.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const ref = React.useRef(null);Declares code used in the example.
return (JavaScript/JSX line.
<div>JavaScript/JSX line.
<input ref={ref} />JavaScript/JSX line.
<button onClick={() => ref.current && ref.current.focus()}>Focus</button>JavaScript/JSX line.
</div>JavaScript/JSX line.
);JavaScript/JSX line.
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Hooks let you reuse stateful logic across components.
  • 2They are the modern default in React.
⚠Common Mistakes
  • 1Calling hooks conditionally.
  • 2Forgetting dependencies in effects.
✅Best Practices
  • 1Follow the Rules of Hooks.
  • 2Keep dependency arrays accurate.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React useRef
∙ Chapter 044

React useReducer

Learn React useReducer with a small example you can edit and run.

📝Syntax
const [state, dispatch] = React.useReducer(reducer, initialState);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-usereducer.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function reducer(state, action){Declares code used in the example.
if(action.type === 'inc') return { count: state.count + 1 };JavaScript/JSX line.
return state;JavaScript/JSX line.
}JavaScript/JSX line.
function App(){Declares code used in the example.
const [state, dispatch] = React.useReducer(reducer, { count: 0 });Declares code used in the example.
return <button onClick={() => dispatch({type:'inc'})}>count: {state.count}</button>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Hooks let you reuse stateful logic across components.
  • 2They are the modern default in React.
⚠Common Mistakes
  • 1Calling hooks conditionally.
  • 2Forgetting dependencies in effects.
✅Best Practices
  • 1Follow the Rules of Hooks.
  • 2Keep dependency arrays accurate.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React useReducer
∙ Chapter 045

React useCallback

Learn React useCallback with a small example you can edit and run.

📝Syntax
const fn = React.useCallback(() => {}, [deps]);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-usecallback.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [n, setN] = React.useState(0);Declares code used in the example.
const inc = React.useCallback(() => setN(x => x + 1), []);Declares code used in the example.
return <button onClick={inc}>n: {n}</button>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Hooks let you reuse stateful logic across components.
  • 2They are the modern default in React.
⚠Common Mistakes
  • 1Calling hooks conditionally.
  • 2Forgetting dependencies in effects.
✅Best Practices
  • 1Follow the Rules of Hooks.
  • 2Keep dependency arrays accurate.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React useCallback
∙ Chapter 046

React useMemo

Learn React useMemo with a small example you can edit and run.

📝Syntax
const memo = React.useMemo(() => compute(x), [x]);
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-usememo.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function App(){Declares code used in the example.
const [items] = React.useState([3,1,2]);Declares code used in the example.
const total = React.useMemo(() => items.reduce((a,b) => a + b, 0), [items]);Declares code used in the example.
return <p>total: {total}</p>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Hooks let you reuse stateful logic across components.
  • 2They are the modern default in React.
⚠Common Mistakes
  • 1Calling hooks conditionally.
  • 2Forgetting dependencies in effects.
✅Best Practices
  • 1Follow the Rules of Hooks.
  • 2Keep dependency arrays accurate.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React useMemo
∙ Chapter 047

React Custom Hooks

Learn React Custom Hooks with a small example you can edit and run.

📝Syntax
function useX(){ /* hook */ }
⚡Example (Edit & Run)

Edit the React code below and click Run. The preview panel shows the rendered UI.

react-custom-hooks.jsx
📝 Edit Code
👁 Live Preview
💡 Tip: start by changing one line, rerun, and observe the UI change.
🔍Line-by-line
LineMeaning
function useToggle(initial=false){Declares code used in the example.
const [on, setOn] = React.useState(initial);Declares code used in the example.
const toggle = React.useCallback(() => setOn(x => !x), []);Declares code used in the example.
return [on, toggle];JavaScript/JSX line.
}JavaScript/JSX line.
function App(){Declares code used in the example.
const [on, toggle] = useToggle();Declares code used in the example.
return <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>;Returns JSX (UI).
}JavaScript/JSX line.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);Creates a root for rendering.
🏢Real-world
  • 1Hooks let you reuse stateful logic across components.
  • 2They are the modern default in React.
⚠Common Mistakes
  • 1Calling hooks conditionally.
  • 2Forgetting dependencies in effects.
✅Best Practices
  • 1Follow the Rules of Hooks.
  • 2Keep dependency arrays accurate.
📖Summary & Practice
  • 1Practice by editing the example and rerunning.
  • 2Keep code readable first; optimize later.
💡Practice: answer the questions below, then modify the example to match your answers.
  • 1Change one UI detail and rerun.
  • 2Add one edge case and handle it.
  • 3Explain the result in 1 sentence.
📈SEO

Keywords (topic intent):

React React Custom Hooks
←
PreviousBack to Home
 🎉 React Tutorial Complete (47 topics)!
Next UpTypeScript Basics →