Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase). On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequests

Tạo request từ trình duyệt bằng XMLHttpRequest

Biến đổi dữ liệu request và response

Tự động chuyển đổi cho dữ liệu JSON

Hỗ trợ phía client bảo vệ chống lại XSRF

importaxios from 'axios';
// Tạo một request để truy xuất người dùng ứng với ID cho sẵn:
axios.get('/user?ID=12345')
.then(function(response){
// xử trí khi thành công
console.log(response);
})
.catch(function(error){
// xử trí khi bị lỗi
console.log(error);
})
.then(function(){
// luôn luôn được thực thi
});
// Cái request bên trên cũng có thể được làm bằng cách sau, tùy
ý
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
})
.then(function(){
// luôn luôn được thực thi
});
// Nếu muốn sử dụng async/await thì viết như sau
asyncfunctiongetUser(){
try{
const response =await axios.get('/user?ID=12345');
console.log(response);
}catch(error){
console.error(error);
}}

axios

:root Tham chiếu đến phần tử gốc của file html

:hover Kích hoạt khi di chuột vào đối tượng

:active Kích hoạt khi bấm giữ vào đối tượng

:first-child Chọn phần tử con đầu tiên

:last-child Chọn phần tử con cuối cùng

selector:pseudo-class {
property: value;
}

selector::pseudo-element {
 property: value;
}

Pseudo

Event Loop là cơ chế giúp Javascript có thể thực hiện nhiều thao tác cùng một lúc (concurrent model)

Event Loop là cơ chế giúp Javascript có thể thực hiện nhiều thao tác cùng một lúc (concurrent model), trước giờ vẫn nghe nói 

 có thể xử lý cả hàng ngàn request cùng một lúc mặc dù nó chỉ dùng một thread duy nhất (Single Threaded). Nếu như ở PHP hay Java thì với mỗi một request sẽ sinh ra một thread để xử lý request đó, các thread hoạt động độc lập, được cấp bộ nhớ, giao tiếp ngoại vi và trả về kết quả. Vậy làm thế nào để NodeJs có thể xử lý cả ngàn request một lúc với chỉ một thread duy nhất?.

Có một sự thật là trên web browser thì trong khi get data từ các url thì người dùng vẫn có thể thực hiện các thao tác khác như click button và gõ vào các ô textbox. Tất cả là nhờ có các web apis và cơ chế hoạt động của Event Loop. Tuy Js Runtime chỉ có một thread duy nhất nhưng các web apis giúp nó giao tiếp với thế giới multi thread bên ngoài, tận dụng các con chip đa nhân vốn rất phổ biến hiện nay. Web apis giúp đẩy các job ra bên ngoài và chỉ tạo ra các sự kiện kèm theo các handler gắn với các sự kiện. Kể cả đối với NodeJs khi không có web apis thì nó vẫn có các cơ chế tương đương khác giúp đẩy job ra bên ngoài và chỉ quản lý các đầu việc. Web Apis hoạt động như vậy thì Event Loop sẽ thế nào ?

Event Loop hoạt động như thế nào?

Event Loop có tên như vậy bởi vì có một vòng lặp vô tận trong Javascript Runtime (V8 trong Google Chrome) dùng để lắng nghe các Event.

while (queue.waitForMessage()) {
queue.processNextMessage();
}

Nhiệm vụ của Event Loop rất đơn giản đó là đọc Stack và Event Queue. Nếu nhận thấy Stack rỗng nó sẽ nhặt Event đầu tiên trong Event Queue và handler (callback hoặc listener) gắn với Event đó và đẩy vào Stack. Đặc điểm của việc thực thi hàm trong JS là sẽ chỉ dừng lại khi hàm return hoặc throw exception. Có nghĩa là trong khi hàm đang chạy thì sẽ không có một hàm khác được chạy, dữ liệu tạm của hàm cũng sẽ không bị thay đổi bởi một hàm khác hay cũng không bị dừng lại cho đến khi hoàn thành (ngoại trừ yield trong ES6).

