React.js vs React Native – Đâu là sự khác biệt?

Tuy nhiên, một trong những vấn đề lớn nhất của việc chèn các phần tử vào DOM bằng JavaScript là mã không thể tái sử dụng. Ví dụ: nếu bạn muốn chèn cùng một nút vào trang nhưng với các màu nền khác nhau, bạn phải tạo phần tử hai lần trong JavaScript:

let blueBtn = document.createElement("button").style.backgroundColor("blue")
let redBtn = document.createElement("button").style.backgroundColor("red")

// Insert blue and red button into the page

Đây chỉ là một ví dụ đơn giản. Với giao diện người dùng phức tạp, bạn có thể tưởng tượng mọi thứ có thể trở nên dài và khó hiểu như thế nào. React được phát triển để giải quyết vấn đề này bằng cách làm cho quá trình tạo ứng dụng web trở nên có tổ chức và trực quan hơn nhiều.

React.js là gì?

Về mặt kỹ thuật, ReactJS là một thư viện JavaScript mặt trước, mã nguồn mở để xây dựng giao diện người dùng hoặc các thành phần giao diện người dùng. Nói một cách đơn giản, điều này có nghĩa là bạn có thể sử dụng React để xây dựng tất cả các phần của trang web mà người dùng có thể xem và tương tác trên cửa sổ trình duyệt của họ.

Vậy sự khác biệt giữa việc sử dụng JavaScript đơn giản và React là gì? Chà, React làm cho quá trình thiết kế giao diện người dùng dễ dàng hơn nhiều. Nó cho phép bạn tạo các yếu tố mà bạn có thể dễ dàng sử dụng lại trong các phần khác của trang web hoặc ứng dụng.

Với JavaScript, trước đây tôi đã đề cập đến việc bạn sẽ cần viết cùng một đoạn mã hai lần để tạo cùng một nút với các màu khác nhau, điều này có thể dẫn đến sự phức tạp trong các dự án lớn.

Kiến trúc thành phần của React giải quyết vấn đề này một cách xuất sắc. Với React, bạn xác định một phần duy nhất của giao diện người dùng, chẳng hạn như một nút, dưới dạng một thành phần.

const Button (props) => {
	return (
    	<div>
        	<button style={props.color}>Submit</button>
        </div>
    )
}

Thành phần trong trường hợp này là một hàm trả về cú pháp giống như HTML được gọi là JSX, xác định cách trình bày và giao diện của thành phần trên trình duyệt web.

Bây giờ, giả sử bạn muốn sử dụng cùng một nút (nhưng có các màu khác nhau) ở nhiều nơi trên trang web của mình. Thay vì tạo từng nút từ đầu với các thuộc tính màu khác nhau (như bạn làm với JavaScript), với React, bạn chỉ cần sử dụng cùng một Thành phần trong trường hợp này là một hàm trả về cú pháp giống như HTML được gọi là JSX, xác định cách trình bày và giao diện của thành phần trên trình duyệt web.

Bây giờ, giả sử bạn muốn sử dụng cùng một nút (nhưng có các màu khác nhau) ở nhiều nơi trên trang web của mình. Thay vì tạo từng nút từ đầu với các thuộc tính màu khác nhau (như bạn làm với JavaScript), với React, bạn chỉ cần sử dụng cùng một phần tử <Buttonvà chuyển một màu khác nhau cho mỗi nút dưới dạng props, tạo các biến thể của cùng một nút <Button> X và chuyển một màu khác nhau cho mỗi nút dưới dạng props, tạo các biến thể của cùng một nút.

<Button color="red" />
<Button color="blue" />
<Button color="green" />

Phương pháp này giữ cho mọi thứ đơn giản và có tổ chức, đó là toàn bộ bản chất của thư viện React.js.

Một lợi ích khác của việc sử dụng React để phát triển giao diện người dùng là tách biệt các mối quan tâm. Điều này có nghĩa là dữ liệu được sử dụng trong một thành phần tồn tại tách biệt với logic, tồn tại tách biệt với lớp xem.

Đây là một ví dụ:

const Button (props) => {
	// component data
    const [btnText, setBtnText] = useState("Submit")
    
    // component logic
    function onClick() {
    	setBtnText("Submitted!")
    }
    
	return (
    	// component view
    	<div>
        	<button style={props.color}>{btnText}</button>
        </div>
    )
}

Như bạn có thể thấy ở đây, trạng thái, logic và cách trình bày của một thành phần đều tách biệt với nhau, làm cho các thành phần React UI dễ hiểu và dễ soạn thảo hơn.

Tóm lại, React là một thư viện JavaScript được thiết kế để đơn giản hóa quy trình xây dựng giao diện người dùng của các ứng dụng web.

React Native là gì?

Đây là sự khác biệt chính giữa ReactJS và React Native:

• React JS được sử dụng để xây dựng giao diện người dùng của ứng dụng web (nghĩa là ứng dụng chạy trên trình duyệt web)
• React Native được sử dụng để xây dựng các ứng dụng chạy trên cả thiết bị iOS và Android (nghĩa là ứng dụng di động đa nền tảng)
• React sử dụng HTML, CSS và JavaScript để tạo giao diện người dùng tương tác. Mặt khác, React Native sử dụng các API và thành phần giao diện người dùng gốc để tạo ứng dụng dành cho thiết bị di động.

Cả React JS và React Native đều có chung cú pháp. React Native được tạo ra như một cách để các nhà phát triển xây dựng các ứng dụng di động đa nền tảng bằng cách sử dụng kiến ​​thức hiện có của họ về các công cụ phát triển web như HTML, CSS, JavaScript và thư viện lõi React.

Trên thực tế, một số thư viện thường được sử dụng cùng với React để phát triển ứng dụng web cũng có phiên bản dành cho thiết bị di động để xây dựng ứng dụng trong React Native – ví dụ: Axios, Bootstrap CSS và Tailwind CSS.

Dưới đây là những điểm chung của React DOM và React Native:

1. Cả hai đều sử dụng cùng một thư viện React cốt lõi.
2. Cả hai đều sử dụng cùng một kiến ​​trúc dựa trên thành phần, điều đó có nghĩa là các nhà phát triển có thể chia nhỏ các ứng dụng của họ thành các phần nhỏ hơn, dễ quản lý hơn.
3. Cả hai đều sử dụng JavaScript làm ngôn ngữ lập trình và JSX làm ngôn ngữ tạo khuôn mẫu.
4. Cả React DOM và React Native đều sử dụng virtual DOM để kết xuất ứng dụng của họ.
5. Cả React DOM và React Native cũng sử dụng các kỹ thuật và thành phần tạo kiểu giống nhau, thông qua React Native thì có một chút khác biệt.
6. Cả hai đều sử dụng Chrome DevTools để gỡ lỗi ứng dụng.
7. Họ sử dụng các API JavaScript giống nhau.
8. Cả hai đều được phát triển trong Meta. React được phát triển bởi một kỹ sư phần mềm tên là Jordan Walke trong khi React Native được sinh ra từ một cuộc thi hackathon.

Phần kết luận

Bài viết này khám phá sự khác biệt giữa React DOM và React Native, hai công cụ JavaScript phổ biến. React DOM chủ yếu được sử dụng để phát triển web, trong khi React Native được sử dụng để phát triển di động.

React DOM sử dụng HTML, CSS và JavaScript để bố trí và tạo kiểu, đồng thời cho phép nhà phát triển tạo giao diện người dùng tương tác. Mặt khác, React Native sử dụng các API và thành phần giao diện người dùng gốc để tạo các ứng dụng di động đa nền tảng.

Cảm ơn vì đã đọc.