Web

Component hàm không có trạng thái (stateless). Component lớp có trạng thái (stateful)

Component là những hàm hoặc lớp trả về một khối JSX

Dùng fetch dạng promise chứ đừng await trong component

key là một thuộc tính đặc biệt của vật thể props để việc render được hiệu quả hơn

JSX là cách để viết JS như thể viết HTML

Props giúp việc thêm property cho DOM giống như thêm attribute cho HTML

Props là viết tắt của property, nghĩa gốc là tài sản. Tài sản của cha mẹ thì con dùng được, nhưng tài sản của con thì cha mẹ không đụng được

Props là đối số đầu tiên của hàm component, dùng để truyền giá trị các thuộc tính của nó

Render là quá trình chuyển đổi dữ liệu và code sang HTML

Không có async component vì hiệu suất quá tệ

Nếu truyền HTML làm giá trị biến thì cần dùng dangerouslySetInnerHTML, nếu không thì sẽ bị mã hoá hết

Những hàm được export default và được viết hoa ký tự đầu tiên là component

Framework

Các hàm được môi trường thực thi cung cấp không hoạt động được ở island

Component nằm trong thư mục island sẽ được render lần đầu ở server, còn những lần sau đều ở client

Island là những component ở trong thư mục islands

Khi một vật thể được đổ dữ liệu vào, nó được gọi là được tưới nước

Island với partial hydration là một

State giúp cập nhật dữ liệu mà không cần tải lại trang

Mỗi khi state thay đổi thì islands được render lại

Nói cho đến cùng thì trang web chỉ là form

createContext() nằm ngoài global, useContext() nằm trong component

useContext() là cách để không phải dùng Consumer

Đối số của createContext() quyết định kiểu của value của Context.Provider

Giá trị trả về của useContext() là giá trị được truyền vào thuộc tính value của provider

Cách dùng useEffect với useState

Chính vì setState render lại cả component, nên với những file component muốn tách ra nhiều hàm độc lập, và state

Không dùng mảng hoặc vật thể trong setState được

Phải viết hook trong component. Không viết trong loop hoặc if được

useEffect được sinh ra là để side effect không tự động chạy mỗi khi component được render

Trong useEffect chỉ dùng được promise, không dùng async được

Dùng setState gọn hơn signal nếu không phải truyền setter qua nhiều hàm khác nhau

Các hàm set của hook sẽ kích hoạt việc render lại component nơi nó được khai báo

effect khác computed ở chỗ một cái có return, một cái không có return

Signal giúp giải quyết các vấn đề do useState hoặc Context tạo ra

Signal chỉ render lại mỗi phần tử HTML chứa giá trị của nó

Route là code viết cho server. Island là code viết cho client

Có một số hàm ở server sẽ không serialize được

Khi có một yêu cầu tới một route, handler được gọi trước, sau đó tới component

Kết quả được trả về ctx.render(arg) của handler sẽ được truyền lại vào props.data của component

Serialize là cách duy nhất để truyền dữ liệu từ server tới client và ngược lại

Nếu viết handler dưới dạng vật thể thì chỉ những phương thức là động từ HTTP mới được dùng. Nếu viết dưới dạng hàm thì cái hàm đó sẽ trở thành handler luôn

Route không bao giờ được gửi đến client. Island được chạy ở cả server và client

Route cần có ít nhất một handler hoặc một component

So sánh Single Page App (SPA) vs Progressive Web App (PWA)

UI là kết quả của state và data. State nằm ở client, data nằm ở server

Fresh dùng Preact cho UI

Fresh đối với Preact cũng giống như Next.js đối với React. React với Preact cung cấp khả năng render (làm framework), còn Fresh hay Next xử lý những thứ còn lại (làm meta-framework)

JS là để tăng trải nghiệm người dùng. Framework là để tăng trải nghiệm lập trình viên

Fresh và Astro đều cung cấp khả năng render island lần đầu tại server và những lần sau tại client

Lịch sử phát triển framework JavaScript

Next.js, Remix, Gatsby là những framework mà chính React giới thiệu là nên dùng

Preact chỉ là một thư viện render. Nó không có biết gì về server hay routing cả

React nên được alias thành preact-compat

React được sinh ra để làm việc với trạng thái

Ở Preact, onInput sẽ kích hoạt ngay trong lúc nhập, còn onChange chỉ kích hoạt khi người dùng đổi focus

Vì Node, Deno viết trên V8 chứ không phải Gecko, nên chỉ có Chrome mới debug được chứ Firefox thì không

form

Nơi thảo luận¶