React, ReactJS, React Native và ReactDOM Khác Nhau Như Thế Nào

Nếu bạn mới tìm hiểu về React bạn sẽ thấy khá bối rối bởi các thuật ngữ như React, React Native và React DOM. Trong bài viết này chúng ta sẽ tìm hiểu cụ thể sự khác biệt giữa các thuật ngữ này.

Phân Biệt React và ReactJS

React (hay còn gọi là ReactJS) là bộ thư viện viết bằng ngôn ngữ JavaScript dùng để phát triên các ứng dụng UI (User Interface). React có thể chạy được trên cả môi trường client (sử dụng trình duyệt) lẫn server (sử dụng Node.js).

Khi sử dụng React trên trình duyệt bạn sẽ nhúng bộ thư viện này thông qua thẻ <script></script>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>

Khi sử dụng React trên server thì yêu cầu bạn cần cài đặt Node.js và sau đó cài đặt và import React mô-đun:

import React, { Component } from 'react';

Bạn có thể tham khảo bài viết về ReactJS để nắm cơ bản về cách sử dụng thư viện này.

Phân Biệt React và React Native

class MyApp extends React.Component {
}

React Native là bộ thư viện sử dụng để phát triển ứng dụng mobile native:

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{awidth: 193, height: 110}}/>
    );
  }
}

Phân Biệt React và ReactDOM

Trong các phiên mới của React (từ sau phiên bản 0.14 trở đi) thì tất cả các tính năng liên quan tới việc tương tác với DOM element trên trang được tách biệt với bộ thư viện core của React. Cách làm này khiến cho nhiều developer cảm thấy bối rối khi trong document chính thức của React không đề cập đên sự khác biệt giữa React và ReactDOM.

Khi sử dụng React trên web chúng ta thường sẽ tham chiếu tới thư viện này thông qua một CDN ví dụ như sau:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.js"></script>

Trường hợp cần sử dụng cả ReactDOM chúng ta sẽ cần thêm một thẻ <script></script> khác để tham chiếu tới bộ thư viện này, ví dụ như sau:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.js"></script>

Vậy cụ thể thì hai bộ thư viện này khác nhau như thế nào?

ReactDOM là lớp keo kết dính React và DOM. Thông thường chúng ta sẽ cần sử dụng ReactDOM để tương tác với DOM trên trang. Ví dụ như khi chúng ta cần hiển thị nọi dung của component:

ReactDOM.render()

Nếu sử dụng JSX bạn có thể viết:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Hoặc cần tìm một Node:

ReactDOM.findDOMNode()

Tại Sao Cần Tách React, React Native và ReactDOM

Việc tách biệt giữa React, React Native và ReactDOM là để phù hợp với nhu cầu phát triển từng loại ứng dụng nhất định, nếu bạn muốn phát triển ứng dụng mobile bạn sẽ cần React và React Native. Nếu bạn cần phát triển ứng dụng web và làm việc với DOM bạn cần React và ReactDOM.