Như các bạn thấy trên hình thì JS Runtime còn thao tác với một callback queue hay event queue ngoài stack ra. Event queue này khác với stack ở chỗ nó là queue kiểu FIFO (First In First Out). Mỗi khi có một Event được tạo ra, ví dụ user click vào một Button thì một Event sẽ được đẩy vào Event queue cùng với một handler (event listener) gắn với nó. Nếu một Event không có listener thì nó sẽ bị mất và không được đẩy vào Event queue. Để cho dễ hình dung cách thức hoạt động của Event Loop ta lấy một ví dụ như sau:

Event loop

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Constraint-based: An API for your design system

Tailwind cung cấp các class đã được định nghĩa trước, điều này tạo sự ràng buộc nhất định thay vì mỗi người sẽ có 1 kiểu css khác nhau. Chúng giúp nhất quán về màu sắc, khoảng cách, kiểu chữ,... tạo nên một design system tốt.

Build anything: Build whatever you want, seriously

Các class được cung cấp rất sâu giúp ta có thể tác động sâu vào css. Do vậy chúng ta có thể dễ dàng build bất kỳ thứ gì mà ta muốn mà không gặp trở ngại nào.

Performance - It’s tiny: never ship unused CSS again

Tailwind tự động xóa tất cả css không sử dụng khi build product, có nghĩa là gói css sẽ nhỏ nhất có thể.

Tailwind cung cấp các tiền tố sm, md, lg, xl, 2xl đặt trước các class để giúp ta dễ dàng responsive

State variants: Hover and focus states? We got ’em

Tương tự như responsive, tailwind còn cung cấp những tiền tố trạng thái(state variants) như hover, focus, active,...

Đặc biệt: Taildwind còn có 1 số state variants được phát minh riêng: group

Khi bạn cần css cho child element dựa trên trạng thái của parent element khác, hãy đánh dấu ‘group’ class cho parent element và đặt ‘group-*’ class chẳng hạn ‘group-hover’ vào child element để tạo kiểu cho child element

child element: class=’group-hover:text-white’

Differentiating nested groups: có nhiều group lồng nhau ta có thể sử dụng tên để định danh nó ‘group/{name}’

Vd: parent element: class=’group/item’

child element: class=’group-hover/item:text-white’

Component-driven: Worried about duplication? Don’t be

Việc sử dụng class có thể khiến lặp code rất nhiều. Tuy nhiên, bằng việc dùng các framework như react, vue,... bạn có thể sử dụng component để gom các class lại và tái sử dụng component

Not into component frameworks?: Nếu không sử dụng component hoặc framework không có cơ chế component?: Tailwind cung cấp @apply directive để có thể tạo new class và gom các class lại

.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

Mở rộng: để có thể sử dụng @appy directive ta cần sử dụng thêm @layer directive để xác định layer phù hợp. Có 3 layer: base, component, utilities

 layer is for things like reset rules or default styles applied to plain HTML elements.

 layer is for class-based styles that you want to be able to override with utilities.

 layer is for small, single-purpose classes that should always take precedence over any other styles.

@layer components {
.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}}

@layer utilities {
.text-white {
color: rgba(255 255 255 0.8);
}}

Tailwind cung cấp một variant gọi là dark tương tự như các variant nó cho phép người dùng sử dụng chế độ dark mode

Customization: Extend it, tweak it, change it

Tailwind bao gồm các giá trị mặc định được setting sẵn. Tuy nhiên, ta có thể tùy chỉnh để phù hợp với mục đích cá nhân

Thêm các thuộc tính ta muốn chỉnh sửa vào file tailwind.config.js để tạo design system cá nhân,

https://tailwindcss.com/docs/configuration

Modern features: Cutting-edge is our comfort zone

Tailwind hỗ trợ rất nhiều tính năng mới và nâng cao từ css như: grid, transforms, gradients,...

Editor tools: World-class IDE integration

Tăng tốc độ code với Extension thông minh trên VS Code.

Ready-made components: Move even faster with Tailwind UI

