ReactJS: So sánh cách viết logic để sử dụng lại giữa HOCs vs. Render Props vs. Hooks

Trong React, chúng ta có thể sử dụng Higher-Order Components và Render Props để viết một số logic và sử dụng lại cho nhiều component khác nhau. Với React v16.8, chúng ta lại có thêm một lựa chọn tối ưu hơn là sử dụng Hooks. Khi Hooks ra đời, nó đã làm thay đổi toàn … Read moreReactJS: So sánh cách viết logic để sử dụng lại giữa HOCs vs. Render Props vs. Hooks

Giải thích chi tiết những câu lệnh thường dùng trong Git

Có lẽ chúng ta đã quá quen với Git, một trong những công cụ để quản lí repository (hay còn gọi là version control) hiệu quả nhất hiện nay. Và developer không thể sống thiếu Git được phải không nào? Bên cạnh một số câu lệnh đơn giản chúng ta sử dụng hằng ngày, sau … Read moreGiải thích chi tiết những câu lệnh thường dùng trong Git

English: Một số tính từ đồng nghĩa thông dụng

Sau đây là một số tính từ quen thuộc mà chúng ta sử dụng hằng ngày. Thỉnh thoảng bạn cảm thấy nhàm chán khi sử dụng lặp đi lặp lại những từ này. Một trong những cách hiệu quả để cải thiện vốn từ vựng của mình là bạn có thể nghiên cứu thêm nhiều … Read moreEnglish: Một số tính từ đồng nghĩa thông dụng

Tự học ReactJS: React Suspense – So sánh một số cách fetch data từ API

Khi chúng ta fetch data cho một component, chắc chắn mọi người đều muốn lấy data nhanh nhất và sớm nhất có thể. Trước đây, nếu không có React.Suspense chúng ta sẽ gọi API sau khi component mounted. Có lẽ cách này hơi chậm, chúng ta phải chờ cho đến các giai đoạn sau hoàn … Read moreTự học ReactJS: React Suspense – So sánh một số cách fetch data từ API

Tự học ReactJS: React Suspense – Lấy dữ liệu từ API

Concurrent mode là gì? Đây là một kỹ thuật cho phép chúng ta thực hiện một số công việc (như fetch data từ api) song song với quá trình render component. Nó giúp tăng tốc trang web khi load dữ liệu từ server, đặc biệt với các thiết bị low-end như mobile. Lưu ý rằng … Read moreTự học ReactJS: React Suspense – Lấy dữ liệu từ API

Tự học ReactJS: React Patterns – Sử dụng control props

Thỉnh thoảng, người dùng (dev) muốn điều khiển và quản lí những state bên trong một component từ bên ngoài. Pattern state reducer cho phép chúng ta quản lí state bên trong component Toggle hiệu quả. Nhưng bây giờ mục tiêu là phải cho phép người dùng (dev) tự quản lí state (on/off) của Toggle … Read moreTự học ReactJS: React Patterns – Sử dụng control props

Tự học ReactJS: React Patterns – Sử dụng state reducer

Ở hai bài trước chúng ta đã sử dụng React.useState để quản lí state (on/off) của Toggle. Nếu như bạn muốn quản lí những component phức tạp hơn như dropdown, autocomplete, table,… Bạn có thể thay thế React.useState bằng React.useReducer. Khi chúng ta quản lí state bằng cách sử dụng React.useReducer thì được gọi là … Read moreTự học ReactJS: React Patterns – Sử dụng state reducer

Tự học ReactJS: React Patterns – Props collection và getter

Ở bài trước chúng ta đã bàn luận về Toggle component và cách để làm nó dễ dàng sử dụng hơn bằng functional component. Trong này bài, chúng ta tiếp tục sử dụng Toggle làm ví dụ nhưng với cách khác là dùng props collections và getter để cài đặt nó với custom hook (useToggle). … Read moreTự học ReactJS: React Patterns – Props collection và getter

Tự học ReactJS: React Patterns – Compound components

Định nghĩa Khi chúng ta kết hợp nhiều components với nhau tạo thành một component hoàn chỉnh được gọi là compound component. Một ví dụ kinh điển là <select> và <option> trong HTML: <select> có nhiệm vụ quản lí state (option nào được nào, và active option nào), còn <option> thì đảm nhận trách nhiệm … Read moreTự học ReactJS: React Patterns – Compound components

Tự học ReactJS: React Patterns – Context module function

Bài toán Giả sử chúng ta có đoạn code sử dụng React.Context và React.useReducer cho ví dụ kinh điển Counter như sau: Nếu chú ý vào Counter component, chúng ta nhận thấy rằng có hai hàm increment và decrement gọi dispatch. Có vẻ cách viết này hơi rườm rà và hơi bất tiện nếu chúng … Read moreTự học ReactJS: React Patterns – Context module function