[React] React là gì ? Học React Miễn Phí ở Đâu?

Giới thiệu React

React (hay còn gọi là ReactJS) là một thư viện JavaScript Front End miễn phí và phổ biến hiện nay để xây dựng giao diện người dùng UI nhanh chóng cho cả website và ứng dựng trên điện thoại.

React giúp phân chia các UI phức tạp thành các thành phần nhỏ (được gọi là components).

React được tạo ra bởi sự cộng tác giữa Facebook và Instagram và cha đẻ Jordan Walke Nó được duy trì bởi Facebook và một cộng đồng các nhà phát triển và công ty cá nhân.

React ban đầu được phát triển và duy trì bởi Facebook và sau đó được sử dụng trong các sản phẩm của mình như WhatsApp & Instagram.

Nó đang được sử dụng bởi các công ty lớn, đã thành lập và các công ty mới thành lập ( như Netflix, Airbnb, Instagram và New York Times ...)

Một trong những đặc trưng duy nhất của React là việc render dữ liệu không những có thể thực hiện ở tầng Client mà còn ở tầng Server.

Để phát triển ứng dụng một cách hoàn chỉnh, một mình ReactJS là không làm được tất cả, bạn sẽ cần thêm:

• Server side language: để xử lý logic và lưu trữ dữ liệu trên server. vd: NodeJS
• HTML/CSS nếu bạn làm ứng dụng web.
• Flux/Redux?: là một kiến trúc giúp bạn tổ chức code rõ ràng và sạch sẽ.
• Objective C: nếu bạn sử dụng React để xây dựng app cho iOS

Tại sao phải sử dụng React?

Dễ dàng tạo các ứng dụng động

React giúp tạo các ứng dụng web động dễ dàng hơn vì nó yêu cầu ít mã hơn và cung cấp nhiều hàm/chức năng (function) hơn, trái ngược hoàn toàn với JavaScript, nơi mà việc viết mã thường trở nên phức tạp hơn rất nhiều.

Cải thiện hiệu suất

React sử dụng Virtual DOM, do đó tạo các ứng dụng web nhanh hơn. Bởi vì với Virtual DOM nó sẽ so sánh trạng thái trước đó của các phần tử và chỉ cập nhật các mục trong DOM thực đã được thay đổi, thay vì cập nhật lại tất cả các phần tử trong DOM như các ứng dụng web thông thường khác.

Các thành phần có thể tái sử dụng (Components)

Các thành phần (components) là khối xây dựng của bất kỳ ứng dụng React nào và một ứng dụng đơn lẻ thường bao gồm nhiều các Components khác nhau.

Các Components  này có logic và điều khiển riêng và chúng có thể được sử dụng lại tại bất cứ đâu trong toàn bộ ứng dụng, do đó làm giảm đáng kể thời gian phát triển của ứng dụng bằng cácnh sử dụng lại các Components.

Luồng dữ liệu một chiều

React tuân theo luồng dữ liệu một chiều. Điều này có nghĩa là khi thiết kế một ứng dụng React, các lập trình viên thường lồng các Components con vào bên trong các Components mẹ.

Vì dữ liệu chạy theo một chiều nên việc gỡ lỗi (debug)  cũng trở dễ dàng hơn và biết được vị trí chính xác xảy ra sự lỗi trong ứng dụng tại lúc đó.

React rất dễ học

Vì nó chủ yếu kết hợp các khái niệm HTML và JavaScript cơ bản. Tuy nhiên, cũng như thư viện, tools và framework khác, bạn phải dành một khoảng thời gian để hiểu đúng và sử dụng được thư viện React.

Vừa tạo được ứng dụng web và ứng dụng di động

Chúng ta đã biết rằng React được sử dụng để phát triển các ứng dụng web, nhưng đó không phải là điểm dừng cho React.

Có một framework tên là React Native, bắt nguồn từ chính React, rất phổ biến và được sử dụng để tạo các ứng dụng di động trông đẹp mắt và thân thiện hơn với người dùng.

