Xây dựng chức năng kéo thả File trong React
Trong bài viết này, chúng ta sẽ đi từng bước một xây dựng một bản demo về component Drag-and-drop file upload trong React, tận dụng TypeScript để có type-safe
11/10/2023
8 mins read
Xây dựng Confirm Dialog trong React
Confirm dialog (hay tiếng việt gọi là “hộp thoại xác nhận”) là một trong những thành phần tương tác người dùng phổ biến nhất được thấy trong các ứng dụng ngày nay khi người dùng thực hiện một hành động quan trọng nào đó có khả năng ảnh hưởng cao và không thể hoàn tác
02/09/2023
14 mins read
Tìm hiểu về “useSyncExternalStore” hook trong React
Trong bài viết lần này, chúng ta sẽ cùng tiềm hiểu về `useSyncExternalStore` hook. Đây là một hook hữu ích khi bạn cần tích hợp tính năng quản lý states không có React trong ứng dụng của mình.
23/08/2023
4 mins read
Tìm hiểu về “use” hook trong React
Trong bài viết này, hãy cùng nhau tìm hiểu về công dụng của “use” hook. Lưu ý rằng Hook này chưa có sẵn chính thức trong React.
20/08/2023
2 mins read
Drop drilling là gì và tránh nó thế nào trong React?
Prop Drilling là một khái niệm được nhắc đến trong React, đôi khi không thể tránh khỏi, trong nhiều trường hợp chúng ta không nên áp dụng nó. Trong bài viết lần này, chúng ta sẽ xem xét nó là gì và lý do phải tránh nó như đề cập ở tiêu đề.
17/08/2023
10 mins read
React Batching là gì?
Batching trong React mô tả chi tiết triển khai nội bộ của React, giúp nhóm nhiều yêu cầu cập nhật trạng thái trong một lần cập nhật
14/08/2023
4 mins read
Prop drilling và component composition trong React
Đôi khi tất cả những gì chúng ta cần để tránh việc prop drilling là một chút tái cấu trúc
24/04/2023
3 mins read
Tại sao onClick={fn()} lại gây ra lỗi "too many re-renders" trong React?
Sự khác biệt ở trên là gì?. Tại sao trong ví dụ 2 trên ảnh lại gây ra tình trạng lặp vô hạn "too many re-renders" trong React?.
24/04/2023
3 mins read
Bổ sung một số kỹ năng debug với console.log()
Nếu bạn so sánh cả hai, bạn sẽ thấy điều này hữu ích như thế nào. Tránh nhầm lẫn các giá trị của các biến khi chúng ta debug bằng mắt.
11/04/2023
3 mins read
Làm thế nào để cancel request trong Axios?
Bài viết ngắn gọn và đi thẳng vào vấn đề này chỉ cho bạn 2 cách riêng biệt để cancel một request đang gửi đi trong Axios.
07/04/2023
2 mins read
Làm thế nào để chia sẻ internal refs với component khác?
Thuộc tính `ref` trong React được sử dụng để truy cập một component children hoặc một DOM element. Chúng ta thường sử dụng `ref` với HOC được cung cấp từ React là `forwardRef` hoặc `useRef` hook. Nhưng bạn có bao giờ từ hỏi khi không biết 2 phương thức tương tác với `ref` ở trên có thể tồn tại trong một thời điểm hay không?.
02/04/2023
4 mins read
Refresh token trong Axios như thế nào?
Việc triển khai `refresh token` có thể không còn xa lạ đối với nhiều frontend dev trong chúng ta.
01/04/2023
7 mins read
Axios Interceptors! Tại sao chúng ta cần nó?
Mặc dù đã sử dụng nó rất nhiều, nhưng chúng ta vẫn chưa thực sự tận dụng hết những gì nó đang có. Trong lần này, như tiêu đề đã đề cập, chúng ta sẽ tiến hành tìm hiểu một trong số những thứ quan trọng của Axios mà bạn cần phải biết là Axios Interceptor.
31/03/2023
6 mins read
React.useTransition() hook là gì và sử dụng thế nào?
Một số cập nhật giao diện người dùng nên có sự ưu tiên, thực hiện càng nhanh càng tốt (Nhập giá trị vào một input hay chọn một option từ dropdown), trong khi đó một số thành phần khác nên có độ ưu tiên thấp hơn (lọc danh sách).
17/12/2022
7 mins read
Tìm hiểu về useImperativeHandle hook trong React
`useImperativeHandle` được tạo ra cho các kịch bản mà bạn quyết định `refs` sẽ có và được quyền truy cập gì từ một thành phần tuỳ chỉnh.
10/12/2022
6 mins read
Typescript - Biên dịch & đóng gói thư viện với Webpack
Cấu hình các files Webpack giữa các dự án có thể khác nhau vì nó là một công cụ và các nhà phát triển sẽ luôn giữ nó làm tất cả mọi việc. Nhưng một thư viện đơn giản như hiện tại, tất cả những gì chúng ta cần làm là bundle ra các mã theo chuẩn `es5`.
07/08/2022
10 mins read
Tất cả những gì bạn cần biết về Ref trong React
React Ref (React reference) hiểu đơn giản là một đối tượng tham chiếu đến một biến, một component giữ cho giá trị của nó không thay đổi giữa các lần `render` và truy xuất các giá trị đó thông qua key `current`.
12/06/2022
9 mins read
Đặt điều kiện trong JSX như thế nào cho hợp lý?
Khi phát triển các components, việc đặt các điều kiện bên trong JSX làm đoạn mã của bạn trở nên lộn xộn và khó đọc hơn
24/04/2022
5 mins read
Cách lấy giá trị thuộc tính CSS với Javascript
Đôi khi, khi phát triển dự án chỉ sử dụng CSS sẽ không đủ đối với nhu cầu bạn cần cho một hiệu ứng cần xây dựng. Bạn sẽ cần điều chỉnh được giá trị CSS với Javascript. Nhưng làm sao để lấy giá trị trong CSS để có thể làm việc này?
02/03/2022
4 mins read
Một thủ thuật đơn giản để tối ưu quá trình kết xuất trong React
Chúng được gọi là các đối tượng mô tả giao diện người dùng. Chúng mô tả giao diện người dùng mà React sẽ tạo ra trên DOM.
13/02/2022
7 mins read
Giám sát hiệu xuất ứng dụng với React Profiler
Sẽ tốt hơn nếu bằng cách nào đó chúng ta có thể theo dõi và đánh giá được thời gian kết xuất và gửi thông tin đến máy chủ trong ứng dụng mà, điều này giúp chúng ta có thể kiểm soát và chủ động theo dõi hoạt động của ứng dụng hơn.
12/02/2022
5 mins read
Cải thiện hiệu xuất tương tác form trong React
Xử lý form trong các ứng dụng React hiện tại là một điều không thể thiếu. Từ đó, nó cũng mang đến nhiều hệ luỵ về hiệu xuất nếu chúng ta xử lý sai về nó. Vậy làm thế nào để cải thiện hiệu xuất của Form trong React được cho là đúng?
18/10/2021
16 mins read
Sử dụng React Context như thế nào cho hiệu quả?
Ứng dụng Context trong React và useReducer tốt hơn và hiệu quả hơn như thế nào?
16/10/2021
7 mins read
Trường hợp sử dụng useEffect và useLayoutEffect như thế nào?
Về mặt sử dụng thì cả 2 hook useEffect và useLayoutEffect đều có cách sử dụng giống nhau, nhưng sẽ khác nhau trong một số trường hợp. Vì vậy, trong bài viết này, chúng ta sẽ cân nhắc xem xét các trường hợp khi sử dụng 2 React Hook này.
15/10/2021
3 mins read
CSRF Protection và những điều cần phải biết
Mọi người có tự hỏi vì sao một số email khi nhận được lại nằm trong thư mục spam?. Thành thật mà nói thì hãy thận trọng khi truy cập một trang web tràn ngập quảng cáo và chiêu dụ đá số đã được đính kèm trong mail đó.
16/09/2021
8 mins read
Clean up memory leak trong React useEffect
Memory leak không còn là thuật ngữ quá xa lạ đối với các bạn khi làm việc với React. Đôi khi bạn sẽ thấy thông báo lỗi về rò rì bộ nhớ, điều này cảnh báo rằng chúng ta phải khắc phục nó ngay để tránh tác hại to lớn mà nó mang lại
09/09/2021
7 mins read
React Virtual DOM được hiểu như thế nào
Nếu bạn sử dụng react hoặc đang trong quá trình học React, bạn sẽ nghe qua một thuật ngữ React Virtual DOM
07/09/2021
6 mins read
Cache dữ liệu lấy từ API qua ví dụ đơn giản
Cache không còn là một từ quá xa lạ đối với một lập trình viên web. Chúng ta hay nghe tới nó khi xử lý các yêu cầu truy vấn ở phía máy chủ khi xử lý các yêu cầu có tính thường xuyên và lặp dữ liệu
31/08/2021
7 mins read
Xây dựng tính năng đặt lịch đăng bài với Laravel
Trong wordpress, đôi khi bài blog bạn vừa soạn thảo không được đăng ngay trong lúc đó, bạn sẽ muốn lên lịch đăng bài cho nó vào ngày hôm sau. Yes, cứ đặt lịch đăng bài cho nó thôi vì tính năng đó đã được xây dựng sẵn từ Wordpress.
29/08/2021
7 mins read
Sử dụng React-Query để fetch dữ liệu
Để khôi phục niềm tin của bạn vào việc đồng bộ hóa dữ liệu trạng thái máy chủ với thư viện React Query được cấu hình trước. Xem cách bạn có thể đưa logic tìm nạp, bộ nhớ cache và cập nhật vào một vài dòng mã dễ hiểu với các móc tự động hóa đơn giản được trình bày trong hướng dẫn này.
28/08/2021
8 mins read
Xây dựng Progress Bar khi Upload file với JavaScript
Tính năng này đã được triển khi ở các ông lớn như facebook, google... khi đó quá trình đăng tải tệp tin của bạn sẽ được hiển thị theo tỉ lệ phần trăm để giúp người dùng biết khi nào quá trình tải tệp hoàn thành. Điều này giúp ích rất nhiều đối với việc cải thiện trải nghiệm của người dùng.
03/07/2021
14 mins read
Kiến thức cơ bản về file package.json
Tệp package.json là phần cốt lõi của hệ sinh thái Node.js và là phần cơ bản nhất để hiểu và làm việc với Node.js, npm và cả JavaScript
29/06/2021
6 mins read
Làm thế nào để kết hợp React Hooks với Class Component
Mặc dù mục tiêu phát triển của React Hooks từ functional component sinh ra không phải phục vụ cho mục đích sử dụng nó bên trong một class components.
17/06/2021
4 mins read
Javascript Tips #1: Array
Bài viết chủ yếu tổng hợp các kỹ thuật nhỏ nhưng có võ trong JS. Giúp bạn tiết kiệm thời gian và xử lý các tính huống cơ bản một cách thông minh hơn
11/06/2021
1 mins read
Tìm hiểu về React hook useEffect
Kể từ khi các hooks sinh ra trong phiên bản v1.6. Nó đã kiến React rút ngắn được cách viết, nhưng đánh đổi với điều đó là chúng tương đối khó đối khi mới bắt đầu tìm hiểu.
10/06/2021
7 mins read
Khởi tạo ứng dụng Vue
Mặc dù vue hay còn gọi là vuejs là một công nghệ sinh sau đẻ muộn hơn so với react hay angularjs đời đầu. Nhưng hiện tại, nó có thể coi là một công nghệ, framework đang rất được ưa chuộng trong các dự án của nhiều công ty hiện nay.
05/06/2021
4 mins read
6 cách khai báo function trong JavaScript
JavaScript là có thể coi một ngôn ngữ vô cùng phức tạp và vô số định nghĩa mà các người mới và các lão làng cũng phải lắc đầu. Tuy nhiên, trong sự phức tạp đấy nó mang ý nghĩa riêng cho các trường hợp mà chúng ta ứng dụng. Cách khai báo hàm trong JavaScript cũng vậy, có rất nhiều cách để chúng ta khai báo.
04/06/2021
5 mins read
Góc nhìn trực quan về Javascript: Event Loop
Event Loop, đó là một trong những điều mà các Javascript Developers rất khó có thể hiểu nó ở lần đầu tiên, nhất là đọc các bài viết miêu tả bằng code về nó. Nhưng với miêu tả trực quan thì khó, chúng ta có thể giải thích điều đó thông qua gif hình ảnh miêu tả hoạt động của Event Loop.
14/04/2021
5 mins read
Góc nhìn trực quan về Javascript: Hoisting
Hoisting là một trong những thuật ngữ thông dụng mà lập trình viên JS đều phải nghe qua. Vậy Hoisting là gìtrong javascript mà nó lại biến thành một thuật ngữ được tìm kiếm nhiều đến vậy.
13/04/2021
4 mins read
Debounce là gì trong javascript?
Các sự kiện như scroll, movemouse, click hao tốn của chúng ta rất nhiều tài nguyên mỗi khi nó được gọi để thực hiện một hành động. Sử dụng `debounce` nhằm mục đích giảm hao tổn tài nguyên bằng cách ngăn một chức năng được gọi nhiều lần liên tiếp.
20/03/2021
2 mins read
Phân biệt async và defer trong thẻ script
Trong khi sử dụng thuộc tính async, quá trình phân tích cú pháp HTML đang diễn ra, bất kỳ tập lệnh nào có thuộc tính async đều được tìm nạp từ mạng một cách không đồng bộ cùng với quá trình phân tích cú pháp HTML.
20/03/2021
2 mins read
Các kỹ thuật viết code javascript mà bạn không thể không biết
Từ lúc ra đời đến nay, javascript đã thay đổi rất nhiều, tính đến nay. Chúng ta có hàng chục các viết cho 1 điều kiện trong javascript, rất nhiều các để giải quyết 1 vấn đề, có thể rất dài dòng hoặc phức tạp. Đến nay, các cách giải quyết dang được các nhà sáng lập JavaScript đơn giản hoá nó bằng các cách thức đơn giản hơn qua từng phiên bản.
13/03/2021
4 mins read
CSS Grid #1: Tìm hiểu về Grid
Chúng ta hãy bắt đầu thay suy nghĩ về CSS Grid đi nhé. Đây là Cheatsheet về mọi thứ bạn có thể làm với Grid để bắt đầu vào năm 2021!
07/03/2021
4 mins read
React Hooks Series #1: Tìm hiểu về useState()
Chúng ta hãy cùng bắt đầu chuỗi bài viết nói về React hooks. Mục tiêu chung là nắm được toàn bộ các hooks được cung cấp bởi React và từ những phát triển custom hooks.
03/03/2021
5 mins read
Promise Memoization Pattern
Nếu bạn đang tìm hiểu về cách triển khai bộ nhớ đệm (caching) cho Promise, thì đây sẽ là một bài viết dành cho bạn.
27/02/2021
3 mins read
Những mẹo và thủ thuật sử dụng CSS (Phần 1)
Trong bài viết lần này, chúng ta sẽ tổng hợp những mẹo và thủ thuật thường được sử dụng khi làm việc với CSS để xây dựng trang web tốt hơn. Cũng góp phần cải thiện trải nghiệm người dùng (UX) tốt hơn.
27/02/2021
4 mins read
Cheatsheet và ví dụ về cách xử lý dữ liệu trong React
Có nhiều cách để tìm nạp dữ liệu từ API bên ngoài trong React, nhưng bạn nên sử dụng cách nào cho các ứng dụng của mình vào năm 2021? Trong bài viết này, chúng ta hãy xem lại 5 cách phổ biến được xử dụng để xử lý tìm nạp dữ liệu với React thực hiện các yêu cầu HTTP đến các REST API
21/02/2021
6 mins read
Cùng tìm hiểu về Promise và Async/Await trong JavaScript qua các ví dụ
Mọi thứ trên web hiện nay đều có xu hướng tiêu tốn thời gian, nếu bạn thực hiện một lệnh gọi API để truy vấn dữ liệu, bạn có thể sẽ cần đợi một khoảng thời gian để phía Server phản hồi. Vì thế, lập trình bất đồng một là kỹ năng cần thiết mà lập trình viên cần biết.
20/02/2021
8 mins read
Xây dựng UI Component Design Systems dành cho lập trình viên Frontend (Phần 2)
Có 2 cách để chúng ta thiết kế, xây dựng hệ thống. Lựa chọn phù hợp chủ yếu dựa trên việc bạn là ai và bạn cần đạt được những gì.
19/02/2021
5 mins read
Xây dựng UI Component Design Systems dành cho lập trình viên Frontend (Phần 1)
Thiết kế hệ thống UI Component (User Interface Component) cho phép các nhóm phát triển giới thiệu về trải nghiệm hình ảnh và các chức năng nhất quán của người dùng khác nhau giữa các sản phẩm và ứng dụng.
17/02/2021
10 mins read
Tìm hiểu về useMomo và cách sử dụng hợp lý?
Khi ứng dụng của bạn mở rộng (scales), vấn đề về hiệu xuất sẽ nhiều hơn và hơn thế nữa. Trong khi React đã làm rất tốt khả năng tối ưu và rất nhanh
16/02/2021
6 mins read
Hướng dẫn sử dụng useCallback trong React
React hooks là một phương thức quản lý state mới trong function components, được giới thiệu trong phiên bản React v16.8
14/02/2021
8 mins read
Lưu trữ JWT thế nào cho an toàn?
Trong những năm gần đây, JWT đã được sử dụng rộng rãi như một phương pháp xác thực và uỷ quyền sử dụng trong các ứng dụng web/app.
12/02/2021
8 mins read
Emmet, Abbreviations trong VSCode
Mức độ hiệu quả của công việc dựa vào chất lượng, năng xuất mà chúng ta bỏ ra. Trong kỹ thuật, năng xuất lập trình (phát triển phần mềm) có thể được tính dựa trên số lượng mã xây dựng và thời gian chúng ta dành cho nó, chất lượng của những dòng mã.
08/02/2021
6 mins read
Tự xây dựng modal đơn giản với javascript
Trong bài viết lần này, mình sẽ hướng dẫn sơ lượt các bạn về cách xây dựng component modal đơn giản giống với Bootstrap 4
07/02/2021
8 mins read
Sử dụng forEach trong javascript
Khi làm việc với mảng bạn thường làm gì, lặp qua một mảng? Trong JavaScript, chúng ta có thể sử dụng một số phương thức được cung cấp như map, reduce, etc để lặp mảng
04/02/2021
6 mins read
6 Design Patterns thông dụng trong JavaScript cần biết
Để tiến sâu hơn trong lập trình với ngôn ngữ JavaScript, các bạn nên tích luỹ thêm các kiến thức về các design patterns để giúp code tốt, có cấu trúc và có tổ chức rõ ràng hơn.
01/02/2021
9 mins read
Tìm hiểu phần tử Dialog trong HTML
Diablog (được biết đến là một phương thức hộp thoại được cung cấp sẵn trong phiên bản HTML5) là một hộp thoại cho trang web. Nó cũng được gọi là Modal dialog
31/01/2021
3 mins read
Chi tiết về upload file trong HTML / Javascript
Khả năng Upload file là một tính năng được yêu cầu cho một số trang web và ứng dụng phổ biến hiện nay. Từ việc Upload hình ảnh trên mảng xã hội cho avatar hay resume, lưu các file .pdf, .docx. Hầu như đã xuất hiện ở mọi nơi.
30/01/2021
8 mins read
3 Cách để thêm fonts cho ứng dụng React
Là một newbie, bạn có lẽ con chật vật với React làm sao để thêm thư viện, tích hợp scss, thêm font cho ứng dụng thì đây sẽ là bài viết giúp bạn giải quyết vấn đề đã nêu ở tiêu đề.
29/01/2021
4 mins read
10 Kỹ thuật có thể áp dụng vào dự án thực tế
Chúng ta luôn tìm kiếm những cách làm mới, ngắn hơn, tốt hơn và tối ưu hơn. Và JavaScript thì có muôn vàn cách để xử lý các vấn đề. Những kỹ thuật này bạn có thể áp dụng vào thực tế dự án của bạn.
28/01/2021
4 mins read
Một số mẹo và kỹ thuật trong JavaScript nên biết (Phần 1)
Trong quá trình phát triển dự án to hay nhỏ, có thể code không đủ để giải quyết hết các vấn đề, từ đó, sinh ra một số mẹo, kỹ thuật để giúp đỡ bạn trong quá trình code tốt hơn.
25/01/2021
3 mins read
Những hàm Javascript siêu đơn giản nhưng hữu ích
Xung quanh sự phát triển nổi trội với lối ngôn ngữ thiên về Functions thay vì Class , JavaScript sinh ra một số hàm đơn giản nhưng hữu ích có thể sẽ cần đến trong những dự án mà bạn phát triển.
24/01/2021
3 mins read
Các vấn đề về bảo mật cần nắm trong React
Ngoài việc phát triển ứng dụng, bạn cũng phải chú ý về vấn đề bảo mật cho ứng dụng của mình. Ứng dụng có thể hoạt động tốt nhưng lại đi kèm theo khả năng bảo mật kém sẽ phát sinh nhiều rũi ro không tính trước được.
23/01/2021
4 mins read
For..in và For..of trong javascript!
Khi làm việc với vòng lặp trong JavaScript, chúng ta thường làm việc với các đối tượng như một Array hay Object . Thông thường chúng ta chỉ sử dụng for loop cho việc xử lý mảng
22/01/2021
3 mins read