React là gì?



Nếu bạn biết Jquery thì cứ coi React là môt thư viên như Jquery nhưng ra đời để thay thế và đánh bại Jquery. React được sử dụng để xây dựng các giao diện người dùng cho các ứng dụng web. Nó được phát triển bởi Facebook và các cộng tác viên của họ, và hiện nay nó đang được sử dụng rộng rãi trong các ứng dụng web phức tạp. Mục đích của React là cung cấp một cách dễ dàng và hiệu quả để xây dựng các phần của một ứng dụng web dựa trên các thành phần độc lập và tái sử dụng, giúp giảm thiểu sự lặp lại và tăng tính dễ dàng quản lý của mã nguồn.


React được Facebook giới thiệu như một công cụ JavaScript mã nguồn mở vào năm 2013, và hiện tại React được sử dụng bởi hàng trăm công ty lớn trên thế giới, bao gồm Netflix, Airbnb, American Express, Facebook, WhatsApp, eBay, và Instagram. Đây là bằng chứng cho thấy công cụ này có một số lợi thế không thể cạnh tranh với các đối thủ khác.


Khi là việc với React, bạn sẻ nghe những khái niệm mới như: Component, Jsx, Virtual Dom, State, Props ...vvv Vậy giờ hãy đi tìm hiểu những khái niệm cơ bản này.


Web Component

Web Components là một bộ tiêu chuẩn của W3C cho phép bạn tạo các thành phần độc lập và tái sử dụng được trong các ứng dụng web. Những thành phần này có thể được sử dụng trong bất kỳ trang web nào, không cần phụ thuộc vào nền tảng hoặc công nghệ nào cụ thể. Web Components là một cách để xây dựng các ứng dụng web một cách tách rời và không phụ thuộc, giúp bạn dễ dàng tái sử dụng lại các thành phần trong các dự án khác.


JSX là gì?

JSX là một ngôn ngữ mở rộng của JavaScript, được sử dụng trong React để xây dựng các giao diện người dùng. Nó cho phép bạn viết các thành phần của ứng dụng dưới dạng các thẻ HTML trực tiếp trong mã JavaScript, giúp tăng tính dễ đọc và dễ hiểu của mã nguồn. JSX cũng cung cấp các tính năng bổ sung như biến đổi và kiểm tra kiểu dữ liệu, giúp bạn viết mã nguồn đồng thời hiệu quả và an toàn hơn.


Bonus: viết React không dùng JSX vẫn được, nhưng không ai lại đi làm thế. Thật vô tri!


Virtual DOM

Virtual DOM là phần quan trọng nhất của React, nó là yếu tố quyết đĩnh sự khác biệt to lớn của react so với những thư viện FE khác. Virtual DOM là một khái niệm trong React, đại diện cho một bản sao điện tử của cây DOM thật (tức là các thành phần và các thuộc tính của giao diện người dùng) trong bộ nhớ. Khi có sự thay đổi trong giao diện, thay vì làm việc trực tiếp với cây DOM thật, React sẽ cập nhật Virtual DOM và sau đó so sánh hai bản Virtual DOM để tìm ra các thay đổi cần thiết. Sau đó nó sẽ áp dụng các thay đổi này trên cây DOM thật.


Props và State

Trong ReactJS, props và state là hai khái niệm phổ biến và quan trọng trong việc xây dựng các component. Props là những thuộc tính (properties) mà component cha truyền xuống cho component con, trong khi state là những dữ liệu mà component đang quản lý và quản lý trạng thái của component đó.

Một số khác biệt chính giữa props và state là:

  • Props là thuộc tính bất biến, nó không thể thay đổi trong component con, trong khi state có thể thay đổi.
  • Props là cách component cha truyền dữ liệu xuống cho component con, trong khi state là dữ liệu mà component đang quản lý và điều khiển trạng thái của component đó.
  • Props là một phần của component cha, trong khi state là một phần của component đang xét.