ReactJs là một Javascript library được tạo bởi Facebook và được sử dụng để tạo giao diện người dùng (UI) và ứng dụng front-end. Tuy chỉ là một thư viện nhưng khi kết hợp hệ sinh thái của React lại ta hoàn toàn có thể gọi ReactJS là một framework và ReactJS là một trong những library/ framework phổ biến nhất hiện nay

Tại sao chúng ta sử dụng ReactJS

  • Xây dụng UI dễ dàng hơn
  • Nhiều tương tác với UI
  • Virtual DOM
  • JSX
  • Dễ dàng quản lý, xây dựng và bảo trì
  • Dễ dàng làm việc với nhóm

Những thứ bạn nên nắm trước khi học ReactJS

  • Javascript cơ bản (Objects, Array, Condition, … )
  • Classes
  • Destructuring
  • High Order Array Method: map, fiter, reduce, every, some...
  • Arrow Function
  • Fetch API và Promise
  • ….

Thinking in ReactJS

 

 

Khi làm việc với một library/framework nào đó điều đầu tiên cần hiểu là tại sao nó ra đời, giúp gì được cho chúng ta và tư duy của library/framework đó rồi mới tới cách chúng ta dùng chúng.

Ở đây tư duy xuyên suốt khi làm ReactJS là chia nhỏ UI của chúng ta ra thành những component và sau đây mình sẽ trình bầy những bước để chúng ta làm điều đó;

Bắt đầu với Mock UI: ở đây chúng ta sẽ xây dựng giao dựng toàn bộ giao diện người dùng mà chúng ta cần (có thể xem là bước chuyển từ PSD sang HMLT/CSS)

  • Chia UI thành những component con: sau khi xây dựng giao diện, chúng ta sẽ xem xét những thành phần nào được tái sử dụng lại nhiều để làm thành các component, sau khi xác định được các component chúng ta sẽ bắt đầu xây dựng component.
  • Xác định loại component: trong React có 2 loại component là Function Component và Class Component. Sau khi xem xét tổng quan chúng ta sẽ đưa ra quyết định là nên tạo component đó là loại nào (thường thì sẽ dựa vào state của component, nếu component cần state chúng sẽ là Class Component, còn không chúng sẽ là Function Component). Nhưng sau này hầu như chúng ta sẽ sử dụng Function Component nhờ vào React Hook
  • Thêm vào Data Flow: chúng ta sẽ làm chủ việc dòng dữ liệu của React sẽ được xử lí như thế nào
  • Việc kết nối của ReactJS: Cuối cùng cũng ta sẽ quan tâm cách những component kết nối với nhau như thế nào và đưa ra những xử lí đúng đắn.

React State

State là “trái tim” của component, state của Component  là một object sẽ xác định cách render và hành vi của component đó, điều này chứng tỏ State là rất quan trọng trong React và cách quản lí chúng cũng quan trọng không kém

Chúng ta cũng có những công cụ để quản lí state trong React ví dụ như Redux , Context API

Create-React- App: là một công cụ CLI để tạo ứng dụng React

Chúng ta sẽ tìm hiểu cách tạo một React Component như thế nào
 


Tác giả: Cao Anh Quốc

Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.