Học React với ví dụ chạy trực tiếp
Hướng dẫn React 19 miễn phí: component, JSX, props, state, hook và hiệu năng. Mọi ví dụ đều chạy ngay trên trang, nên bạn có thể sửa code và xem component cùng console cập nhật.
Bắt đầu khóa họcBắt đầu
- React là gìReact là một thư viện JavaScript để xây dựng giao diện người dùng từ các component. Bạn mô tả màn hình cần hiển thị gì với dữ liệu hiện tại, và React giữ cho trang luôn khớp khi dữ liệu đó thay đổi.
- Cài đặt ReactCài đặt React bằng cách tạo dự án với Vite: kiểm tra Node.js, chạy một lệnh tạo dự án, cài dependency và khởi động dev server. Bài viết cũng nói về các tệp được tạo ra, cách build cho production và vì sao Create React App đã bị ngừng hỗ trợ.
- JSXJSX là một phần mở rộng cú pháp của JavaScript, cho phép bạn viết markup giống HTML bên trong component React. Tìm hiểu các quy tắc của nó: một phần tử gốc, đóng mọi thẻ, className, thuộc tính camelCase, dấu ngoặc nhọn, style nội tuyến, chú thích và JSX được biên dịch thành gì.
- ComponentMột component React là một hàm JavaScript trả về JSX. Tìm hiểu cách viết và đặt tên function component, ghép chúng thành cây, tách chúng ra nhiều tệp, giữ chúng thuần, và component khác element ở điểm nào.
- PropsProps là đầu vào của một component React: những giá trị component cha truyền cho component con dưới dạng thuộc tính JSX. Tìm hiểu cách truyền và destructure props, đặt giá trị mặc định, truyền hàm, spread props và vì sao props chỉ đọc.
- Childrenchildren là prop chứa mọi thứ bạn viết giữa thẻ mở và thẻ đóng của một component. Tìm hiểu cách dùng nó để tạo component bọc và component layout, truyền nhiều slot qua các prop có tên, dùng children như một hàm, và khi nào API Children không phải công cụ phù hợp.
- FragmentFragment trong React gom nhiều phần tử thành một giá trị trả về mà không thêm nút nào vào trang. Tìm hiểu cú pháp ngắn <>...</>, khi nào cần <Fragment key>, và vì sao fragment quan trọng bên trong bảng và danh sách.
- Render có điều kiệnRender có điều kiện trong React chỉ là JavaScript thuần: một câu lệnh if, toán tử ba ngôi hoặc && quyết định component trả về JSX nào. Tìm hiểu từng mẫu, số 0 lạc mà && có thể in ra, việc trả về null, và vì sao ẩn một component không giống với không render nó.
- List và keyĐể render một danh sách trong React, bạn gọi map() trên mảng và trả về JSX cho từng phần tử, kèm một prop key cho mỗi phần tử. Tìm hiểu filter rồi map, key nên lấy từ đâu và vì sao key từ index làm lẫn lộn phần tử khi danh sách thay đổi.
- Sự kiệnSự kiện trong React là các props như onClick và onChange nhận một hàm, được React gọi kèm một đối tượng sự kiện khi người dùng thao tác. Tìm hiểu cách truyền handler thay vì gọi nó, truyền đối số, đọc e.target.value và e.key, chặn form tải lại trang và ngăn sự kiện nổi bọt.
- StylingBạn tạo kiểu cho component React bằng className và CSS thông thường, bằng prop style cho các giá trị tính từ JavaScript, bằng CSS Modules cho tên class có phạm vi riêng, hoặc bằng các class tiện ích của Tailwind. Tìm hiểu từng cách, class có điều kiện và khi nào nên dùng cách nào.
State và biểu mẫu
- useStateuseState cho component một giá trị tồn tại qua các lần render và một hàm setter vẽ lại màn hình khi giá trị đổi. Tìm hiểu cú pháp, hàm updater, object và mảng trong state, và vì sao giá trị trông như cũ ngay sau khi bạn set nó.
- Cập nhật mảng và objectĐể thay đổi một mảng hay object trong state React, hãy tạo một bản mới rồi truyền cho hàm set. Tìm hiểu cách thêm, xóa, thay thế, chèn và sắp xếp phần tử, cập nhật object lồng nhau, và vì sao thay đổi trực tiếp state khiến màn hình không đổi.
- FormXây dựng form trong React với input được kiểm soát: ô văn bản, textarea, select, checkbox và radio, một đối tượng state cho nhiều ô nhập, gửi form bằng onSubmit, hiển thị lỗi kiểm tra dữ liệu và form action của React 19.
- Controlled và uncontrolledMột input controlled lấy giá trị từ state của React và chỉ thay đổi qua onChange. Một input uncontrolled tự giữ giá trị trong DOM, và bạn đọc nó bằng ref hoặc FormData. Tìm hiểu sự khác biệt, các cảnh báo thường gặp và khi nào nên dùng loại nào.
- Lifting state upLifting state up là chuyển state ra khỏi hai component và đặt vào component cha chung gần nhất, nơi truyền giá trị và hàm cập nhật xuống lại qua props. Tìm hiểu khi nào cần lift, cách làm trong ba bước và khi nào nên giữ state cục bộ.
- useReduceruseReducer lưu state và gom mọi cập nhật vào một hàm reducer: bạn dispatch một action, và reducer trả về state tiếp theo. Tìm hiểu cú pháp, cách viết reducer thuần, ví dụ danh sách việc cần làm, khởi tạo lười và khi nào nên chọn nó thay cho useState.
Effect và ref
- useEffectuseEffect chạy code sau khi React đã cập nhật màn hình, để component đồng bộ với thứ nằm ngoài React: một timer, một subscription, một event listener. Tìm hiểu ba dạng mảng dependency, hàm cleanup, vòng lặp vô hạn và khi nào bạn không cần effect.
- Lấy dữ liệuLấy dữ liệu trong React bằng cách bắt đầu request trong useEffect, giữ trạng thái đang tải, lỗi và dữ liệu trong state, và bỏ qua các response đến sau khi đầu vào đã thay đổi. Bao gồm async/await trong effect, AbortController, race condition và khi nào nên dùng thư viện.
- useRefuseRef cho component một chiếc hộp, `{ current }`, giữ nội dung giữa các lần render mà không gây render khi bạn thay đổi nó. Dùng nó để chạm tới một node DOM (focus, cuộn, đo kích thước) hoặc lưu id của timer hay bất kỳ giá trị nào màn hình không hiển thị.
- forwardRefforwardRef cho phép một component nhận ref từ component cha và gắn nó vào một nút DOM bên trong. Ở React 19, function component nhận `ref` như một prop bình thường, nên code mới không cần forwardRef nữa. Xem cả hai phiên bản chạy trực tiếp, cùng useImperativeHandle và kiểu TypeScript.
- useLayoutEffectuseLayoutEffect hoạt động giống useEffect nhưng chạy ngay sau khi React cập nhật DOM và trước khi trình duyệt vẽ. Dùng nó để đo một phần tử và chỉnh bố cục mà không bị nháy hình, còn mọi việc khác cứ để useEffect lo.
Hook và context
- React HooksHook là một hàm có tên bắt đầu bằng use, cho phép component dùng một tính năng của React như state, context, ref hay effect. Xem mọi hook có sẵn được nhóm theo mục đích, hai quy tắc mà hook nào cũng tuân theo và cách tự viết hook của riêng bạn.
- useContextuseContext đọc một giá trị mà component cha cung cấp, nhờ đó một component lồng sâu nhận được nó mà không cần mọi component ở giữa truyền xuống qua prop. Tìm hiểu createContext, provider, cách cập nhật context từ component con và context ảnh hưởng đến việc render lại ra sao.
- Prop drillingProp drilling là truyền một prop qua những component không dùng đến nó, chỉ để một component ở sâu hơn đọc được. Xem ví dụ chạy trực tiếp, vì sao nó gây khó khi ứng dụng lớn dần và các cách khắc phục theo thứ tự nên thử: composition, context, rồi thư viện quản lý state.
- Custom hookCustom hook là một hàm có tên bắt đầu bằng use và gọi các hook khác, giúp nhiều component dùng lại cùng một logic có state. Hãy tự viết useToggle, useLocalStorage, useDebounce và useWindowWidth, và hiểu vì sao mỗi lần gọi có state riêng.
- Rules of HooksHook có hai quy tắc: gọi chúng ở cấp cao nhất của component, không bao giờ trong điều kiện, vòng lặp hay hàm lồng nhau, và chỉ gọi chúng từ function component hoặc custom hook. Tìm hiểu vì sao React cần cùng một thứ tự gọi ở mọi lần render và cách sửa các lỗi xuất hiện khi thứ tự đó thay đổi.
- useIduseId trả về một id duy nhất và ổn định cho mỗi instance của component, để label, input và gợi ý aria-describedby trỏ được tới nhau kể cả khi component xuất hiện nhiều lần. Tìm hiểu vì sao Math.random và biến đếm hỏng khi render phía server, và vì sao useId không dùng làm key cho danh sách.
- useSyncExternalStoreuseSyncExternalStore giúp component theo dõi dữ liệu nằm ngoài React, như một module store nhỏ hoặc API trình duyệt như navigator.onLine, và render lại mỗi khi dữ liệu đó thay đổi. Tìm hiểu subscribe và getSnapshot, vì sao snapshot phải được cache, và getServerSnapshot.
Render và hiệu năng
- RenderMột component React render lại khi state của nó thay đổi, khi component cha render, hoặc khi một context nó đọc thay đổi. Tìm hiểu sự khác nhau giữa render và commit, virtual DOM thực chất là gì, và cách chặn những lần render không cần thiết.
- useMemouseMemo lưu cache kết quả của một phép tính giữa các lần render và chỉ tính lại khi dependency thay đổi. Tìm hiểu cú pháp, cách giữ một object ổn định cho component con dùng memo, và khi nào useMemo không đáng dùng.
- useCallbackuseCallback trả về cùng một hàm giữa các lần render cho đến khi dependency thay đổi. Nó chỉ có ích khi hàm đó được truyền cho một component con dùng memo hoặc là dependency của một effect. Tìm hiểu cú pháp, điểm khác với useMemo và những lỗi cần tránh.
- React.memomemo bọc một component để React bỏ qua lần render lại khi props bằng nhau (so sánh nông) với lần trước. Tìm hiểu khi nào memo có ích, vì sao object và hàm mới trong props làm nó mất tác dụng, và những gì nó không chặn được.
- useTransitionuseTransition đánh dấu một lần cập nhật state là không khẩn cấp, để React giữ trang luôn phản hồi trong khi render phần chậm ở chế độ nền. Tìm hiểu isPending, startTransition, transition bất đồng bộ trong React 19 và vì sao nó không phải debounce.
- useDeferredValueuseDeferredValue cho bạn một bản sao của giá trị được phép chậm lại trong những lần render nặng, nhờ đó ô nhập vẫn phản hồi nhanh trong khi danh sách chậm bắt kịp sau. Tìm hiểu cách nó hoạt động, giá trị ban đầu trong React 19, và so sánh với useTransition và debounce.
- Suspense và lazySuspense hiển thị fallback khi các component bên trong chưa sẵn sàng, còn React.lazy chỉ tải code của component ở lần render đầu tiên. Tìm hiểu code splitting, boundary lồng nhau, Suspense với use() trong React 19 và cách xử lý lỗi.
React 19 và nâng cao
- React 19React 19 bổ sung Actions, useActionState, useOptimistic, use, ref như một prop và metadata cho tài liệu, còn 19.2 thêm Activity và useEffectEvent. Xem từng tính năng chạy trực tiếp, những gì đã bị loại bỏ và cách nâng cấp.
- useActionStateuseActionState bọc một action bất đồng bộ, giữ giá trị mà nó trả về gần nhất, và cho bạn biết nó có đang chạy hay không. Tìm hiểu cú pháp, form action, cách trả về lỗi kiểm tra dữ liệu, và cách gọi nó bên ngoài form.
- useOptimisticuseOptimistic hiện kết quả bạn mong đợi trong lúc một action async vẫn đang chạy, rồi quay về state thật khi action kết thúc, nên một request thất bại sẽ tự hoàn tác. Tìm hiểu cú pháp, dạng reducer và vì sao nó phải chạy bên trong một action.
- useuse đọc giá trị của một promise hoặc một context trong lúc render. Với promise, nó tạm dừng (suspend) cho đến khi dữ liệu về và hiển thị fallback của Suspense gần nhất. Khác với các hook khác, nó có thể chạy bên trong câu lệnh if và vòng lặp.
- Error boundaryError boundary là component bắt các lỗi bị ném ra khi render những component bên trong nó và hiển thị fallback thay vì một màn hình trắng. Tìm hiểu nó bắt được gì, cách viết nó bằng class, cách đặt lại nó và thư viện react-error-boundary.
- PortalcreatePortal render một phần của component vào một DOM node khác, chẳng hạn document.body, trong khi vẫn giữ nguyên vị trí trong cây React. Dùng nó cho modal, tooltip và menu cần thoát khỏi overflow hidden và z-index.
- Strict ModeStrictMode là lớp bọc chỉ có tác dụng ở môi trường development: nó render component hai lần, chạy setup, cleanup rồi setup của effect khi mount, và cảnh báo các API đã lỗi thời, để render không thuần và cleanup bị thiếu lộ ra sớm. Ở production, nó không làm gì cả.
- Vòng đời componentMọi component React đều mount (xuất hiện), update (render lại) và unmount (bị gỡ bỏ). Tìm hiểu mỗi giai đoạn tương ứng với useEffect ra sao, các phương thức vòng đời của class và hook tương đương, cùng hai pha render và commit.
- Class componentClass component là một lớp JavaScript kế thừa React.Component và trả về JSX từ phương thức render. Tìm hiểu this.props, this.state và setState, bind trình xử lý sự kiện, các phương thức vòng đời, PureComponent và cách chuyển một class sang function component.
So sánh và phỏng vấn
- Câu hỏi phỏng vấn ReactKhoảng 30 câu hỏi phỏng vấn React từ cơ bản đến nâng cao, mỗi câu có một câu trả lời ngắn mà nhà tuyển dụng chấp nhận, kèm code chạy trực tiếp cho những câu dễ hiểu khi nhìn hơn là khi đọc.
- React vs AngularReact là thư viện giao diện bạn kết hợp với các công cụ khác; Angular là framework đầy đủ, có sẵn định tuyến, form, HTTP và dependency injection. So sánh cùng các component được viết bằng cả hai, đặt cạnh nhau.
- React vs VueReact và Vue đều là công cụ JavaScript để xây dựng giao diện người dùng từ các component. Chúng khác nhau ở cách viết markup (JSX và template), ở cách phản ứng với thay đổi (state bất biến và render lại so với ref reactive có thể thay đổi), và ở mức độ chính thức của hệ sinh thái.
- React với TypeScriptCách khai báo kiểu cho ứng dụng React bằng TypeScript: props và children, useState với union và null, useRef cho phần tử DOM, trình xử lý sự kiện, context, component generic và props của phần tử gốc.
