What it is
UI library
Declarative components, JSX, and efficient DOM updates.
React Introduction
Overview
What You’ll Learn
This page is a self-contained introduction to React—a JavaScript library for building interactive user interfaces. You will understand what React is, how components and JSX work, and why teams choose React for modern front-end apps.
Components
Reusable UI
Functions that return JSX—compose pages from small pieces.
Setup
Vite & CDN
Create a Vite project or load React 18 from a CDN.
State & props
useState
Props pass data in; state tracks what changes over time.
Examples
5 labs
Hello React, components, props, counters, and lists.
Next steps
Hooks & apps
Practice useEffect, forms, routing, and small projects.
Introduction
React is a declarative, efficient, and flexible front-end JavaScript library for creating user interfaces using UI components. Instead of manually updating the DOM every time data changes, you describe what the UI should look like—React figures out the minimal updates needed.
React powers single-page applications, dashboards, mobile apps (via React Native), and static sites. Companies such as Meta, Netflix, Airbnb, and Discord use React in production.
Why it matters?
React really shines when your data changes over time. Build UIs from reusable components, describe markup with JSX, and let React update the DOM efficiently through its virtual DOM.
Key Highlights
Component model
Break UIs into small, reusable, testable pieces.
Declarative UI
Describe the screen for each state—not every DOM step.
Virtual DOM
Diff in memory, patch only what changed in the browser.
Large ecosystem
Next.js, React Router, TanStack Query, and React Native.
In short: React is a view-layer library—compose components, pass props, manage state with hooks, and let React reconcile the DOM.
React Components
React components are small, isolated pieces of code that help you compose complex UIs from simple building blocks. A component is usually a JavaScript function that returns JSX describing what to render.
Build a Button once, reuse it anywhere. Nest components: App → Header → NavItem.
App.jsx
function Button({ label }) {
return <button type="button">{label}</button>;
}
// Reuse anywhere:
// <Button label="Save" />
// <Button label="Cancel" />Beginner tip
Learn JavaScript fundamentals first. React builds on functions, objects, and arrays—you will use all three inside every component.
Background
📖 About React
React is a free and open-source front-end JavaScript library developed by Meta and the open-source community under the MIT License.
Jordan Walke is recognized as the original author. React was first deployed on Facebook’s news feed in 2011 and open-sourced at JSConf US in 2013.
| Detail | Value |
|---|---|
| Developer(s) | Meta and community |
| License | MIT License |
| Original author | Jordan Walke |
| Platform | Web (browser); React Native for mobile |
| First release | 2013 (open source) |
| Written in | JavaScript |
JSX Explained
JSX (JavaScript XML) lets you write HTML-like tags inside JavaScript. Build tools transform JSX into React.createElement calls.
App.jsx
const element = <h1>Hello, {name}!</h1>;
// JSX compiles to:
// React.createElement('h1', null, 'Hello, ', name, '!');| JSX rule | Example |
|---|---|
| Embed expressions | {expression} inside tags |
| One parent | Wrap siblings in <div> or <>fragment</> |
| CSS classes | className="card" not class |
| Self-close tags | <img />, <br /> |
Virtual DOM
The browser DOM is slow to change when you touch many nodes. React keeps a lightweight virtual DOM tree in memory—a JavaScript representation of your UI.
When state or props change, React builds a new virtual tree, compares (diffs) it with the previous one, and updates only the real DOM nodes that actually changed.
Setup
✍ Getting Started with React
Create a project with Vite (recommended)
For real apps, use a build tool. Vite is fast and widely used in 2026:
terminal
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run devTry React in the browser (CDN)
For quick experiments without installing Node.js, load React from a CDN:
index.html
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, React!</h1>);
</script>Concepts
🧰 Core Building Blocks
| Concept | What it does |
|---|---|
| Components | Functions or classes that return UI |
| JSX | Markup syntax inside JavaScript |
| Props | Read-only inputs passed from parent to child |
| State | Data that changes over time (useState, useReducer) |
| Hooks | Functions like useEffect for side effects in function components |
| Virtual DOM | In-memory UI tree for efficient updates |
| Event handling | onClick, onChange with camelCase props |
Cheat Sheet
⚡ Quick Reference
| Task | Example |
|---|---|
| Render app | root.render(<App />); |
| Component | function Card() { return <div />; } |
| Props | <Welcome name="Alex" /> |
| State | const [n, setN] = useState(0); |
| List render | {items.map(i => <li key={i.id}>{i.text}</li>)} |
| Effect | useEffect(() => { ... }, []); |
Compare
📋 React vs Vanilla JavaScript
Same UI tasks—different mental models.
Update text
setCount(n + 1)React: change state; component re-renders automatically
Reusable UI
<Button />React: one component, many instances with different props
Render a list
items.map(...)React: declarative JSX; vanilla JS needs manual DOM loops
Context
When to Use React
Pick React when the UI is interactive, stateful, and expected to grow.
Data changes often
Forms, feeds, dashboards, and live apps where state drives the UI.
Reusable UI pieces
Design systems, shared buttons, cards, and layout shells.
Team scale
Large codebases where component boundaries keep features isolated.
Plain HTML is enough
Static marketing pages with little interactivity may not need React at all.
Key benefit: React is a library focused on the view layer—you add routing, data, and tooling as your app grows.
Hands-On
Examples Gallery
Five starter demos. Use View Output to preview here, or open Try It Yourself to edit and run React in the browser editor (CDN + Babel).
Example 1 — Hello, React!
Mount React to a DOM node and render your first JSX heading.
index.html
<div id="root"></div>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, React!</h1>);
</script>How It Works
ReactDOM.createRoot attaches React to a DOM node. root.render puts JSX on screen—React creates the real <h1> for you.
Example 2 — Function component
A component is a function that returns a JSX tree.
App.jsx
function Greeting() {
return (
<div>
<h1>Welcome to React</h1>
<p>Components are reusable pieces of UI.</p>
</div>
);
}
root.render(<Greeting />);How It Works
Greeting is a function component. Calling <Greeting /> runs the function and renders the returned JSX tree.
Example 3 — Props
Pass data from a parent into a child component.
App.jsx
function Welcome({ name }) {
return <h1>Hello, {name}!</h1>;
}
function App() {
return (
<div>
<Welcome name="Alex" />
<Welcome name="Sam" />
</div>
);
}How It Works
Props are read-only inputs. name="Alex" becomes props.name inside Welcome, so one component renders many greetings.
Example 4 — Counter with useState
State lets a component remember and update values over time.
App.jsx
const { useState } = React;
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button type="button" onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}How It Works
useState(0) returns the current count and a setter. Clicking the button calls setCount, state updates, and React re-renders the component with the new number.
Example 5 — Render a list
Map an array to JSX list items with a stable key.
App.jsx
function TodoList() {
const tasks = ['Learn JSX', 'Build a component', 'Add state'];
return (
<ul>
{tasks.map((task) => (
<li key={task}>{task}</li>
))}
</ul>
);
}How It Works
tasks.map turns each string into a <li>. The key prop helps React track list items efficiently when the array changes.
Use Cases
Where React earns a place in modern front-end development.
1. Single-page apps
Dashboards, admin panels, and client-heavy web apps.
Example: analytics or CRM UI.
2. Interactive forms
Multi-step wizards, validation, and live field feedback.
Example: checkout or signup flows.
3. Live data feeds
Social timelines, chat, notifications, and real-time charts.
Example: messaging sidebar widget.
4. Design systems
Shared buttons, cards, and layout primitives across products.
Example: company component library.
5. React Native
Reuse component thinking for iOS and Android mobile apps.
Example: cross-platform product app.
6. Incremental adoption
Add React to one widget or page inside an existing site.
Example: embed a React search bar.
Advantages
Why teams choose React for production UIs.
1. Component-driven UI
Break interfaces into reusable, testable pieces.
2. Declarative updates
Describe UI per state; React handles DOM diffing.
3. Huge ecosystem
Next.js, React Router, TanStack Query, and UI libraries.
4. Strong hiring demand
One of the most requested front-end skills worldwide.
Usage Tips
Small habits that keep React code predictable.
1. Learn JavaScript first
Functions, arrays, objects, and destructuring appear in every component.
2. Start with Vite for real projects
Use the CDN for quick demos; use Vite when you need modules and production builds.
3. Install React DevTools
Inspect component trees, props, and state while you debug.
Common Pitfalls
Mistakes that commonly trip up new React developers.
1. Mutating state directly
Changing
count++withoutsetCountskips a re-render.→ Always use the setter from
useState.2. Missing keys in lists
React warns when list items lack stable
keyprops.→ Prefer unique IDs over array index when order can change.
3. Expecting React to be a full framework
Routing, data fetching, and global state need companion libraries.
→ Plan for Vite, React Router, or Next.js as the app grows.
4. Over-engineering state on day one
Global stores before you need them add complexity fast.
→ Lift state up gradually; start with local
useState.
🧠 How React Updates the UI
1
Event or data change
User clicks a button, or fetch loads new JSON into state.
Trigger
2
Re-render components
React calls your component functions with new props/state.
Render
3
Diff virtual DOM
React compares the new tree with the previous one.
Reconcile
=
DOM patch applied
Only changed nodes update on screen—fast, interactive UI.
Important
Notes
- Library, not framework. React handles the view layer; add routing and data tools as needed.
- JSX is optional. Almost every project uses it because it keeps UI structure readable.
- MIT licensed. Free for personal and commercial projects, maintained by Meta and the community.
- Hooks in new code. Prefer function components with
useStateanduseEffectover class components.
Quick Takeaway: Compose components, pass props, manage state with hooks, and let React reconcile the DOM when data changes.
Compatibility
Browser Support
React runs in modern browsers after you load the library or bundle your app. These tutorials use React 18 with Vite or CDN setups. Logos use the shared browser-image-sprite.png sprite from this project.
React 18
React in modern browsers
Load React and ReactDOM, mount with createRoot, and render components. Production builds target evergreen browsers via your bundler.
100% With React loaded
Google Chrome Supported · Desktop & Mobile
Full supportMozilla Firefox Supported · Desktop & Mobile
Full supportApple Safari Supported · macOS & iOS
Full supportMicrosoft Edge Supported · Chromium
Full supportInternet Explorer No native support · Use a polyfill
PolyfillOpera Supported · Modern versions
Full supportSamsung Internet Supported · Android
Full supportBun Supported · JavaScript runtime
SupportedDeno Supported · JavaScript runtime
SupportedNode.js Supported · Server runtime
SupportedAndroid WebView Supported · Modern WebView
Full supportReact Evergreen
Bottom line: Use Vite or a similar bundler for production apps. CDN + Babel is fine for learning demos on this site.
🎉 Conclusion
React is a declarative JavaScript library for building user interfaces with reusable components. Describe what the screen should look like for a given state, and React efficiently updates the browser through its virtual DOM.
Start with the CDN examples on this page, then create a Vite project when you are ready to build a real app. Practice props, useState, and list rendering before moving on to routing and data fetching.
Learn JavaScript fundamentals first—React builds on functions, objects, and arrays every day.
Pro Tips
💡 Best Practices
✅ Do
- Keep components small and focused on one job
- Use meaningful prop and state names
- Add
keywhen rendering lists - Install React DevTools in your browser
- Prefer function components and hooks in new code
- Lift shared state up to the nearest common parent
❌ Don’t
- Mutate state directly—use setter functions
- Skip learning JavaScript before React
- Put fetch logic everywhere without a clear pattern
- Use array index as
keywhen list order changes - Over-engineer global state on day one
- Ignore accessibility (labels, buttons, semantic HTML)
Summary
Key Takeaways
Knowledge Unlocked
Five things to remember about React
Your gateway to components, JSX, props, state, and hooks.
5
Core concepts 01
UI library
View layer only—not a full framework
Basics 02
JSX
Markup inside JavaScript
Syntax 03
Props
Read-only parent → child data
Data in 04
State
useState for changing data
05
Virtual DOM
Diff in memory, patch the browser
Runtime❓ Frequently Asked Questions
React is a declarative JavaScript library for building user interfaces. You compose UIs from reusable components, describe what the screen should look like for a given state, and React efficiently updates the browser when data changes.
React is a library focused on the view layer. It handles UI rendering and component logic. Routing, global state, and data fetching are often added with companion libraries like React Router or handled by meta-frameworks such as Next.js.
Yes. React is written in JavaScript (or TypeScript). Learn variables, functions, arrays, objects, and ES6 features like arrow functions and destructuring before diving into components, props, and hooks.
JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Build tools transform JSX into React.createElement calls. It makes component templates readable and keeps structure close to logic.
Yes. React is open source under the MIT License, maintained by Meta and a large community. You can use it in personal and commercial projects without licensing fees.
Practice props, state with useState, and rendering lists with map. Then learn useEffect, forms, fetching data, React Router, and a build tool like Vite. Build small apps—a todo list, weather widget, or dashboard—to solidify concepts.
Did you Know? 🔊
React really shines when your data changes over time. Build UIs from reusable components, describe markup with JSX, and let React update the DOM efficiently through its virtual DOM. React Native brings the same component model to mobile apps used by Meta, Microsoft, and many startups.
Try Hello, React!
Run the first example in the live editor, then explore props and useState.
About the author
11 people found this page helpful