InDepthEngineering-REACT- ARTICLE — 2

Chỉ để tham khảo theo liên kết này để đến bài viết trước. Như mọi khi, thật vui khi thấy bạn quan tâm đọc các bài viết của tôi.

Trước khi bắt đầu với bài viết số hai, chúng ta hãy tóm tắt lại những gì chúng ta đã thấy trong bài viết trước như sau:

• Chúng tôi đã tạo một ứng dụng đơn giản bằng vanilla JavaScript.
• Chúng tôi đã có thể thêm Reac.js vào ứng dụng của mình.
• Trong quá trình thêm Reac.js, chúng tôi đã học được rằng Reac.js chỉ đơn giản là một tập hợp các chức năng.

• Chúng tôi sẽ thêm Kiểu dáng vào ứng dụng mà chúng tôi đã tạo trong bài viết trước.
• Chúng ta sẽ tìm hiểu lý do tại sao Reac.js sử dụng DOM ảo và cách thức hoạt động của nó

let paragraph1 = React.createElement('p', {}, 'Hey there!');

let paragraph1 = React.createElement('p', {className: 'greetings'}, 'Hey there!');

const root = document.getElementById('root');

const reactProjectRoot = ReactDOM.createRoot(root);

const childParagraphOne = React.createElement('p',{},'Hello World!');
const childParagraphTwo = React.createElement('p',{},'Welcome to my website');

// property className is added to the second argument.
// I have removed the property id is now.
const container = React.createElement('div',{className: 'greetings'},[childParagraphOne,childParagraphTwo]);

reactProjectRoot.render(container);

.greetings {
    color: rgb(200, 159, 252);
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <script src="index.js" defer></script>
    <!-- link to css -->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="root">
    </div>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</body>
</html>

Ứng dụng của chúng tôi có hoàn toàn không có lỗi không? Không! không phải vậy. Khi bạn mở bảng điều khiển của trình duyệt, bạn sẽ thấy lỗi sau:

Cách để loại bỏ lỗi này là thực hiện thay đổi sau trong index.js (kiểm tra nhận xét):

const root = document.getElementById('root');

const reactProjectRoot = ReactDOM.createRoot(root);

// I have added the property key to each of the child paragraph elements.
// I have given unique values to the property key for each child
const childParagraphOne = React.createElement('p',{key: 'para1'},'Hello World!');
const childParagraphTwo = React.createElement('p',{key: 'para2'},'Welcome to my website');

const container = React.createElement('div',{className: 'greetings'},[childParagraphOne,childParagraphTwo]);

reactProjectRoot.render(container);

Giả sử bạn có một vùng chứa chính có ba phần tử con có cùng thẻ HTML và chúng đã được hiển thị trong trình duyệt. Bây giờ, bạn nối thêm phần tử con thứ tư có cùng thẻ HTML vào vùng chứa chính trong mã của mình.

Thư viện React khi tạo các view sử dụng hàm React.createElement( ) sẽ tạo một cây DOM ảo mà nó sẽ cập nhật trực tiếp mà không cần cập nhật trực tiếp cây DOM trên trình duyệt. Với các phần tử con có các thuộc tính khóa duy nhất, thư viện ReactDOM chịu trách nhiệm kết xuất trong trình duyệt không phải kết xuất lại tất cả các phần tử con của vùng chứa cha trong trình duyệt nếu một phần tử con mới được giới thiệu (ở đây là phần tử con thứ tư). Thư viện ReactDOM biết rằng phần tử con mới là phần tử duy nhất cần được hiển thị và các phần tử con khác đã được hiển thị và chúng hiện diện trong cây DOM của trình duyệt bằng cách so sánh các giá trị thuộc tính khóa của các phần tử con trong cây DOM của trình duyệt và cây DOM ảo. Vì vậy, thư viện ReactDOM đảm bảo chỉ hiển thị những thay đổi cần thiết trong trình duyệt. Điều này làm cho React hiệu quả.

Đó là nó cho bài viết này. Vui lòng cho phản hồi của bạn và tôi sẽ sớm gặp lại bạn trong bài viết tiếp theo.