[Tân] Introducing

[nvantan2]

• [x] Cài Đặt Visual Studio Code
• [x] Cài Đặt Node JS
• [x] Cài Đặt Package Create-React-App
• [x] Tìm hiểu các lệnh của Create-React-App Và Khởi tạo một project"
• [x] Tìm hiểu khái niệm về SPA và MPA
• [x] Phân biệt được sự khác biệt của 2 loại này
• [x] Ưu và nhược điểm từng loại
• [x] Tìm hiểu React là gì?
• [x] Ưu và nhược điểm
• [x] Tìm hiểu về Native DOM , Shadow DOM, Virtual DOM trong React
• [x] Hiểu Cơ bản về cấu trúc XML
• [x] JSX là gì, cách viết JSX"
• [x] Tìm hiểu cách React render element sang native DOM
• [x] Vì sao lại cần virtual dom trong khi đã có native DOM

[thangnguyen1111]

điểm khác biệt giữa Single Page Application và Multi Page Application là gì?

[thangnguyen1111]

khi nào nên tạo file đuôi .jsx?

[nvantan2]

điểm khác biệt giữa Single Page Application và Multi Page Application là gì?

• SPA đầu tiên SPA sẽ tải một trang HTML đơn, sau đó dựa trên request của người dùng, SPA sẽ tiếp tục tải các HTML khác trong cùng một trang đó.(không cần phải load lại trang) -MPA khi người dùng thực hiện request bất kì dù nhỏ nhất thì cũng phải load lại toàn web.

[thinhphamstd]

• Sự khác biệt giữa SPA và MPA là gì?
• React sử dụng Virtual DOM vậy nó sử dụng Virtual DOM để render như thế nào?

[nvantan2]

• Sự khác biệt giữa SPA và MPA là gì?
• React sử dụng Virtual DOM vậy nó sử dụng Virtual DOM để render như thế nào?

• SPA – Single Page Application. Ứng dụng nằm trong 1 page duy nhất nên được gọi là Single Page Application. Việc render HTML, CSS sẽ được thực hiện ở client (Tức JavaScript ở trình duyệt). Page chỉ cần load một lần duy nhất. Khi user chuyển trang hoặc thêm dữ liệu, JavaScript sẽ lấy và gửi dữ liệu từ server qua AJAX. User có thể thấy dữ liệu mới mà không cần chuyển trang.
• MPA – Multi Page Application server sẽ render HTML, CSS, trả về cho browser để hiển thị cho người dùng. Mỗi lần người dùng chuyển trang là site phải load lại nhiều lần, gây khó chịu.

[nvantan2]

• React sử dụng Virtual DOM vậy nó sử dụng Virtual DOM để render như thế nào?
• Work-flow của React: Xây dựng lại component -> Update DOM ảo -> Tìm sự thay đổi -> Update DOM thật.
• Snapshots & Diffing: React lấy một snapshot của Virtual DOM (bản ghi trạng thái ngay lúc đó) ngay trước khi áp dụng bất kỳ bản cập nhật nào. Sau đó, nó sử dụng snapshot này để so sánh với một Virtual DOM được cập nhật trước khi thực hiện các thay đổi. Khi cập nhật được cấp cho Virtual DOM (Virtual DOM sử dụng key, ref mà ở DOM không có và Virtual DOM được tạo mới sau mỗi lần render lại), quá trình tiếp theo React sử dụng thuật toán Diffing để so sánh và đối chiếu để biết được sự cập nhật được diễn ra ở đâu sau đó cập nhật nó mà bỏ qua những elements không liên quan.