React là gì? Giới thiệu ReactJS cho người mới bắt đầu

React là gì?

Bạn đang học JavaScript và mọi người xung quanh đều nói "phải học React"? Vậy React là gì và tại sao nó lại quan trọng đến vậy?

Trong bài viết này, chúng ta sẽ tìm hiểu React từ A đến Z – dành riêng cho người mới bắt đầu.

React là gì?

React (hay ReactJS) là một thư viện JavaScript mã nguồn mở được phát triển bởi Meta (Facebook) vào năm 2013, dùng để xây dựng giao diện người dùng (UI) cho website và ứng dụng web.

React là thư viện hay framework?

Đây là câu hỏi nhiều người nhầm lẫn:

• Thư viện (Library): Chỉ lo một phần cụ thể (React chỉ lo phần View/UI)
• Framework: Cung cấp đầy đủ mọi thứ (routing, state, v.v.)

React là thư viện, không phải framework. Muốn làm ứng dụng hoàn chỉnh cần kết hợp thêm: React Router (điều hướng), Redux/Zustand (quản lý state), v.v.

Tại sao nên học React?

React phổ biến đến mức nào?

• Stack Overflow Survey 2024: React là framework/library được dùng nhiều nhất – 42% developer toàn cầu
• npm downloads: Hơn 20 triệu lần tải/tuần
• GitHub Stars: 220.000+ stars
• Công ty lớn dùng React: Facebook, Instagram, Airbnb, Netflix, Uber
• Tại Việt Nam: FPT, VNG, Tiki, Shopee Vietnam, MoMo và hầu hết startup đều dùng React

Lợi ích thực tế

• ✅ Component tái sử dụng được: Viết một lần, dùng nhiều nơi
• ✅ Virtual DOM: Hiệu năng cao, cập nhật thông minh
• ✅ Ecosystem khổng lồ: Có sẵn thư viện cho mọi nhu cầu
• ✅ React Native: Học React web xong, làm được cả app mobile
• ✅ Nhu cầu tuyển dụng cao: Nhiều vị trí React Developer tại Việt Nam

Tìm hiểu nghề: Frontend Developer là gì?

Các khái niệm cơ bản trong React

Component – "Viên gạch LEGO" của React

Component là đơn vị cơ bản của React. Giống như LEGO – mỗi viên gạch (component) có thể tái sử dụng để tạo ra những công trình lớn hơn.

// Function Component – cách viết hiện đại
function HelloWorld() {
  return <h1>Xin chào thế giới!</h1>;
}

// Dùng component nhiều lần
function App() {
  return (
    <div>
      <HelloWorld />
      <HelloWorld />
      <HelloWorld />
    </div>
  );
}

JSX – Viết HTML trong JavaScript

JSX là cú pháp đặc biệt trông giống HTML nhưng thực ra là JavaScript:

// JSX cho phép dùng biến JS trong HTML
const name = "Nguyễn Văn A";
const greeting = <h1>Xin chào, {name}!</h1>;

// Lưu ý: class → className (class là từ khóa JS)
const button = <button className="btn-primary">Click</button>;

// Style là object
const style = { color: "red", fontSize: "20px" };
const text = <p style={style}>Styled text</p>;

Props – Truyền dữ liệu vào Component

Props là cách truyền dữ liệu từ component cha xuống component con:

// Component nhận props
function UserCard({ name, age }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Tuổi: {age}</p>
    </div>
  );
}

// Truyền props khác nhau
function App() {
  return (
    <div>
      <UserCard name="Nguyễn Văn A" age={22} />
      <UserCard name="Trần Thị B" age={20} />
    </div>
  );
}

State với useState Hook

State là dữ liệu có thể thay đổi theo thời gian. Khi state thay đổi, React tự động cập nhật giao diện:

import { useState } from 'react';

function Counter() {
  // [giá trị hiện tại, hàm cập nhật] = useState(giá trị ban đầu)
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Số lần click: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Tìm hiểu thêm: DOM trong JavaScript – nền tảng mà React xây dựng trên đó.

React vs Vue vs Angular: Nên học gì?

Tiêu chí	React	Vue	Angular
Loại	Library	Framework	Full Framework
Tạo bởi	Meta (Facebook)	Evan You	Google
Độ khó học	Trung bình	Dễ nhất	Khó nhất
Phổ biến (#2024)	1	2	3
Job market	Nhiều nhất	Khá	Trung bình

Lời khuyên: Học React trước – nhiều việc nhất, cộng đồng lớn nhất, dễ chuyển sang Vue/Angular sau.

Bắt đầu với React: Tạo project đầu tiên

# Tạo project với Vite (nhanh nhất, được khuyến dùng)
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Mở trình duyệt tại http://localhost:5173 – React app đầu tiên của bạn đã chạy!

Cần biết gì trước khi học React?

Checklist bắt buộc:

• ✅ HTML & CSS cơ bản
• ✅ JavaScript: const/let, arrow function, array methods
• ✅ ES6 modules (import/export)
• ✅ DOM cơ bản (DOM trong JavaScript)
• ✅ Async/Await (xử lý bất đồng bộ)

Chưa biết JS? Xem: JavaScript là gì?

Lộ trình học React cho người mới

Tuần	Nội dung
1–2	Component, JSX, Props
3–4	State (useState), xử lý sự kiện
5–6	useEffect, gọi API
7–8	React Router (điều hướng)
9–10	Context API (chia sẻ state)
11+	Next.js, TypeScript với React

Xem thêm: Lộ trình Frontend 2026 và Học lập trình ở đâu tốt nhất?

Câu hỏi thường gặp (FAQ)

Cần biết JavaScript giỏi đến mức nào trước khi học React?

Không cần giỏi hoàn toàn, nhưng cần nắm vững: biến, hàm, mảng, object, arrow function, destructuring. Có thể học React và JS cùng lúc!

React và React Native khác nhau thế nào?

React dành cho web. React Native dành cho mobile (iOS/Android). Cả hai dùng cùng ngôn ngữ JavaScript và JSX, nhưng thành phần khác nhau.

Nên học React hay Next.js trước?

Học React trước. Next.js là framework xây dựng trên React, cần hiểu React vững mới học Next.js hiệu quả.