Phần 1: Bắt đầu với ReactJS
1. ReactJS là gì?
React là một thư viện UI được phát triển vởi 1 developer nhà người ta tại Facebook – Jordan Walke.
Là 1 thư viện được sinh ra để hỗ trợ việc xây dựng những component có tính tương tác cao, có trạng thái(state) và có thể sử dụng lại được.
2. Tại sao phải dùng ReactJS
Single page application.
ReactJS giúp chúng ta xây dựng các ứng dụng single page application. Đối với các loại web truyền trống như là PHP, JAVA SPRING, .NET …: khi bạn request lên nó sẽ trả về cho bạn 1 page toàn bộ là HTML. Còn đối với ReactJS nói riêng hay Single page Application nói chung thì đối với request lần đầu thì nó trả về cho bạn 1 page là HTML và những lần request tiếp theo thì nó chỉ cập nhật những phần cần thiết thôi(Nghe có vẻ giống ajax đúng không. Bạn nghĩ đúng rồi. Nhưng nó xịn xò hơn nhiều. Cùng nhau tìm hiểu tiếp nhé.)
Viết code dễ dàng hơn với JSX(JavaScript Syntax Extension)
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Giúp cho developer phát triển ứng dụng nhanh hơn. Syntax dễ hiểu. JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy. Do đó lỗi được phát hiện ngay trong lúc biên dịch. Tìm hiểu thêm về JSX tại đây: https://jsx.github.io/
Virtual DOM
Virtual DOM(DOM ảo) giúp cho hiệu suất làm việc của React cao hơn hẳn so với các thư viện và framework Javascript khác. Virtual DOM là một Javascript object, nó chứa đầy đủ thông tin cần thiết để tạo ra một DOM thật(HTML DOM), khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và DOM thật, từ đó chỉ cập nhập những điểm thay đổi – điều này sẽ giúp tối ưu hoá việc re-render DOM thật.
Components
Với những framework khác xây dựng dựa trang web bằng cách dùng những template. Còn ReactJS xây dựng trang web bằng cách dựng những thành phần(component) nhỏ và ghép nối chúng với nhau tạo thành 1 trang web hoàn chỉnh. Việc chia nhỏ component giúp chúng ta có thể sử dụng lại. Component trong ReactJS có trạng thái riêng và nó sẽ cập nhật component dựa trên sự thay đổi của trạng thái. Component có 1 lifecycle dùng để quản lý vòng đời của 1 component – giúp chúng ta quản lý bihavior của 1 component 1 cách dễ dàng. Ví dụ như trang stackoverflow: Có thể chia thành nhiều component khác nhau. Ở đó có khá nhiều component có thể sử dụng lại ở 1 page khác như HEADER COMPONENT, LEFT SIDEBAR COMPONENT, BLOGLIST COMPONENT và ADS COMPONENT.
Props và State
Props giúp các component tương tác với nhau. State thể hiện trạng thái của component. Khi state hoặc props thay đổi thì component sẽ re-render lại để cập nhật UI.
Lời kết
Các bạn có thấy rằng ReactJS là 1 thư viện rất là thú vị không? Thư viện này được cấu thành từ rất nhiều thứ phức tạp. Nhưng khi cung cấp ra để chúng ta dùng thì lại khá là dễ sử dụng.
Nếu các bạn hứng thú hãy cùng xem tiếp phần 2 của bài viết này nhé. Ở Phần 2 chúng ta sẽ tìm hiểu cách khởi tạo 1 ứng dụng, cách tạo component và ghép nối chúng với nhau thành 1 trang web hoàn chỉnh nhé.
