ReactJS và React Native đều là những công nghệ mạnh mẽ do Meta (Facebook) phát triển, dựa trên thư viện React. Dù có cùng ‘gốc’, chúng lại phục vụ các mục tiêu khác nhau. ReactJS dùng để phát triển ứng dụng web, React Native dùng để phát triển ứng dụng di động (Android, iOS). Cả hai đều sử dụng một công nghệ cốt lõi: JSX – một cú pháp đặc biệt giúp lập trình viên xây dựng UI một cách trực quan. Tuy nhiên, cách chúng render và vận hành là hoàn toàn khác nhau.
Mục lục
Điểm giống nhau giữa ReactJS và React Native
ReactJS và React Native có nhiều điểm chung. Dưới đây là bảng so sánh các điểm giống nhau giữa hai công nghệ này:
| Điểm giống | Mô tả |
| JSX (JavaScript XML) | Cả hai đều dùng JSX để mô tả UI một cách trực quan. |
| Component-based | Cấu trúc dựa trên component, giúp tái sử dụng mã và dễ tổ chức. |
| Hooks | Dùng các hook như useState, useEffect, useContext, v.v. |
| State & Props | Quản lý dữ liệu nội bộ và truyền dữ liệu giữa các component. |
| Logic xử lý giống nhau | Các hàm xử lý như gọi API, xử lý dữ liệu có thể chia sẻ chung. |
Điểm khác nhau giữa ReactJS và React Native
Dưới đây là bảng so sánh các điểm khác nhau giữa ReactJS và React Native:
| Tiêu chí | ReactJS | React Native |
| Nền tảng | Trình duyệt web | Android & iOS |
| Thẻ JSX | Dùng HTML: div, h1, p, img… | Dùng native component: View, Text, Image, ScrollView… |
| Cách styling | CSS truyền thống, CSS Modules, styled-components | StyleSheet.create, styled-components/native |
| Render giao diện | Render ra HTML DOM | Render ra Native UI components (iOS/Android) |
| Công cụ phát triển | Chrome DevTools, React Developer Tools | Android Studio, Xcode, React Native Debugger |
JSX – Nền tảng chung
JSX cho phép viết mã JavaScript kết hợp với HTML-like syntax. Đây là điểm chung nổi bật của cả hai công nghệ.
Dưới đây là ví dụ về JSX trong ReactJS và React Native:
JSX trong ReactJS
function Welcome() {
return (
<div>
<h1>Chào mừng bạn đến với ReactJS</h1>
</div>
);
}
JSX trong React Native
import { View, Text } from ‘react-native’;
function Welcome() {
return (
<View>
<Text>Chào mừng bạn đến với React Native</Text>
</View>
);
}
Ví dụ cụ thể – Màn hình hiển thị danh sách sản phẩm
ReactJS – Web
import React, { useEffect, useState } from ‘react’;
import axios from ‘axios’;
function ProductList() {
const [products, setProducts] = useState([]);
useEffect(() => {
axios.get(‘https://api.example.com/products’)
.then(res => setProducts(res.data))
.catch(console.error);
}, []);
return (
<div>
<h2>Danh sách sản phẩm</h2>
<ul>
{products.map(p => (
<li key={p.id}>{p.name} – {p.price}₫</li>
))}
</ul>
</div>
);
}
React Native – Mobile
import React, { useEffect, useState } from ‘react’;
import { View, Text, FlatList, StyleSheet } from ‘react-native’;
import axios from ‘axios’;
const ProductList = () => {
const [products, setProducts] = useState([]);
useEffect(() => {
axios.get(‘https://api.example.com/products’)
.then(res => setProducts(res.data))
.catch(console.error);
}, []);
const renderItem = ({ item }) => (
<View style={styles.item}>
<Text style={styles.name}>{item.name}</Text>
<Text>{item.price}₫</Text>
</View>
);
return (
<View style={styles.container}>
<Text style={styles.header}>Danh sách sản phẩm</Text>
<FlatList
data={products}
renderItem={renderItem}
keyExtractor={item => item.id.toString()}
/>
</View>
);
};
const styles = StyleSheet.create({
container: { padding: 16 },
header: { fontSize: 20, fontWeight: ‘bold’, marginBottom: 10 },
item: { marginBottom: 10 },
name: { fontWeight: ‘600’ },
});
export default ProductList;
Kết luận
ReactJS và React Native tuy phục vụ các nền tảng khác nhau nhưng lại chia sẻ cùng một triết lý phát triển: dựa trên component, dùng JSX, và có thể chia sẻ logic chung. Nếu bạn đã biết ReactJS, việc học React Native sẽ nhanh và dễ dàng hơn nhiều. JSX là nền tảng trung gian mạnh mẽ giúp bạn viết UI logic một cách trực quan, mạch lạc.
Giảng viên Nguyễn Lê Phương
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
