Giới thiệu về React

React là gì?

React là một thư viện JavaScript để xây dựng giao diện người dùng, được phát triển bởi Facebook.

Ưu điểm của React

• Component-based: Xây dựng UI từ các component tái sử dụng
• Virtual DOM: Hiệu suất cao
• Hệ sinh thái phong phú: React Router, Redux, Next.js
• Cộng đồng lớn

Cài đặt môi trường

Tạo ứng dụng React với Create React App

npx create-react-app my-app
cd my-app
npm start

JSX Basics

JSX là gì?

JSX là cú pháp mở rộng cho JavaScript, cho phép viết HTML trong JavaScript.

Ví dụ cơ bản

function Welcome() {
  return <h1>Hello, World!</h1>;
}

Biểu thức trong JSX

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Components

Function Component

function Button() {
  return <button>Click me</button>;
}

Arrow Function Component

const Button = () => {
  return <button>Click me</button>;
};

Props

Truyền props

function App() {
  return <Welcome name="John" age={25} />;
}

function Welcome(props) {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
      <p>You are {props.age} years old</p>
    </div>
  );
}

Bài tập tiếp theo

Chúng ta sẽ học về State và Events!