Tailwind UI được xây dựng dựa trên tailwind. Nó là tập hợp các UI, template đẹp đã được dựng sẵn và ta chỉ việc lấy ra và sử dụng

Tailwind

State là tất cả những dữ liệu bạn lưu trong ứng dụng, bao gồm các kiểu dữ liệu như string, number, boolean, array, function, object,… Và một đặc điểm của state là nó có thể thay đổi theo thời gian.

Nếu bạn dùng React và Redux thì bạn có thể biết đến 

 (những state chỉ dùng trong một component như các biến isOpenModal, status, error, isLoading, …), 

 (những state được chia sẻ cho nhiều component như userInfo, language, token, user settings, translation, …).

Thông thường chúng ta sẽ sử dụng React.useState để quản lí 

. Và sử dụng Redux để lưu những state được chia sẻ cho nhiều component. Hoặc nếu bạn thấy một số 

 bị thay đổi nhiều và khó quản lí thì bạn cũng có thể cân nhắc sử dụng Redux cho một vài 

 trên đây vẫn đang hoạt động tốt và tương đối phổ biến cho các dự án React hiện tại.

Nhưng có một cách phân chia tốt hơn là 

. Đây là ý tưởng từ react-query, một thư viện khá hot gần đây mà ai cũng nói đến.

Trước đây khi chúng ta muốn fetch data từ server, chúng ta có thể sử dụng 

, nhưng cả hai cách này đều không xử lí 

. Bởi vì thường có một nhu cầu là chúng ta muốn 

của server trên client (để lấy nhanh hơn khi cần, và không còn gọi API lại). Và chúng ta thường tự xử lí (phần này khá khoai và phát sinh nhiều vấn đề) hay dùng những thư viện khác. Với react-query, nó không những 

Nhờ có react query mà chúng ta mới nhìn nhận lại rằng đáng lẽ ra có sự khác nhau giữ server state và client state.

 là những dữ liệu lưu ở phía server và chúng ta dùng API để lấy về trên client (React web). Ví dụ userInfo, listItems, propertyDetail, ….

 (UI state) là những dữ liệu chỉ tồn tại ở React và không được lưu xuống server như các biến isModalOpen, isLoading, status, … Những dữ liệu này sẽ mất đi khi chúng ta reload page.

Việc quản lí, cập nhật và đồng bộ hay cache những dữ liệu từ server nên phải được tách riêng ra và xử lí tốt hơn.

Một số đặc điểm nổi bật của server state là:

Nó nằm ở server và bạn ko thể điều khiển trực tiếp được nó.

Cần một async request để lấy và cập nhật

Nó có thể bị thay đổi bởi một ai đó mà bạn không biết

Nó bị cũ (stale) hay lỗi thời (outdated) trong quá trình sử dụng app

Khi nào data được refetch bạn có thể đọc chi tiết một ví dụ tại đây. Mặc định data sẽ được refetch khi:

Một useQuery('posts') hook được gọi – một instance mới của query đó

Browser tab được chọn: chuyển qua chuyển lại giữa các tab

useQuery('posts') được cấu hình refetchInterval

Client state vs server state

Learn React useEffect hook from scratch. React useEffect tutorial beginner to advanced. useEffect best practices. Clean up, lifecycle, and rendering problems.

Chọn dependency là một non-primitive(không nguyên thủy)

Kiểu dữ liệu không nguyên thủy chẳng hạn như: object, array,...

Kiểu dữ liệu nguyên thủy: string, number, boolean, null, undefined,...

Vấn đề: Sai lầm đầu tiên đó là chọn dependency là một non-primitive. Khi này, cho dù dữ liệu không thay đổi nhưng vì bản chất non-primitive là tham chiếu đến địa chỉ nên mỗi lần component rerender thì nó lại tạo ra một biến mới có địa chỉ tham chiếu mới không giống với địa chỉ cũ => làm cho useEffect run

Sử dụng useMemo tạo 1 biến, cho dependency của useMemo là các thuộc tính của object, lúc này khi nào thuộc tính object thay đổi thì useMemo mới hoạt động và tạo lại biến mới còn không biến cũ sẽ được giữ nguyên và tham chiếu đến đúng địa chỉ. Dùng biến được tạo bởi useMemo làm dependency cho useEffect

