Introduction to React ⚛️

Discover why React is the world's most popular JavaScript library, understand the component model, and write your very first React code with JSX.

What You'll Learn in This Lesson

• What React is and why it dominates front-end development
• The component-based architecture and Virtual DOM
• JSX syntax — writing HTML inside JavaScript
• How to set up a React project with Vite
• The difference between React and vanilla JavaScript

Running Code Locally: Our editor simulates React concepts using JavaScript. For real React development, install Node.js and create a project with npm create vite@latest.

🎯 Real-World Analogy: Think of React like LEGO bricks. Each component is a brick — a button, a card, a navigation bar. You snap bricks together to build complex structures. If you need to change one brick, you swap it out without rebuilding the entire structure. That's the power of component-based architecture.

1️⃣ What is React?

React is a JavaScript library created by Facebook (now Meta) in 2013. It lets you build user interfaces by breaking them into small, reusable pieces called components. Instead of manipulating the DOM directly (like vanilla JS), React uses a Virtual DOM — an in-memory representation that efficiently updates only what changes.

React is used by companies like Netflix, Airbnb, Instagram, Discord, and millions of developers worldwide. It's not a full framework (like Angular) — it focuses purely on the UI layer, which makes it flexible and easy to integrate.

2️⃣ The Component Model

In React, everything is a component. A component is a JavaScript function that returns JSX (HTML-like syntax). Components can be nested, reused, and composed together to build complex UIs from simple building blocks.

Try It: Component Model

Visualize how React breaks UIs into a tree of reusable components

Try it Yourself »

JavaScript

// Your First React Component — simulated in JavaScript
console.log("=== What is React? ===");
console.log("React is a JavaScript library for building user interfaces.");
console.log("Created by Facebook (Meta) in 2013, it's the most popular UI library.");
console.log();

// React uses a component-based architecture
console.log("=== Component Model ===");
console.log("Think of a webpage as a tree of reusable building blocks:");
console.log();
console.log("  <App>");
console.log("    ├── <Header 
...

3️⃣ JSX — HTML in JavaScript

JSX stands for JavaScript XML. It lets you write HTML-like code directly in your JavaScript files. Under the hood, JSX is transformed into React.createElement() calls. You can embed any JavaScript expression inside JSX using curly braces {expression}.

Try It: JSX Syntax

Learn JSX rules — expressions, single root, and fragments

Try it Yourself »

JavaScript

// JSX — HTML-like Syntax in JavaScript
console.log("=== JSX Examples ===");
console.log();

// JSX is syntactic sugar for React.createElement()
console.log("JSX:          <h1>Hello, World!</h1>");
console.log("Compiles to:  React.createElement('h1', null, 'Hello, World!')");
console.log();

// Embedding expressions in JSX
const name = "Alice";
const age = 28;
console.log("=== Embedding Expressions ===");
console.log(`const name = "${name}";`);
console.log(`const greeting = <h1>Hello, {name}!</h
...

4️⃣ Setting Up Your First Project

The modern way to start a React project is with Vite — it's blazing fast with hot module replacement (HMR). Create React App is the older option but Vite is now recommended by the React team.

Try It: Project Setup

See the complete setup process and project structure

Try it Yourself »

JavaScript

// Setting Up a React Project
console.log("=== Create React App (Modern Way) ===");
console.log();
console.log("Option 1: Vite (Recommended)");
console.log("  npm create vite@latest my-app -- --template react");
console.log("  cd my-app");
console.log("  npm install");
console.log("  npm run dev");
console.log();
console.log("Option 2: Create React App");
console.log("  npx create-react-app my-app");
console.log("  cd my-app");
console.log("  npm start");
console.log();
console.log("=== Project 
...

⚠️ Common Mistakes

⚠️

Forgetting to return JSX — A component must return JSX. An empty function returns undefined, causing errors.

⚠️

Using class instead of className — In JSX, HTML's class attribute becomes className.

💡

Pro Tip: Use React Developer Tools (Chrome/Firefox extension) to inspect your component tree, props, and state in real time.

📋 Quick Reference — React Basics

Concept	Syntax
Function Component	function App() { return <h1>Hi</h1>; }
JSX Expression	<p>{name}</p>
Fragment	<>...</>
className	<div className="box">
Import	import React from 'react';
Export	export default App;

🎉 Lesson Complete!

You now understand what React is, how components work, and how to write JSX. Next, we'll dive into building reusable components and passing data with props!

Introduction to React ⚛️

What You'll Learn in This Lesson

1️⃣ What is React?

2️⃣ The Component Model

Try It: Component Model

3️⃣ JSX — HTML in JavaScript

Try It: JSX Syntax

4️⃣ Setting Up Your First Project

Try It: Project Setup

⚠️ Common Mistakes

📋 Quick Reference — React Basics

🎉 Lesson Complete!

Cookie & Privacy Settings