Bắt Đầu Với React Native Cho Lập Trình Viên Web (React Roadmap)

Xin chào các chiến hữu trên Lộ trình React! Chúng ta đã cùng nhau đi qua một chặng đường đáng kể trong việc làm chủ React cho web, từ những khái niệm cơ bản như React là gì, JSX, Class vs Functional Components, Props vs State, cho đến các kỹ thuật nâng cao hơn như Hooks (useState, useEffect, useRef, useCallback, useMemo), useReducer, Context API, và thậm chí là Redux hay các thư viện quản lý state hiện đại khác như Recoil, Zustand, MobX. Chúng ta cũng đã chạm đến Data Fetching, Form Handling, và Testing.

Giờ đây, với nền tảng vững chắc đó, đã đến lúc mở rộng tầm nhìn sang một chân trời mới đầy tiềm năng: Mobile Development với React Native. Nếu bạn là một lập trình viên web đang muốn đưa kỹ năng React của mình lên thiết bị di động, đây chính là bài viết dành cho bạn. Chúng ta sẽ cùng nhau khám phá thế giới React Native, xem nó khác gì so với React cho web và làm thế nào để bắt đầu.

Mục lục

React Native Là Gì Và Vì Sao Lập Trình Viên Web Nên Quan Tâm?

React Native là một framework cho phép bạn xây dựng ứng dụng di động thực sự Native cho cả iOS và Android bằng cách sử dụng JavaScript và React. Điều kỳ diệu ở đây là bạn không xây dựng một ứng dụng web chạy trên di động (như các framework lai khác ngày xưa), mà bạn đang sử dụng JavaScript để điều khiển các UI component (thành phần giao diện người dùng) Native của nền tảng (iOS hoặc Android). Điều này mang lại hiệu suất cao, trải nghiệm người dùng mượt mà gần như viết code Native bằng Swift/Objective-C hay Java/Kotlin.

Lý do chính khiến React Native hấp dẫn các lập trình viên web (đặc biệt là những người dùng React) là khả năng:

Tái sử dụng kiến thức: Hầu hết các khái niệm cốt lõi của React như component, props, state, lifecycle (dù có chút khác biệt), hooks, quản lý state, xử lý sự kiện… đều được áp dụng trong React Native. Nền tảng bạn đã xây dựng với React web không hề lãng phí!
Chia sẻ code: Bạn có thể chia sẻ logic kinh doanh (business logic) giữa ứng dụng web và ứng dụng di động của mình, giúp tiết kiệm thời gian và công sức.
Phát triển nhanh chóng: Với Hot Reloading và một hệ sinh thái thư viện phong phú, quá trình phát triển trở nên cực kỳ nhanh chóng.
Native Performance: Như đã nói, bạn đang làm việc với các UI component Native, không phải WebView.
Một codebase cho hai nền tảng: Viết code một lần và chạy trên cả iOS và Android (với một số điều chỉnh nhỏ cho từng nền tảng).

Nếu bạn đã yêu thích sự hiệu quả và linh hoạt của React trên web, bạn chắc chắn sẽ tìm thấy những điều tương tự và thú vị hơn nữa khi chuyển sang React Native.

Những Khái Niệm Cốt Lõi Vẫn Giữ Nguyên: Điểm Tựa Vững Chắc Của Bạn

Đây là tin tốt nhất cho bạn! Rất nhiều thứ bạn đã học trong Lộ trình React vẫn nguyên giá trị khi chuyển sang React Native. Hãy cùng điểm lại:

Components: Đơn vị cơ bản để xây dựng giao diện vẫn là Component. Bạn vẫn định nghĩa các component bằng hàm (Functional Components) hoặc lớp (Class Components), mặc dù functional components và Hooks là cách làm hiện đại được khuyến khích. Việc kết hợp các component để tạo nên giao diện phức tạp vẫn y hệt.
JSX: Cú pháp JSX quen thuộc vẫn là cách bạn viết cấu trúc giao diện trong React Native. Tuy nhiên, thay vì các thẻ HTML như <div>, <p>, <span>, bạn sẽ sử dụng các component Native của React Native như <View>, <Text>, <Image>,…
Props: Cách truyền dữ liệu từ component cha xuống component con vẫn thông qua Props. Khái niệm unidirectional data flow (luồng dữ liệu một chiều) vẫn là kim chỉ nam.
State: Quản lý dữ liệu cục bộ trong component vẫn sử dụng State. Với Functional Components, bạn vẫn dùng hook useState.
Hooks: Toàn bộ sức mạnh của React Hooks (useState, useEffect, useContext, useReducer, useRef, useCallback, useMemo) vẫn được áp dụng trong React Native. Bạn vẫn viết Custom Hooks để tái sử dụng logic.
Component Lifecycle: Mặc dù cách triển khai có thể khác một chút ở một số điểm so với Class Components trên web, nhưng các giai đoạn chính của vòng đời component (mounting, updating, unmounting) vẫn tồn tại và useEffect là công cụ chính để xử lý các side effects tương ứng.
Quản lý State Toàn cục: Các thư viện quản lý state toàn cục bạn đã quen thuộc như Context API, Redux Toolkit, Recoil, MobX đều có thể được sử dụng trong React Native.
Data Fetching: Cách gọi API sử dụng Fetch API hoặc Axios, hay các thư viện data fetching như React Query hoặc SWR, vẫn tương tự. Khái niệm REST và GraphQL cũng vậy.