Thay vì dùng object làm dependency ta sử dụng trực tiếp các thuộc tính bên trong của object làm dependency

Rò rỉ bộ nhớ do không clear function

Một ví dụ điển hình cho vấn đề này đó là dùng setInterval mà không clear

Khi gọi 1 request API trong component này nhưng ngay lập tức chuyển sang component khác

Vấn đề: Khi gọi 1 request API trong component này nhưng ngay lập tức chuyển sang component khác. Đáng ra request API cũ phải được cancelled. Tuy nhiên, thực tế nó vẫn sẽ thực thi.

Giải pháp: xem video đường link trên

All useEffect Mistakes Every Junior React Developer Makes

Luôn sử dụng useState để lưu giá trị một cách thừa thải. Điều này giảm hiệu suất khi component phải re-render khi state thay đổi.

Ví dụ: Trong 1 form đăng ký điền thông tin Email và Password. Ta cần điền thông tin và ấn nút Submit để gởi dữ liệu đó.

Cách sai: Tạo 2 useState để lưu thông tin Email và Password và phải viết hàm two-way-binding giữa state và form để có thể lưu và hiển thị ra giao diện mỗi khi ta thay đổi Email hoặc Password

=>Mỗi lần ta thay đổi thông tin thì phải set lại state và component phải re-render không cần thiết. Trong khi thứ ta cần chỉ là dữ liệu cuối khi người dùng ấn nút Submit

Cách đúng: Vậy ta chỉ cần dùng 2 useRef để trỏ đến cây DOM node của form Email và Password. Khi nào người dùng ấn nút Submit thì ta lấy dữ liệu được điền bên trong ra(emailRef.current.value) và gởi đi thôi.

Not using the function version of useState

Trong useState để cập nhật giá trị dựa trên giá trị cũ (prev) của nó ta thường lấy trực tiếp giá trị cũ và cập nhật. Điều này có thể làm sai lệch về mặt logic trong React.

Ví dụ: Trong bài toán count, ấn +, - để tăng giảm giá trị đếm

Nếu ta sử dụng 2 hàm setCount thì sao? Theo logic nó sẽ +2 nhưng thực tế chỉ là +1. Vì bản chất hàm setState là asynchronous fucntion và giá trị count mà 2 hàm này nhận vào là giống nhau (state chỉ được cập nhật khi component được re-render)

=>Như vậy theo như logic ta suy nghĩ thì mỗi lần ấn +,- thì giá trị sẽ tăng giảm 2 đơn vị. Điều này ảnh hưởng đến nhiều logic sau này.

Kết luận: Luôn sử dụng callback function để lấy giá trị prev và cập nhật

Như đã bàn ở trên, thì hàm setState là asynchronous fucntion. Do vậy, khi setState giá trị chỉ được update sau khi component được re-render

Ví dụ: Như trong hình bên dưới, ta muốn tăng giá trị của Count sau đó in giá trị này ra

Thực tế: khi in ra giá trị của count sẽ là giá trị của nó trước khi được setCount vì lúc này component chưa được re-render do vậy count vẫn giữ giá trị cũ.

Giải pháp: Sử dụng useEffect để tracking count, và chỉ in khi count thay đổi

Chỉ sử dụng useEffect khi thật sự cần thiết. Ở phần III, ta có sử dụng useEffect để in ra giá trị count mỗi khi nó thay đổi. Vậy nếu ta chỉ muốn nó in 1 lần thì ta không nên dùng useEffect.

=>Tùy trường hợp mà sử dụng hay không sử dụng useEffect

Khi truyền dependence cho useEffect là 1 object. Thì mỗi lần component re-render mặc dù object không thay đổi các thuộc tính bên trong chương trình vẫn tự tạo ra 1 object mới.

Khi useEffect so sánh objectOld !== objectNew (Vì 2 đối tượng này khác nhau về địa chỉ tham chiếu)

