• admin
  • 4 Tháng Chín , 2023
Tối ưu kích thước file build cho production

Hi ae, bài viết này xem tìm xem thử cái nào chiếm dung lượng nhiều trong project của mình và optimized nó nhé. Nếu mình chỉ build thông thường thì khó mà phát hiện ra cái gì chiếm nhiều dung lượng, mình dùng vite nên ở đây mình giới thiệu công cụ Rollup Plugin Visualizer, […]

  • admin
  • 4 Tháng Chín , 2023
Lazyload component với react lazy

Nghĩ lễ 2/9 sâu quá ghé blog chém gió xíu xíu chớ ae quên mình mất 😆 Đôi lúc ae code nhiều nhưng quên mất lúc build để deploy lên production thì không biết ra sao hè. Ae mở package.json và xem thử lệnh build như thế nào nhé dev: để ae dev quen quá […]

  • admin
  • 7 Tháng Bảy , 2023
Tạo Modal với React Portal

Say hi những ngừi ae của toiiiii. Bài viết này là khai bút con Mạc Bục đã mua cách đây 2 tuần của toiiii kaka. Máy chạy nhanh quá làm mình cũng quên luôn viết bài trên blog của mình hehe. À blog được tài trợ bởi server của ngừi anh thân thương Thành Trung. […]

  • admin
  • 23 Tháng Sáu , 2023
useCallback trong react

Hi 500 ae. Bài này mình giới thiệu về 1 hook là useCallback cũng như sử dụng nó ra sao nhé. Lướt thuiiiii Chúng ta thường dùng useCallback khi mình không muốn function của chúng ta được khởi tạo lại mỗi lần component chúng ta re-render [crayon-666ac2e3534d6792320834/] Cách dùng thì tham số đầu tiên là […]

  • admin
  • 19 Tháng Sáu , 2023
React.memo và useMemo trong React

Say hi 5 chăm ae, bài này sẽ là bài đầu tiên trong chuỗi React Hook nâng chình xíu nhé. Bỏ qua các hook basic như useState, useEffect, useContext…Hơi nhiều lời rồi, lướt thoiiiii Chắc ae đã biết thì component sẽ re-render state hoặc props được cập nhật, compoent cha re-render khiến component con cũng […]

  • admin
  • 16 Tháng Sáu , 2023
Custom hook trong react

Hello 5 chăm ae, lại là Tú Pê Vê đây 😁. Bài viết này mình sẽ giới thiệu với các bạn về custom là gì và dùng như thế nào nhé. Custom hook là những hook riêng do chúng ta tạo, để chúng ta chia sẻ state, logic giữa các component với nhau. Mình để […]

  • admin
  • 30 Tháng Một , 2023
Phòng chống tấn công XSS cho website

Hello mí ae bài viết này mình sẽ share kỹ thuật phòng chống XSS nghen. Ví dụ ở những field mà server trả về cho mình về dạng HTML thì ae không thể render như kiểu JSX product.description được nó sẽ gặp tình trạng kiểu như bên dưới, đấy là cách mà JSX chống lại […]

  • admin
  • 2 Tháng Bảy , 2022
Giới thiệu về React Hook Form API

Hello ae bài viết này mình sẽ sơ lược về thư viện React Hook Form API và những api mình hay dùng của thằng này nhé! Link thư viện: React Hook Form Mình thường sử dụng các hook chính để làm việc chủ yếu là hook useForm, Controller, ErrorMessage. Mình dùng bản v6 nhé Hook […]

  • admin
  • 13 Tháng Sáu , 2022
Tổng quan Redux

Chắc ae mới học React thì cũng nghe về Redux sơ qua rồi hen, bài viết này mình cùng tìm hiểu tổng quan về Redux trong React là gì nha. Redux là gì? Nó là thư viện quản lý state cho các app javascript Sử dụng kiến trúc uni-directional data flow, quản lý data flow […]

  • admin
  • 13 Tháng Sáu , 2022
Routing trong React only post 😁

Bài viết này mình sẽ nói về routing trong React nghen. Nhưng mà ở version 5 thôi nhé, version mới mình chưa update hehe Package: react-router-dom npm i --save react-router-dom@^5 Các component trong react-router-dom Router: Component bao bọc tất cả các component khác của routing, mình sử dụng là BrowerRouter còn các loại khác các bạn […]

  • admin
  • 12 Tháng Sáu , 2022
So sánh giữa props và state

Props: Thường thì thì sẽ props được set bởi component cha và truyền vào component con. Component con không thể thay đổi được, nếu muốn thay đổi thì component cha thay đổi rồi truyền xuống lại State: Bản thân component nó có. Có thể xử lý cập nhật các kiểu trong đó nên thường được […]

  • admin
  • 6 Tháng Sáu , 2022
Styling trong React

Nay mình cùng tìm hiểu các cách khác nhau để style trong React nghen. I. Inline styles – Thêm vào thuộc tính style của tag html, và viết các thuộc tính theo dạng camelCase nha. Ví dụ backgroundColor, textAlign… [crayon-666ac2e354646353360695/] – Cách này ít dùng, chỉ dùng khi cần thay đổi styles theo props, hoặc […]

  • admin
  • 6 Tháng Sáu , 2022
Life cycles trong React

Life cycles là 1 phần khá quan trong trong React, nó giúp mình hiểu hơn về cách hoạt động của 1 component ra sao. Bài viết này mình sẽ nói về life cycles trong React nghen. Đầu tiên thì các component life cycle chỉ có trong Class Component thôi nha. Với component trong ReactJs, life […]

  • admin
  • 6 Tháng Sáu , 2022
Chia component như thế nào cho hiệu quả trong React

Có nhiều phương pháp chia component nên số loại component sẽ khác nhau. Ở bài viết này mình chia React theo 2 loại component – Container: Smart component Quản lý, xử lý xử liệu (Có thể get api lấy data, hoặc data tĩnh, cung cấp dữ liệu và có dữ liệu để render) Không quan […]

  • admin
  • 4 Tháng Sáu , 2022
Context trong React

Hi mọi người hôm nay mình sẽ nói về 1 useContext() hook trong React nha. Context cung cấp phương pháp để chia sẻ những giá trị giữ các component với nhau Mình có cây component sau: App(status: false) -> Header -> Menu -> User -> Profile Mình muốn truyền 1 dât từ App sang component […]

  • admin
  • 2 Tháng Sáu , 2022
useState trong React

Tiếp nối bài viết về hook useEffect() thì hôm nay mình sẽ nói về hook useState() nha useState() cũng là 1 hook cơ bản trong React, nó giúp mình sử dụng được state trong functional component Nó cũng là 1 cái hàm thôi, đầu vào là 1 initialState có thể là giá trị hoặc cũng […]

  • admin
  • 31 Tháng Năm , 2022
useEffect trong React

Hi mọi người bài này mình sẽ nói về hook useEffect() nha useEffect() là 1 hook trong React hook hỗ trợ cho functional component. Thường được dùng xử lý các vấn đề liên quan đến side-effects. Side effects có thể hiểu nôm na là những thứ mà nó tác động, chạy phía bên ngoài component […]