Tóm lại, nếu bạn đã thoải mái với React web, bạn đã có sẵn 70-80% kiến thức cần thiết để bắt đầu với React Native. Công việc còn lại là học những khác biệt cốt lõi liên quan đến môi trường Native.

Những Khác Biệt Cốt Lõi: Thế Giới Mobile Không Phải DOM

Đây là phần quan trọng nhất mà bạn cần chú ý:

1. Không Có DOM, Thay Vào Đó Là Các Component Native

Trên web, bạn thao tác với DOM (Document Object Model) thông qua các thẻ HTML. Trong React Native, bạn làm việc trực tiếp với các UI component Native của iOS và Android.

Thay vì <div>, bạn dùng <View>. <View> là container cơ bản, tương tự như <div>, dùng để nhóm các phần tử khác.
Thay vì <p>, <span>, <h1>, …, bạn dùng <Text>. Tất cả văn bản phải nằm trong component <Text>.
Thay vì <img>, bạn dùng <Image>.
Thay vì <input>, bạn dùng <TextInput>.
Thay vì <button>, bạn thường dùng các component có khả năng chạm như <Button> (khá cơ bản), <TouchableOpacity> (phổ biến hơn, tạo hiệu ứng mờ khi chạm) hoặc <TouchableWithoutFeedback>.

// React Web
<div>
  <p>Hello Web!</p>
</div>

// React Native
import { View, Text } from 'react-native';
...
<View>
  <Text>Hello Native!</Text>
</View>

2. Styling: Không Có CSS, Chỉ Có JavaScript Objects

Bạn không viết CSS trong React Native. Thay vào đó, bạn định nghĩa styles bằng các đối tượng JavaScript. Các tên thuộc tính style thường giống với CSS nhưng được viết theo kiểu camelCase (ví dụ: background-color trở thành backgroundColor). Các giá trị kích thước mặc định là đơn vị độc lập với pixel (density-independent pixels – dp), giúp UI hiển thị nhất quán trên các kích thước màn hình khác nhau.

Cách phổ biến nhất để định nghĩa styles là sử dụng StyleSheet.create(). Phương thức này tối ưu hóa style bằng cách tạo ra một ID style duy nhất cho mỗi object style, giúp tăng hiệu suất.

import { StyleSheet, View, Text } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1, // Sử dụng Flexbox để layout
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Styled Text</Text>
    </View>
  );
};

Flexbox: Tin tốt là React Native sử dụng Flexbox làm hệ thống layout mặc định và là cách chính để bố trí các phần tử. Tuy nhiên, hướng trục chính mặc định là `column` (chiều dọc), khác với `row` trên web. Nhưng các thuộc tính Flexbox như `flex`, `flexDirection`, `justifyContent`, `alignItems`, `alignSelf`, `padding`, `margin`… hoạt động rất giống.

Bạn cũng có thể sử dụng inline styles, nhưng StyleSheet.create() được khuyến khích hơn cho hiệu suất và tổ chức code.

3. Navigation: Không Có React Router (Thường Thì)

Trong khi React Router là thư viện phổ biến cho web, React Native có hệ thống điều hướng riêng, phổ biến nhất là React Navigation. Thư viện này cung cấp các kiểu điều hướng Native như Stack Navigation, Tab Navigation, Drawer Navigation, mang lại trải nghiệm người dùng chuẩn mực trên mobile.

4. Truy Cập API Thiết Bị và Native Modules

