https://robinhuy.github.io/tags/reactjs/ Recent content in ReactJS on HuyDQ's Blog https://robinhuy.github.io/icons/dragon-thumbnail.png https://robinhuy.github.io/icons/dragon-thumbnail.png Hugo -- gohugo.io Tue, 14 Dec 2021 00:00:00 +0000 https://robinhuy.github.io/blog/tao-hieu-ung-transition-cho-react-app-voi-react-transition-group/ Tue, 14 Dec 2021 00:00:00 +0000 https://robinhuy.github.io/blog/tao-hieu-ung-transition-cho-react-app-voi-react-transition-group/ Để cho các App React hoạt động mượt mà hơn, đẹp hơn, trải nghiệm người dùng tốt hơn, … thì nên có thêm các hiệu ứng animation, transition. Bài viết này mình sẽ hướng dẫn các bạn sử dụng thư viện React Transition Group để tạo hiệu ứng transition một cách nhanh chóng. Để cho tiện thì mình sẽ demo code trên stackblitz.com. Trong ví dụ sẽ sử dụng cả React Router v6 để cấu hình multiple page, và có hiệu ứng transition giữa các page. https://robinhuy.github.io/blog/huong-dan-su-dung-rtk-query-trong-redux-toolkit/ Wed, 13 Oct 2021 00:00:00 +0000 https://robinhuy.github.io/blog/huong-dan-su-dung-rtk-query-trong-redux-toolkit/ RTK Query là một addon trong bộ thư viện Redux Toolkit. Nó giúp chúng ta thực hiện data fetching một cách đơn giản hơn thay vì sử dụng createAsyncThunk để thực hiện async action. Chú ý RTK Query là dùng để query (kết nối API), chứ không phải dùng để code async trong Redux thay cho createAsyncThunk. Nếu bạn chưa từng sử dụng Redux Toolkit thì có thể xem bài hướng dẫn này trước: Hướng dẫn sử dụng React Router và Redux Toolkit. https://robinhuy.github.io/blog/huong-dan-su-dung-createasyncthunk-trong-redux-toolkit/ Tue, 12 Oct 2021 00:00:00 +0000 https://robinhuy.github.io/blog/huong-dan-su-dung-createasyncthunk-trong-redux-toolkit/ Nếu bạn chưa từng sử dụng Redux Toolkit thì có thể xem bài hướng dẫn này trước: Hướng dẫn sử dụng React Router và Redux Toolkit. Bài viết này mình sẽ hướng dẫn cách thực hiện các async logic (xử lý bất đồng bộ) trong Redux Toolkit, cụ thể là sử dụng createAsyncThunk để kết nối với API login. Ví dụ demo chúng ta có thể lấy luôn từ ví dụ trước rồi cải tiến thêm: https://stackblitz. https://robinhuy.github.io/blog/huong-dan-su-dung-react-router-va-redux-toolkit/ Thu, 29 Apr 2021 00:00:00 +0000 https://robinhuy.github.io/blog/huong-dan-su-dung-react-router-va-redux-toolkit/ Với những người mới học React thì Redux thực sự là một cơn ác mộng. Cũng giống như bạn đang code jQuery quen và chuyển sang React, đang chỉnh sửa DOM trực tiếp lại phải chuyển qua dùng state, … Vậy để làm quen với Redux một cách nhanh nhất, chúng ta sẽ thử làm 1 ứng dụng đơn giản như sau: Một website có 2 trang: Dashboard và Login. https://robinhuy.github.io/blog/su-dung-usestate-hook-trong-react-nhu-nao-cho-dung/ Mon, 22 Feb 2021 00:00:00 +0000 https://robinhuy.github.io/blog/su-dung-usestate-hook-trong-react-nhu-nao-cho-dung/ Để quản lý State trong React Function Component, chúng ta dùng Hook useState(). Hàm useState trả về 1 mảng 2 phần tử, phần tử đầu tiên là để khởi tạo state, phần tử thứ 2 là hàm để cập nhật state. Tham số truyền vào hàm useState là giá trị khởi tạo của state. Ví dụ: Khai báo State Phải khai báo useState ở top level của một Function Component (hoặc một custom Hook), không khai báo ở trong một scope nào khác như vòng lặp, điều kiện, hay function con. https://robinhuy.github.io/blog/kien-thuc-javascript-co-ban-can-phai-biet-truoc-khi-hoc-react-native-reactjs/ Wed, 20 Jan 2021 00:00:00 +0000 https://robinhuy.github.io/blog/kien-thuc-javascript-co-ban-can-phai-biet-truoc-khi-hoc-react-native-reactjs/ ReactJS là một Javascript framework rất phổ biến với giới lập trình Web Frontend hiện nay, số lượng tuyển dụng lập trình viên ReactJS cũng rất lớn. Do đó nhiều người mới học Web Frontend sau khi học xong một chút HTML CSS JS là muốn nhảy vào lập trình ReactJS ngay. Điều này dẫn đến hệ lụy là các bạn sẽ bị hổng kiến thức cơ bản, hoặc khi học ReactJS sẽ rất chật vật vì không hiểu cú pháp, không hiểu bản chất, … https://robinhuy.github.io/blog/day-code-create-react-app-len-internet-mien-phi/ Tue, 17 Dec 2019 00:00:00 +0000 https://robinhuy.github.io/blog/day-code-create-react-app-len-internet-mien-phi/ Sau khi code xong 1 ứng dụng bằng Create React App, chúng ta có thể đẩy sản phẩm lên Internet theo 1 trong 3 cách miễn phí sau chỉ với 3 bước (còn nhiều cách khác nhưng tác giả lười viết 😅): 1. Github Pages Giả sử bạn đã có tài khoản trên github là robinhuy, và có 1 repository chứa source code ứng dụng tạo bởi Create React App là react-app. https://robinhuy.github.io/blog/truyen-du-lieu-giua-react-components/ Wed, 27 Nov 2019 00:00:00 +0000 https://robinhuy.github.io/blog/truyen-du-lieu-giua-react-components/ Bài viết được biên dịch và tóm tắt lại từ https://towardsdatascience.com, code demo được chuyển sang dùng Hooks. Xử lý dữ liệu trong React có thể hơi khó khăn một chút, nhưng cũng không quá phức tạp. Tôi đã tổng kết lại 3 cách để truyền dữ liệu giữa các Component trong React: Từ Parent (Component cha) đến Child (Component con) sử dụng Props. Từ Child đến Parent sử dụng Callbacks.