Vì vậy, trong thực tế, React có thể được sử dụng để tạo cả ứng dụng web và ứng dụng di động.

Có tool chuyên dụng để gỡ lỗi dễ dàng

Facebook đã phát hành một Extension của Chrome có thể được sử dụng để gỡ lỗi các ứng dụng React.

Điều này làm cho quá trình gỡ lỗi các ứng dụng web React nhanh hơn và dễ dàng hơn cho các lập trình viên.

React thân thiện với SEO

SEO là thứ mà tất cả các website lớn về thương mại điện tử, hay các website thông tin, truyền thông đều đang tranh giành trên từng vị trí TOP của SERP.

Thực tế, không phải tất cả các thư viện hay Framework JavaScript đều thân thiện với SEO. Nắm bắt được nhu cầu đó, ReactJS ra đời như một lời giải cho bài toán này,   cho phép bạn tạo giao diện người dùng có thể được truy cập trên các công cụ tìm kiếm khác nhau.

Tuy nhiên nó sẽ phức tạp và khó khăn hơn khi SEO trên ReactJS hơn là trên website truyền thống, nơi khởi nguồn của các công cụ tìm kiếm ngày nay.

Những đặc trưng tạo nên tên tuổi của React

JSX - JavaScript Syntax Extension

JSX là một phần mở rộng cú pháp cho JavaScript. Còn được biết đến như Javascript XML.

Bằng cách sử dụng JSX, chúng ta có thể viết các cấu trúc HTML trong cùng một tệp chứa mã JavaScript.

Điều này làm cho code dễ hiểu và dễ gỡ lỗi hơn khi gặp vấn đề.

<p className="text">freetuts.net</p>

Virtual DOM

Mô hình Đối tượng Tài liệu (DOM) là gì?

DOM (Document Object Model) được xem như là một XML hoặc HTML cấu trúc giống như một cây và mỗi phần tử trong HTML/ XML gọi là node cảu DOM.

Virtual DOM và React DOM có mối quan hệ ra sao?

React giữ một bản trình bày nhỏ gọn của DOM “thực” (React DOM) trong bộ nhớ và đó được gọi là DOM “ảo” (Virtual DOM).

Mặc dù tốc độ xử lý của DOM thực khá nhanh nhưng đối với các ứng dụng SPA (single page application) việc thay đổi các DOM này là liên tục nên nó sẽ xảy ra khá chậm và không khả thi đi xây dựng ứng dụng lớn.

Lúc này ReactJS sẽ so sánh virtual DOM lúc này với virtual DOM trước đó để kiểm tra trước  và sau đó sẽ cập nhật trên một phần của DOM thật và sẽ hiển thị ra màn hình.

Khi chúng ta sử dụng Virtual DOM (VDOM) thì nó chỉ cập nhật duy nhất 1 items, lúc này tài nguyên sẽ được tiết kiệm cũng như tốc độ xử lý cũng nhanh hơn rất nhiều so với cách cũ.

Học React JS Miễn Phí cho người mới bắt đầu

Trong khóa học này, bạn sẽ tìm hiểu những điều sau:

• Hoàn thành khóa học React JS từ Scratch.
• Bạn sẽ học cách xây dựng Ứng dụng web với React JS.
• Tạo ứng dụng Scratch Pad với React JS.
• Xây dựng các thành phần không trạng thái trong React.
• Hiểu đầy đủ về Refs.
• Bạn sẽ học chuyên sâu về Đạo cụ.
• Tạo phần tử con và phần tử lồng nhau trong Ứng dụng.
• Thực hiện các hoạt động CRUD (Tạo, Đọc, Cập nhật, Xóa) trong React JS.

Khó khăn trong việc học này là cần khả năng đọc hiểu tài liệu tiếng anh.: Khóa học React JS cho người mới bắt đầu

Nếu bạn khó tiếp cận với phiên bản tiếng anh ở trên có tham khảo Khóa Học ReactJS Miễn Phí Tiếng Việt