Giới thiệu
ReactJS là một thư viện mã nguồn mở do Facebook phát triển, ra mắt vào năm 2013, chuyên dùng để xây dựng các tương tác với các thành phần trên website Điểm nổi bật của ReactJS là khả năng render dữ liệu không chỉ trên server mà còn trên client, mang lại hiệu suất và trải nghiệm người dùng tốt hơn.
Virtual DOM
Công nghệ DOM ảo giúp cải thiện hiệu suất ứng dụng bằng cách chỉ cần thay đổi node gốc, từ đó tái cấu trúc toàn bộ DOM tree mà không làm giảm tốc độ xử lý React JS sử dụng Virtual DOM, một object Javascript chứa thông tin cần thiết để tạo ra DOM, giúp tối ưu hóa quá trình re-render khi dữ liệu thay đổi Bên cạnh đó, React áp dụng cơ chế one-way data binding, cho phép dữ liệu truyền từ parent đến child qua props, giúp dễ dàng kiểm soát và sửa lỗi Với những đặc điểm này, React trở thành lựa chọn lý tưởng để xây dựng các ứng dụng lớn với dữ liệu thay đổi liên tục theo thời gian và giao diện tương ứng.
JSX
JSX là một ngôn ngữ cho phép viết mã HTML trong Javascript, mang lại nhiều lợi ích Đầu tiên, JSX nhanh hơn nhờ vào tối ưu hóa trong quá trình biên dịch sang mã Javascript, dẫn đến thời gian thực hiện nhanh hơn so với mã viết trực tiếp bằng Javascript Thứ hai, JSX an toàn hơn do thuộc kiểu statically-typed, giúp phát hiện lỗi ngay trong quá trình biên dịch, tương tự như Java và C++, đồng thời cung cấp tính năng gỡ lỗi hiệu quả Cuối cùng, JSX dễ dàng sử dụng cho lập trình viên Javascript nhờ vào sự kế thừa từ ngôn ngữ này.
Components
React được xây dựng dựa trên các component thay vì sử dụng template như các framework khác Chúng ta tạo trang web bằng cách sử dụng những thành phần nhỏ, có thể tái sử dụng ở nhiều nơi với các trạng thái và thuộc tính khác nhau Mỗi component trong React có trạng thái riêng có thể thay đổi, và React tự động cập nhật component khi trạng thái thay đổi Tất cả mọi thứ trong React đều là component, giúp dễ dàng bảo trì mã code trong các dự án lớn Một component đơn giản chỉ cần một phương thức render, mặc dù còn nhiều phương thức khác khả dụng, nhưng render là phương thức chủ đạo.
Props và State
Props giúp các component tương tác bằng cách cho phép component nhận input và trả về thuộc tính mô tả nội dung mà component con sẽ hiển thị Props là bất biến, trong khi state thể hiện trạng thái của ứng dụng; khi state thay đổi, component sẽ tự động render lại để cập nhật giao diện.
2.CHƯƠNG 2 – TỔNG QUAN VỀ NODEJS VỚI EXPRESS FRAMEWORK
Giới thiệu
Express.js là một framework nhỏ gọn nhưng linh hoạt, được phát triển trên nền tảng Node.js Nó mang đến nhiều tính năng mạnh mẽ, hỗ trợ hiệu quả cho việc phát triển ứng dụng web và di động.
- Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ nên các bạn không phải lo lắng khi làm việc với Framework này
- Về performance: Express cung cấp thêm về các tính năng (feature) để dev lập trình tốt hơn Chứ không làm giảm tốc độ của NodeJS.
Cấu trúc của ExpressJS
Cấu trúc của expressjs gồm có:
- app.js chứa các thông tin về cấu hình, khai báo, các định nghĩa, để ứng dụng của chúng ta chạy tốt
- package.json chứa các package cho ứng dụng chạy
- Folder routes: chứa các route có trong ứng dụng
- Folder view: chứa view/template cho ứng dụng
- Folder public chứa các file css, js, images, cho ứng dụng
Router trong Express
A router is an object that serves as a distinct instance of middleware and routes, combining the functionalities of both This unique instance allows it to operate as a mini-application, effectively managing routing and middleware processes within an application.
- Các Application dùng ExpressJS làm core đều có phần Router được tích hợp sẵn trong đó
- Router hoạt động như một middleware nên chúng ta có thể dùng nó như một argument Hoặc dùng nó như một arguments cho route khác