Đây là điểm mạnh lớn của React Native. Bạn có thể truy cập các tính năng phần cứng của thiết bị (camera, GPS, danh bạ, bộ nhớ cục bộ…) thông qua các Native Modules được cung cấp bởi React Native hoặc các thư viện của cộng đồng. Khi cần làm việc với các tính năng Native rất đặc thù hoặc tối ưu hiệu suất cho một tác vụ nặng, bạn có thể viết code Native (Swift/Objective-C hoặc Java/Kotlin) và bridge nó sang JavaScript để sử dụng trong ứng dụng React Native của mình.

Bắt Đầu Dự Án React Native Đầu Tiên: Chọn Lựa Công Cụ

Có hai cách chính để bắt đầu một dự án React Native:

Expo CLI: Đây là cách nhanh nhất và dễ nhất, đặc biệt cho người mới bắt đầu và các dự án không yêu cầu các Native Modules tùy chỉnh phức tạp ngay từ đầu. Expo cung cấp một bộ công cụ quản lý (managed workflow) giúp bạn tránh phải cấu hình môi trường Native (Xcode, Android Studio) ngay lập tức. Bạn có thể chạy ứng dụng trực tiếp trên điện thoại thật bằng ứng dụng Expo Go chỉ bằng cách quét mã QR.
React Native CLI: Đây là cách truyền thống, cho phép bạn toàn quyền kiểm soát dự án Native (bare workflow). Nó yêu cầu cài đặt và cấu hình môi trường phát triển iOS và Android đầy đủ (Xcode cho iOS trên macOS, Android Studio cho Android trên mọi HĐH). Cách này phù hợp khi bạn cần truy cập các API Native rất cụ thể hoặc sử dụng các thư viện chỉ hỗ trợ bare workflow.

Lời khuyên cho người mới bắt đầu: Hãy bắt đầu với Expo CLI. Nó sẽ giúp bạn tập trung vào việc học React Native mà không bị sa lầy vào những rắc rối cấu hình Native ban đầu.

Thiết Lập Môi Trường Với Expo CLI

Đảm bảo bạn đã cài đặt Node.js (phiên bản LTS được khuyến nghị) và Yarn hoặc npm.

Cài đặt Expo CLI:

npm install -g expo-cli
        # hoặc
        yarn global add expo-cli

Tạo dự án mới:
```
expo init MyReactNativeApp
        
```
Khi được hỏi, chọn template `blank` (bare minimum để bắt đầu).

Di chuyển vào thư mục dự án và chạy:

cd MyReactNativeApp
        npm start
        # hoặc
        yarn start

Chạy ứng dụng: Expo CLI sẽ mở một cửa sổ terminal hoặc tab trình duyệt với Metro Bundler. Bạn sẽ thấy các tùy chọn để chạy ứng dụng:
- Quét mã QR bằng ứng dụng Expo Go trên điện thoại iOS hoặc Android của bạn.
- Chạy trên trình giả lập iOS (yêu cầu macOS và Xcode).
- Chạy trên trình giả lập Android (yêu cầu Android Studio).
- Chạy trên thiết bị thật kết nối qua USB.
Cách đơn giản nhất là cài Expo Go trên điện thoại của bạn và quét QR.

Vậy là bạn đã sẵn sàng viết code React Native!

Code React Native Đầu Tiên

Mở file App.js (hoặc App.tsx nếu dùng TypeScript) trong dự án Expo vừa tạo. Bạn sẽ thấy cấu trúc code ban đầu. Hãy sửa nó thành một ví dụ đơn giản hơn:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Chào mừng bạn đến với React Native!</Text>
      <Text>Từ một Web Dev.</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Lưu file, và bạn sẽ thấy ứng dụng trên điện thoại/trình giả lập của mình tự động cập nhật (Hot Reloading). Tuyệt vời phải không?

Hãy phân tích đoạn code nhỏ này:

Chúng ta import các component từ thư viện react-native (StyleSheet, Text, View) và expo-status-bar.
Component chính App trả về cấu trúc giao diện bằng JSX.
<View> là container gốc, nhận prop style. Giá trị của style là một object được định nghĩa bằng StyleSheet.create().
Trong styles.container, chúng ta thấy các thuộc tính Flexbox: flex: 1 (choán hết không gian), alignItems: 'center' (căn giữa theo trục ngang), justifyContent: 'center' (căn giữa theo trục dọc).
<Text> hiển thị văn bản. Nhớ rằng tất cả văn bản phải nằm trong <Text>.
<StatusBar> từ Expo giúp tùy chỉnh thanh trạng thái (ví dụ: màu sắc).

