Bản chất của JSX & Mental Model Render trong React

Hiểu rõ JSX không phải HTML, cách React biên dịch JSX thành React.createElement và chu kỳ Render Phase vs Commit Phase.

Môi trường thực hành:

React v19.2 (Client Sandbox)

ESM CDN · Hot Reload

React Playground

React v19.2

Interactive Client Sandbox · Live Hot Reload

6 files

src/main.tsx

Entry File

Instructions:Khám phá cấu trúc component đa file trong React: File `App.tsx` nạp danh sách người dùng từ `data/users.ts` và render từng item bằng Component `components/UserCard.tsx`. Hãy thử thay đổi màu sắc hoặc thêm nút 'Follow' trong file `UserCard.tsx` để xem Live Preview cập nhật tức thì!

File Tree:

index.html

src/main.tsxmain

src/App.tsx

src/components/UserCard.tsx

src/data/users.ts

src/index.css

Supports React, Lucide Icons, TypeScript & Hot-Reload.

React Core Foundations

beginner

15 phút

#React Basics

#JSX

#Virtual DOM

#Mental Model