useEffect sẽ chạy không cần thiết

Ví dụ: Như hình vẽ, khi ta thay đổi giá trị darkMode, mặc dù không tác động đến person object. Nhưng khi component re-render sẽ tạo ra 1 object mới khiến useEffect chạy không cần thiết

Truyền trực tiếp age, name vào làm dependence

Sử dụng useMemo chỉ cập nhật person khi age hoặc name thay đổi

Khi fetch dữ liệu có 2 lỗi có thể xảy ra:

Dữ liệu đang được fetch thì component bị unmount. Khi fetch xong logic sẽ được chạy tiếp trong khi người dùng đã chuyển qua 1 tác vụ khác và không cần thực thi logic này nữa

Dữ liệu được fetch liên tục nhiều lần (3 lần chẳng hạn) nhưng chương trình nhận được dữ liệu lần 2 sau lần 3. Do vậy cuối cùng dữ liệu lần 2 mới là dữ liệu cuối được cập nhật và sử dụng(lưu ý: mỗi khi dữ liệu được fetch thì component đã re-render)

Giải pháp 1: Sử dụng flag để check, xem hình minh họa bên dưới. Ban đầu ta tạo 1 flag là unsubscribed = false; và ở clean-up function ta set unsubscribed = true khi nó được unmount.

=>Khi dữ liệu được fetch xong nó sẽ check unsubscribed. Nếu thỏa thì nó mới thực hiện các logic bên trong

Giải pháp 2: Sử dụng AbortController để handle (hình minh họa bên dưới). Tương tự như tạo 1 flag. Ở đây ta sẽ tạo 1 biến AbortController() và sẽ truyền nó làm giá trị của thuộc tính signal làm đối số thứ 2 của fetch(). Signal này có tác dụng nếu controller chưa bị abort() thì nó sẽ chạy các logic sau đó. Nếu đã bị abort() thì toàn bộ các logic .then . catch . finally sẽ bị hủy bỏ và không được thực thi

Trong clean-up fucntion ta sẽ viết hàm abort() để hủy controller này mỗi khi nó bị unmount

React Hook Mistakes Beginners Make

The Effect Hook lets you perform side effects in function components

Khi muốn thực hiện các Side effects (Khi có 1 tác động xảy ra, khiến dữ liệu của chương trình bị thay đổi)

Các loại useEffect và cách sử dụng

Callback luôn được gọi sau khi component mounted

Cleanup function luôn được gọi trước khi component unmounted

Cleanup function luôn được gọi trước khi callback được gọi (trừ lần mounted)

Gọi callback sau khi component re-render

Gọi callback sau khi component thêm element vào DOM

Chỉ gọi callback 1 lần sau khi component mounted

Callback sẽ được gọi lại mỗi khi deps thay đổi

Cleanup function (tránh rò rỉ bộ nhớ-Memory leak)

Hàm được return trong callback của useEffect chính là Cleanup function.

Cứ hiểu rằng Cleanup function dùng để dọn dẹp phần dữ liệu dư thừa của callback cũ. Vì vậy, trước khi callback mới được gọi hoặc component unmounted, cleanup function sẽ được chạy

Cách để dễ nhớ: Cleanup function dùng để dọn dẹp callback cũ.

useEffect

Javascript is a weird language and since it chooses a different path than other programming languages like C++ or Python it still has plenty of cool features we don't know about! 


Không nên sử dụng toán tử && để render

Ví dụ như trong hình bên dưới, biến showWinning = 0 nó vẫn đảm bảo logic không render đoạn HTML phía sau nhưng vẫn sẽ render số 0.

Sử dụng kiểu dữ liệu boolean. Tuy nhiên, trong nhiều TH ta không thể kiểm soát được điều này, giá trị có thể thay đổi do bên thứ 3

Sử dụng !!showWinning, lúc này nó sẽ được chuyển đổi sang kiểu boolean

condition ? true_value : false_value(null);

=> Nên sử dụng phương pháp 3 vì như vậy code sẽ rõ ràng và dễ hiểu hơn