Introduction to React JS
React is the world's most popular JavaScript library for building user interfaces. Created by Facebook (Meta) and open-sourced in 2013, it has become the go-to choice for single-page applications, dashboards, mobile apps (via React Native), and full-stack frameworks like Next.js. This chapter explains what React is, why it exists, how the Virtual DOM works, and what makes React's component model so powerful — with real code you can run right here.
1. What is React?
React (also called React.js or ReactJS) is an open-source JavaScript library for building user interfaces — specifically for the view layer of an application. It was created by Jordan Walke at Facebook and first deployed on Facebook's News Feed in 2011. It was open-sourced in 2013.
React is not a full framework — it doesn't include routing, state management, or HTTP clients by default. Instead, it focuses entirely on rendering UI, giving you the freedom to compose it with whatever other libraries suit your project.
// A React component is just a JavaScript function that returns JSX
function Greeting() {
return <h1>Hello, React! 👋</h1>;
}
// Render it into the DOM
ReactDOM.createRoot(document.getElementById('root'))
.render(<Greeting />);The snippet above shows the essence of React: you write a component (a function), and React figures out how to display it in the browser. Everything in React is built from components — buttons, forms, pages, entire apps.
2. Why React? Key Advantages
Developers and companies choose React for a combination of technical benefits and ecosystem maturity. Here are the core reasons:
3. The Virtual DOM Explained
The Virtual DOM (VDOM) is one of React's most important concepts. It's a lightweight, in-memory representation of the real browser DOM. When your component's state changes, React doesn't touch the real DOM directly — instead it:
This process is called reconciliation. The algorithm React uses is called Fiber (introduced in React 16) and it can prioritize updates, pause work, and resume it later — enabling features like Concurrent Mode and Suspense.
diff
Only the <p> text changes — React patches just that
node in the real DOM.
key prop when rendering lists. It helps React
identify
which items changed, were added, or removed — making reconciliation much faster.
4. JSX — JavaScript XML
JSX is a syntax extension for JavaScript that looks like HTML but compiles to
React.createElement() calls. You don't have to use
JSX,
but virtually every React developer does because it makes component structure intuitive and
readable.
const element = <div className="card"> <h2>React Rocks!</h2> <p>Simple & fast</p> </div>;
const element = React.createElement( 'div', {className: 'card'}, React.createElement('h2',null,'React Rocks!'), React.createElement('p', null, 'Simple & fast') );
JSX rules you must remember:
className for CSS
classes in JSX — class is a reserved JS
keyword.
<div> or a React Fragment: <>...</>
<img /> and <br /> must be self-closing in JSX (unlike
HTML5).
<p>{2 + 2}</p> renders "4". Variables,
ternaries, function calls — all work.
onclick → onClick, tabindex
→ tabIndex. All event handlers and most attributes
are camelCase.
function UserCard({ name, age, isAdmin }) {
return (
<> {/* Fragment — no extra DOM node */}
<div className="card">
<h2>{name}</h2> {/* variable */}
<p>Age: {age}</p> {/* expression */}
{isAdmin && <span>Admin ✅</span>} {/* conditional */}
<img src="/avatar.png" alt={name} /> {/* self-closing */}
</div>
</>
);
}5. Components — The Building Blocks
Every piece of a React UI is a component. Components can be as small as a button or as large as an entire page. They accept inputs called props and return JSX describing what the UI should look like.
MyButton).
Lowercase names are treated as native HTML elements by React.
// Small reusable button component
function Button({ label, onClick, variant = 'primary' }) {
return (
<button
className={`btn btn-${variant}`}
onClick={onClick}
>
{label}
</button>
);
}
// Parent component composes children
function App() {
return (
<div>
<Button label="Save" onClick={() => alert('Saved!')} />
<Button label="Cancel" onClick={() => alert('Cancelled!')} variant="outline" />
</div>
);
}6. React vs Angular vs Vue
All three are popular choices for building SPAs. Here's a concise comparison:
| Feature | ⚛ React | 🅰 Angular | 💚 Vue |
|---|---|---|---|
| Type | Library (View only) | Full Framework | Progressive Framework |
| Language | JavaScript / JSX | TypeScript | JavaScript / SFC |
| Learning Curve | Moderate | Steep | Gentle |
| Data Binding | One-way | Two-way | Both |
| Performance | Very High (VDOM) | High | Very High |
| Job Demand (2025) | 🔥 Highest | High (Enterprise) | Growing |
| Mobile | React Native | Ionic | NativeScript |
| SSR / Meta-framework | Next.js, Remix | Angular Universal | Nuxt.js |
7. The React Ecosystem
React's power multiplies through its ecosystem. Here are the key libraries you'll encounter throughout this tutorial series:
8. Your First React App (CDN, no build tool)
You don't need Node.js or a build tool to try React. Use the CDN links below to run React directly in any HTML file — perfect for learning and quick demos:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My First React App</title>
<!-- React + ReactDOM CDN -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Babel to compile JSX in the browser -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div style={{ textAlign: 'center', padding: '40px' }}>
<h1>⚛ My First React App</h1>
<p>Count: <strong>{count}</strong></p>
<button onClick={() => setCount(count + 1)}>Increment +</button>
<button onClick={() => setCount(0)} style={{ marginLeft: '8px' }}>Reset</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);
</script>
</body>
</html>npm create vite@latest) or
Create React App (npx create-react-app my-app).
9. Code It Live — React Playground
The best way to learn React is to write it. Copy any code example from this chapter and paste it into OneCompiler's React IDE — it supports JSX, Babel, hooks, and multiple files with zero setup required. Just click the button below and start experimenting.
- Builds a new VDOM tree
- Diffs it against the previous snapshot (reconciliation)
- Only patches the minimal set of changes into the real DOM
- Use
classNameinstead ofclass - Self-close all empty tags:
<img />,<br /> - Events use camelCase:
onClick,onChange - JSX must return a single root element (or a Fragment
<></>) - JavaScript expressions go inside curly braces:
{count},{isAdmin && "Admin"}
A framework (like Angular) provides an opinionated, all-in-one solution with those features built in, and you build inside its structure. React gives you freedom to compose your own stack.
class in
JSX?- React is an open-source JavaScript library for building UI — not a framework.
- It uses a Virtual DOM with diffing/reconciliation to update only what changed.
- JSX lets you write HTML-like syntax in JavaScript, compiled by Babel.
- Everything in React is a component — a function that returns JSX.
- Data flows one-way (parent → child via props) for predictable UIs.
- React's ecosystem (Router, Redux, Next.js, etc.) makes it the most versatile UI option.
- Use Vite for production setup; CDN + Babel for quick experiments.
Join Our Learning Community
Connect with thousands of learners, get daily tips, ask questions and stay updated with new tutorials.