Tự học ReactJS: Sử dụng useContext

Chia sẻ state giữa các component là bài toán phổ biến trong React app. Giải pháp tốt nhất là bạn phải lifting state. Nhưng nó yêu cầu bạn phải truyền props xuống cho các component con. Điều đó không phải là vấn đề quá lơn, nhưng trong một số trường hợp truyền props xuống quá … Read moreTự học ReactJS: Sử dụng useContext

Tự học ReactJS: Sử dụng useCallback

Bạn có còn nhớ dependency list của useEffect không? Ôn lại một chút nhé: React.useEffect(() => { window.localStorage.setItem(‘count’, count) }, [count]) // <– that’s the dependency list Hãy nhớ rằng React sẽ dựa vào dependency list để so sánh, nếu giá trj trong dependency list thay đổi, React sẽ gọi callback trong useEffect (nếu bạn … Read moreTự học ReactJS: Sử dụng useCallback

Tự học ReactJS: Sử dụng useReducer

Có thể bạn đã thành thạo sử dụng useState trong React để quản lí component state. Thỉnh thoảng nếu bạn có nhiều thành phần trong một state, giống như bạn có một object bao gồm nhiều state cùng một lúc, ví dụ như: const [state, setState] = useState({ firstName: ‘Thau’, lastName: ‘Nguyen’, age: 30 }) … Read moreTự học ReactJS: Sử dụng useReducer

Tự học ReactJS: Sử dụng useEffect để gọi HTTP requests

HTTP requests là một trong những side-effect thường gặp trong một website. Nó cũng tương tự các side-effect khác như tương tác với DOM hay localStorage. Các side-effect chúng ta có thể xử lý bên trong useEffect callback. Hook này đảm bảo rằng mỗi khi có sự thay đổi trong component, các side-effect được chạy … Read moreTự học ReactJS: Sử dụng useEffect để gọi HTTP requests

Tự học ReactJS: Sử dụng useRef và useEffect với DOM

Thông thường khi làm việc với React, chúng ta cần phải tích hợp vào thao tác với UI library. Và đôi khi một số thư viện cần thao tác trực tiếp với DOM. Trong React, khi bạn sử dụng <div>Some content</div> đây chỉ là cú pháp từ React.createElement. Cho nên bạn sẽ không truy cập … Read moreTự học ReactJS: Sử dụng useRef và useEffect với DOM

Tự học ReactJS: Đẩy state lên component cha (lifting state)

Một câu hỏi phổ biến mà các bạn React mới bắt đầu hay quan tâm là: “Làm thế nào để chia sẻ state giữa hai component anh em với nhau“. Câu trả lời là “đẩy state đó lên component cha” (lifting state) có nghĩa là bạn tìm một cha chung gần nhất cho hai component … Read moreTự học ReactJS: Đẩy state lên component cha (lifting state)

Tự học ReactJS: Sử dụng useEffect

React.useEffect là một hook được build sẵn trong React. Nó cho phép chạy một số side-effect sau khi một component đã render. Nó nhận vào một callback function và sẽ được React gọi sau khi DOM được cập nhật: React.useEffect(() => { // code side-effect của bạn ở đây // đây là nơi lý tưởng … Read moreTự học ReactJS: Sử dụng useEffect

Tự học ReactJS: Sử dụng useState

Thông thường một ứng dụng tương tác với người dùng cần phải quản lí state ở đâu đó. Trong React, bạn sẽ sử dụng một hàm đặc biệt gọi là “hooks” để làm điều đó. Một số hooks có sẵn như sau: React.useStateReact.useEffectReact.useContextReact.useRefReact.useReducer Những function đặc biệt này bạn có thể gọi trong React component … Read moreTự học ReactJS: Sử dụng useState

Tự học ReactJS: Làm việc với Form

Trong React, thực sự không có nhiều cách để làm việc với Form. Nó không quá khác khi bạn tạo form với DOM APIs trong Javascript thông thường. Tôi nghĩ điều đó thật tuyệt vời. Bạn có thể thêm event vào hàm onSubmit trên Form. Sau đó, nó sẽ liên kết với form của bạn … Read moreTự học ReactJS: Làm việc với Form

Tự học ReactJS: Style trong React

Có hai cách chính để style cho react components: Inline styles với style propSử dụng className prop và css selector style prop Trong HTML bạn có thể truyền css như một chuỗi như sau: <div style=”margin-top: 20px; background-color: blue;”></div> Trong React, bạn cần truyền vào một object của css: <div style={{marginTop: 20, backgroundColor: ‘blue’}} /> … Read moreTự học ReactJS: Style trong React