Lesson 1: Introducing React

React & Next.js: From Basics to Advanced

Part 1: React Fundamentals

xdev.asia

1. What is React?

React is a JavaScript library for building user interfaces (UI), developed by Meta (Facebook). React is not a framework — it just focuses view layer and allows you to choose other tools for routing, state management, data fetching.

1.1. Core Concepts

• Component-Based: UI is divided into independent, reusable components
• Declarative: UI description should look like, React automatically handles DOM updates
• Virtual DOM: React creates a virtual DOM in memory, compares and only updates the changed part
• Unidirectional data flow: Data flows from parent → child through props

1.2. How does Virtual DOM work?

User Action → setState() → Virtual DOM re-render (in memory)
    → Diffing (so sánh Virtual DOM cũ và mới)
    → Reconciliation (chỉ update DOM thật ở phần thay đổi)

2. Compare React vs Vue vs Angular vs Svelte

Features	React	Vue	Angular	Svelte
Type	Library	Framework	Framework	Compiler
Learning Curve	Medium	Easy	Hard	Easy
Bundle Size	~45KB	~33KB	~143KB	~2KB
Performance	Fast (Virtual DOM)	Fast (Virtual DOM)	Fast (Change Detection)	Fastest (No runtime)
Ecosystem	Largest	Large	Complete	Growing. Growing
TypeScript	Excellent	Good	Built-in	Good
SSR	Next.js	Nuxt	Angular Universal	SvelteKit
Jobs	Most	Many	Many	Growing. Growing

3. Setup Project with Vite

# Create React + TypeScript project
npm create vite@latest my-app -- --template react-ts

cd my-app
npm install
npm run dev

3.1. Project Structure

my-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── App.tsx          ← Root component
│   ├── App.css
│   ├── main.tsx         ← Entry point
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

4. JSX Syntax

// JSX = JavaScript XML
// Cho phép viết HTML-like syntax trong JavaScript

// ✅ JSX
const element = <h1>Hello, React!</h1>;

// ↓ Biên dịch thành
const element = React.createElement('h1', null, 'Hello, React!');

4.1. JSX Rules

function App() {
  const name = 'Duy';
  const isLoggedIn = true;
  const items = ['React', 'Vue', 'Angular'];

  return (
    // Rule 1: Phải có 1 root element (hoặc Fragment)
    <>
      {/* Rule 2: Expressions trong {} */}
      <h1>Hello, {name}!</h1>

      {/* Rule 3: className thay vì class */}
      <div className="container">
        {/* Rule 4: htmlFor thay vì for */}
        <label htmlFor="email">Email</label>

        {/* Rule 5: CamelCase cho attributes */}
        <input onClick={() => {}} tabIndex={0} />

        {/* Rule 6: Self-closing tags */}
        <img src="logo.png" alt="Logo" />
        <br />

        {/* Conditional rendering */}
        {isLoggedIn && <p>Welcome back!</p>}
        {isLoggedIn ? <Dashboard /> : <Login />}

        {/* List rendering */}
        <ul>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>

        {/* Inline styles (object, camelCase) */}
        <div style={{ backgroundColor: 'blue', fontSize: '16px' }}>
          Styled div
        </div>
      </div>
    </>
  );
}

5. First Component

// src/components/Greeting.tsx
function Greeting() {
  return (
    <div>
      <h1>Xin chào từ React! 🚀</h1>
      <p>Đây là component đầu tiên của bạn.</p>
    </div>
  );
}

export default Greeting;

// src/App.tsx
import Greeting from './components/Greeting';

function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

export default App;

Next article: Components, Props & TypeScript — functional components, typing props, and component composition.