Đi Sâu Hơn Một Chút: Styling và Layout

Như đã đề cập, Flexbox là xương sống của layout trong React Native. Hãy thử một ví dụ khác với Flexbox:

import { StyleSheet, Text, View } from 'react-native';

export default function FlexboxExample() {
  return (
    <View style={styles.container}>
      <View style={[styles.box, { backgroundColor: 'red' }]}><Text>Box 1</Text></View>
      <View style={[styles.box, { backgroundColor: 'blue' }]}><Text>Box 2</Text></View>
      <View style={[styles.box, { backgroundColor: 'green' }]}><Text>Box 3</Text></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // Các phần tử sẽ được xếp theo chiều ngang
    justifyContent: 'space-around', // Phân bố đều khoảng trống xung quanh
    alignItems: 'center', // Căn giữa theo trục chéo (dọc)
    paddingTop: 50, // Thêm padding trên để tránh thanh trạng thái
  },
  box: {
    width: 80,
    height: 80,
    justifyContent: 'center', // Căn giữa nội dung (Text) bên trong box
    alignItems: 'center',
  },
});

Lưu ý cách chúng ta truyền mảng styles [styles.box, { backgroundColor: '...' }] vào prop style. Điều này cho phép bạn kết hợp các style object, với style ở cuối ghi đè style ở đầu.

Expo CLI vs React Native CLI: Lựa Chọn Nào Phù Hợp?

Để giúp bạn đưa ra quyết định ban đầu, đây là bảng so sánh cơ bản:

Tính năng	Expo CLI (Managed Workflow)	React Native CLI (Bare Workflow)
Cài đặt & Thiết lập	Rất dễ, chỉ cần Node.js và Expo CLI. Chạy trên Expo Go app.	Phức tạp hơn, yêu cầu cài đặt Xcode (macOS) và Android Studio, cấu hình biến môi trường, JDK, v.v.
Truy cập Native Modules	Chỉ dùng các Native Modules được Expo hỗ trợ sẵn hoặc thư viện có sẵn của cộng đồng tương thích với Expo. Có thể dùng Expo Modules (trước đây là Bare Workflow) để viết Native code.	Truy cập mọi Native Module, có thể liên kết thư viện Native tùy ý hoặc viết Native code của riêng bạn.
Quy trình Build	Dùng dịch vụ build của Expo trên cloud (Expo Application Services – EAS). Rất đơn giản.	Tự build ứng dụng Native trên máy cục bộ (sử dụng Xcode/Gradle). Cần cấu hình signing, v.v.
“Eject” (Thoát khỏi Managed Workflow)	Có thể “eject” khỏi Expo (thực chất là thêm cấu hình Native) để có quyền truy cập Bare Workflow khi cần.	Luôn ở trong Bare Workflow.
Kích thước ứng dụng	Ứng dụng có thể lớn hơn một chút do bao gồm Expo SDK.	Có thể tối ưu kích thước tốt hơn.
Đối tượng phù hợp	Người mới bắt đầu, prototype nhanh, ứng dụng không cần Native Module quá đặc thù, phát triển ứng dụng nội bộ.	Dự án lớn, phức tạp, yêu cầu truy cập sâu vào API Native, đội ngũ có kinh nghiệm Mobile Native hoặc muốn kiểm soát toàn bộ build process.

Bắt đầu với Expo thường là bước đi khôn ngoan nhất. Nếu sau này dự án của bạn có yêu cầu đặc thù, bạn luôn có thể “eject” hoặc sử dụng các giải pháp như Expo Modules để mở rộng khả năng Native.

Các Bước Tiếp Theo Trên Lộ Trình React Native

Sau khi đã nắm được cách thiết lập và những khác biệt cơ bản, bạn nên tiếp tục học về:

Navigation: Làm chủ React Navigation (Stack, Tab, Drawer navigators).
Làm việc với Danh sách: Sử dụng <FlatList> và <SectionList> để hiển thị dữ liệu dạng danh sách một cách hiệu quả (tương tự như làm việc với danh sách trên web nhưng với component tối ưu cho mobile).
Xử lý Tương tác Người dùng: Các component Touchable (TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback), xử lý cử chỉ (gestures).
Form Handling: Làm việc với <TextInput>, bàn phím ảo, và các thư viện form như React Hook Form hoặc Formik (có phiên bản hỗ trợ React Native).
Truy cập API Thiết bị: Sử dụng các module của Expo hoặc các thư viện cộng đồng để truy cập camera, GPS, storage, v.v.
Xử lý Platform-Specific Code: Viết code khác nhau cho iOS và Android khi cần.
Testing: Áp dụng các kỹ thuật Unit Testing với Jest và React Testing Library (có phiên bản cho Native), và E2E Testing với các công cụ phù hợp cho mobile.
Performance: Tìm hiểu cách tối ưu hóa hiệu suất ứng dụng React Native.

