ReactJS - DOM: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn future React developers! Tôi rất vui mừng được dẫn các bạn vào hành trình thú vị qua thế giới của ReactJS và Document Object Model (DOM). Như một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi đã chứng kiến nhiều sinh viên gặp khó khăn với những khái niệm này ban đầu, nhưng hãy tin tôi, một khi bạn nắm vững, nó sẽ như đi xe đạp - bạn sẽ không bao giờ quên!

DOM là gì?

Trước khi chúng ta đi sâu vào mối quan hệ giữa React và DOM, hãy bắt đầu từ cơ bản. Hãy tưởng tượng DOM như một cây gia đình của trang web của bạn. Mỗi phần tử trên trang của bạn - có thể là một nút, một đoạn văn bản, hoặc một hình ảnh - giống như một thành viên trong cây này. Cũng như bạn có thể thay đổi kiểu tóc hoặc quần áo của một thành viên trong gia đình, bạn có thể thao tác các phần tử DOM để thay đổi cách trang web của bạn trông và hoạt động.

ReactDOM: Cây cầu giữa React và Trình duyệt

Bây giờ, hãy giới thiệu nhân vật chính của chúng ta: ReactDOM. Hãy tưởng tượng ReactDOM như một trợ lý siêu hiệu quả cho React. Công việc chính của nó là lấy các thành phần React bạn tạo ra và dịch chúng thành thứ mà trình duyệt có thể hiểu và hiển thị.

Cách sử dụng ReactDOM

Hãy bắt đầu với một ví dụ đơn giản:

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, React World!</h1>;
ReactDOM.render(element, document.getElementById('root'));

Trong đoạn mã này, chúng ta đang告诉 ReactDOM để lấy element (một tiêu đề h1 đơn giản) và hiển thị nó bên trong phần tử DOM có ID 'root'. Nó giống như nói với trợ lý của bạn, "Hey, bạn có thể đặt这张图片 (thành phần React của chúng ta) vào khung này (phần tử 'root') trên tường không?"

ReactDOMServer: Phục vụ React trên Máy chủ

Tiếp theo, chúng ta có ReactDOMServer. Đây giống như anh em sinh đôi của ReactDOM làm việc sau hậu trường. Trong khi ReactDOM xử lý các việc trong trình duyệt, ReactDOMServer giúp chúng ta hiển thị các thành phần React trên máy chủ.

Dưới đây là một ví dụ đơn giản:

import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);

Đoạn mã này lấy toàn bộ thành phần App của chúng ta và chuyển nó thành một chuỗi HTML. Nó giống như chụp một bức ảnh Polaroid của ứng dụng React của bạn - nó là một bức ảnh nhanh có thể gửi nhanh chóng đến trình duyệt.

ReactDOMClient: Trẻ mới trong khu phố

Với React 18, chúng ta được giới thiệu với ReactDOMClient. Đây giống như anh em trẻ hơn, năng động hơn của ReactDOM, tất cả về hiệu suất và các tính năng mới.

Dưới đây là cách bạn có thể sử dụng nó:

import React from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Thay vì hiển thị ứng dụng của chúng ta trực tiếp, chúng ta đang tạo một 'root' trước. Root này giống như một chậu đặc biệt nơi chúng ta có thể trồng ứng dụng React của mình và nhìn nó lớn lên với tất cả các tính năng mới mà React 18 cung cấp.

Áp dụng ReactDOMClient

Hãy đi sâu hơn vào cách chúng ta có thể sử dụng ReactDOMClient trong một tình huống thực tế:

import React from 'react';
import { createRoot } from 'react-dom/client';

function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Bạn đã nhấp {count} lần</p>
<button onClick={() => setCount(count + 1)}>
Nhấp vào tôi
</button>
</div>
);
}

const root = createRoot(document.getElementById('root'));
root.render(<Counter />);

Trong ví dụ này, chúng ta đang tạo một ứng dụng đếm đơn giản. Hàm createRoot thiết lập môi trường React 18 của chúng ta, cho phép chúng ta sử dụng tất cả các tính năng mới như tự động gom nhóm để cải thiện hiệu suất.

So sánh các phương thức ReactDOM

Để giúp bạn hiểu các phương thức chúng ta đã thảo luận, đây là bảng tiện ích:

Phương thức	Sử dụng trong	Mục đích
ReactDOM.render()	Trình duyệt	Hiển thị các phần tử React vào DOM
ReactDOMServer.renderToString()	Máy chủ	Hiển thị các thành phần React thành chuỗi HTML
ReactDOMClient.createRoot()	Trình duyệt	Tạo một root cho các tính năng React 18
root.render()	Trình duyệt	Hiển thị các thành phần vào root đã tạo

Kết luận

Và đó là tất cả, các bạn! Chúng ta đã cùng nhau hành trình qua cảnh quan React DOM, từ ReactDOM cổ điển đến ReactDOMServer trên máy chủ, và cuối cùng là ReactDOMClient mới mẻ. Nhớ rằng, như việc học bất kỳ ngôn ngữ mới nào (cả lập trình và không lập trình), thực hành là chìa khóa của sự hoàn hảo. Đừng ngại thử nghiệm với các khái niệm này trong các dự án của riêng bạn.

Như tôi luôn nói với sinh viên của mình, lập trình giống như nấu ăn - bạn có thể làm rối loạn ban đầu, nhưng với thời gian và thực hành, bạn sẽ nhanh chóng tạo ra các ứng dụng React ngon lành! Vậy hãy đi vào, làm脏 tay với mã, và chúc mừng bạn với React!

Credits: Image by storyset