Lời Kết

Chuyển từ React web sang React Native là một bước tiến thú vị và hoàn toàn khả thi với kiến thức bạn đã có. Đừng lo lắng về những khác biệt ban đầu; chúng chỉ là những điều chỉnh nhỏ trong bối cảnh rộng lớn của React. Sự đầu tư vào việc học React web giờ đây đang đơm hoa kết trái khi bạn có thể tái sử dụng hầu hết kỹ năng để xây dựng các ứng dụng di động chất lượng cao.

Hãy bắt đầu với Expo, xây dựng ứng dụng nhỏ đầu tiên của bạn, làm quen với các component Native và cách styling mới. Sau đó, từ từ khám phá các khía cạnh phức tạp hơn như điều hướng, làm việc với API thiết bị và tối ưu hiệu suất.

Đây mới chỉ là khởi đầu cho hành trình của bạn với React Native trong Lộ trình React. Trong các bài viết tiếp theo, chúng ta sẽ đi sâu vào các chủ đề cụ thể hơn của React Native. Hãy cùng nhau khám phá thế giới mobile đầy tiềm năng này!

Bạn đã sẵn sàng chưa? Hãy bắt tay vào viết dòng code React Native đầu tiên của mình!

Bắt Đầu Với React Native Cho Lập Trình Viên Web (React Roadmap)

React Native Là Gì Và Vì Sao Lập Trình Viên Web Nên Quan Tâm?

Những Khái Niệm Cốt Lõi Vẫn Giữ Nguyên: Điểm Tựa Vững Chắc Của Bạn

Những Khác Biệt Cốt Lõi: Thế Giới Mobile Không Phải DOM

1. Không Có DOM, Thay Vào Đó Là Các Component Native

2. Styling: Không Có CSS, Chỉ Có JavaScript Objects

3. Navigation: Không Có React Router (Thường Thì)

4. Truy Cập API Thiết Bị và Native Modules

Bắt Đầu Dự Án React Native Đầu Tiên: Chọn Lựa Công Cụ

Thiết Lập Môi Trường Với Expo CLI

Code React Native Đầu Tiên

Đi Sâu Hơn Một Chút: Styling và Layout

Expo CLI vs React Native CLI: Lựa Chọn Nào Phù Hợp?

Các Bước Tiếp Theo Trên Lộ Trình React Native

Lời Kết

Evotek đồng hành cùng bạn

Call us

(+84) 8.2468.9999

Đăng nhập

Reset Password

Tạo tài khoản Nhà E

Bắt Đầu Với React Native Cho Lập Trình Viên Web (React Roadmap)

React Native Là Gì Và Vì Sao Lập Trình Viên Web Nên Quan Tâm?

Những Khái Niệm Cốt Lõi Vẫn Giữ Nguyên: Điểm Tựa Vững Chắc Của Bạn

Những Khác Biệt Cốt Lõi: Thế Giới Mobile Không Phải DOM

1. Không Có DOM, Thay Vào Đó Là Các Component Native

2. Styling: Không Có CSS, Chỉ Có JavaScript Objects

3. Navigation: Không Có React Router (Thường Thì)

4. Truy Cập API Thiết Bị và Native Modules

Bắt Đầu Dự Án React Native Đầu Tiên: Chọn Lựa Công Cụ

Thiết Lập Môi Trường Với Expo CLI

Code React Native Đầu Tiên

Đi Sâu Hơn Một Chút: Styling và Layout

Expo CLI vs React Native CLI: Lựa Chọn Nào Phù Hợp?

Các Bước Tiếp Theo Trên Lộ Trình React Native

Lời Kết

Share this post

Recent News Articles

React Roadmap: Giải mã Kiến trúc Fiber của React

Error Boundaries: Ngăn Giao Diện Người Dùng (UI) Sập Đổ (React Roadmap)

React Portals: Hiển thị Component Ra Ngoài Cây DOM (React Roadmap)

Evotek đồng hành cùng bạn

Đăng nhập

Reset Password

Tạo tài khoản Nhà E

Call us

(+84) 8.2468.9999