React native là gì? Toàn tập về lập trình ứng dụng di động đa nền tảng

Phần này sẽ cung cấp cho bạn cái nhìn tổng quan và đầy đủ nhất về React Native, từ định nghĩa, nguồn gốc, nguyên lý hoạt động cốt lõi, đến những ưu và nhược điểm rõ ràng. Bạn sẽ hiểu tại sao React Native trở thành một lựa chọn hàng đầu cho việc phát triển ứng dụng di động và nó khác biệt như thế nào so với các công nghệ phổ biến khác.

Giới thiệu tổng quan: Từ ReactJS đến React Native

React Native là một framework mã nguồn mở được phát triển bởi Facebook (nay là Meta), cho phép các lập trình viên xây dựng ứng dụng di động cho cả hai hệ điều hành iOS và Android chỉ từ một codebase duy nhất. Ngôn ngữ chính được sử dụng trong React Native là JavaScript, cùng với cú pháp JSX (JavaScript XML) – một cú pháp mở rộng cho phép viết mã trông giống như HTML ngay trong JavaScript.

Nguồn gốc của React Native bắt nguồn từ "người anh em" của nó là ReactJS, một thư viện JavaScript dùng để xây dựng giao diện người dùng (UI) cho các ứng dụng web. Nhận thấy sự thành công và hiệu quả của mô hình phát triển dựa trên component của ReactJS, Facebook đã tìm cách áp dụng triết lý tương tự cho việc phát triển ứng dụng di động. Kết quả là React Native ra đời, mang sức mạnh của React đến với thế giới mobile. Điều này có nghĩa là nếu bạn đã quen thuộc với ReactJS, việc chuyển sang học lập trình React Native sẽ trở nên dễ dàng hơn rất nhiều.

Nguyên lý hoạt động cốt lõi: "Learn once, write anywhere"

Khẩu hiệu nổi tiếng của React Native là "Learn once, write anywhere" (Học một lần, viết ở mọi nơi). Điều này phản ánh chính xác nguyên lý hoạt động của nó. Thay vì biên dịch mã JavaScript thành mã native của từng nền tảng (như một số framework khác), React Native hoạt động dựa trên một "cầu nối" (Bridge).

Khi ứng dụng chạy, mã JavaScript của bạn sẽ chạy trên một luồng riêng biệt (JS Thread). Khi cần render giao diện hoặc truy cập vào các tính năng của thiết bị (như camera, GPS), mã JavaScript sẽ gửi các thông điệp bất đồng bộ qua Bridge tới luồng native (Native Thread). Luồng native sẽ diễn giải các thông điệp này và sử dụng các UI component gốc của hệ điều hành (ví dụ: UIView trên iOS, View trên Android) để hiển thị lên màn hình.

Cơ chế này mang lại hai lợi ích lớn:

1. Trải nghiệm người dùng mượt mà: Vì giao diện được render bằng các component native thực thụ, người dùng sẽ có cảm giác "thật" và quen thuộc như đang sử dụng một ứng dụng được viết bằng ngôn ngữ gốc của máy.

2. Hiệu năng cao: Các tác vụ nặng về logic được xử lý trên luồng JS, không làm ảnh hưởng đến luồng UI native, giúp ứng dụng phản hồi nhanh hơn.

So sánh React Native và các công nghệ khác

Để hiểu rõ hơn về vị thế của React Native, việc so sánh nó với các công nghệ khác là rất quan trọng.

• React Native và ReactJS: Đây là câu hỏi thường gặp nhất. ReactJS là thư viện để xây dựng giao diện người dùng cho web , sử dụng các thẻ HTML ảo như

  ,  . Trong khi đó, React Native dùng để xây dựng giao diện cho ứng dụng di động , sử dụng các component đã được ánh xạ sang UI native như , . Cả hai đều chia sẻ chung cú pháp JSX, khái niệm về component, props, và state. Vì vậy, có thể nói ReactJS và React Native là hai anh em chung một nhà nhưng phục vụ hai mục đích khác nhau.

• React Native và Flutter: Flutter là đối thủ cạnh tranh trực tiếp nhất của React Native, được phát triển bởi Google.

  • Ngôn ngữ: React Native dùng JavaScript/TypeScript, trong khi Flutter dùng Dart.

  • Kiến trúc: React Native dùng Bridge để giao tiếp với nền tảng native. Flutter thì tự vẽ toàn bộ giao diện của mình bằng engine đồ họa Skia, không cần dùng đến UI component gốc của hệ điều hành. Điều này giúp Flutter có hiệu năng đồ họa rất cao và giao diện nhất quán tuyệt đối trên mọi thiết bị, nhưng đôi khi có thể tạo cảm giác "lạ" so với ứng dụng native.

• React Native và Lập trình Native (Swift/Kotlin):

  • Hiệu năng: Lập trình native luôn cho hiệu năng cao nhất vì mã được viết và tối ưu trực tiếp cho hệ điều hành. React Native, dù rất hiệu quả, vẫn có một lớp trung gian là Bridge, nên có thể chậm hơn trong các tác vụ cực kỳ phức tạp hoặc đòi hỏi đồ họa cao.

  • Thời gian và chi phí: Đây là ưu điểm vượt trội của React Native. Thay vì phải xây dựng và duy trì hai đội ngũ riêng biệt cho iOS và Android, bạn chỉ cần một đội ngũ JavaScript để phát triển cho cả hai nền tảng, giúp tiết kiệm đáng kể thời gian và chi phí.

Lộ trình học React Native từ cơ bản đến nâng cao cho người mới bắt đầu

Bạn sẽ nhận được một bản đồ chi tiết, từng bước một để chinh phục React Native. Lộ trình học react native này được thiết kế khoa học, bắt đầu từ những kiến thức nền tảng không thể thiếu, cho đến việc tự tin xây dựng, quản lý trạng thái, tối ưu hóa và triển khai một ứng dụng hoàn chỉnh ra thị trường

Giai đoạn 1: Nền tảng Javascript và ReactJS cần nắm vững

Đây là bước quan trọng nhất và thường bị nhiều người bỏ qua. React Native không phải là một công nghệ độc lập, nó được xây dựng dựa trên JavaScript và React. Nếu bạn cố gắng học React Native mà không có nền tảng vững chắc, bạn sẽ gặp rất nhiều khó khăn.

• JavaScript (ES6+): Bạn cần nắm vững các khái niệm hiện đại của JavaScript, bao gồm:

  • Biến và phạm vi: let , const , var .

  • Các kiểu dữ liệu: Array , Object .

  • Hàm: Arrow functions ( => ).

  • Lập trình bất đồng bộ: Promises , async/await .

  • Destructuring, Spread/Rest operators.

  • Modules: import , export .

• ReactJS: Sau khi vững JavaScript, bạn cần học các khái niệm cốt lõi của React. Đây chính là lộ trình học react hiệu quả nhất:

  • JSX: Cú pháp để viết UI.

  • Components: Functional Components và Class Components (hiện nay Functional Components được ưa chuộng hơn).

  • Props: Cách truyền dữ liệu từ component cha xuống con.

  • State: Cách quản lý trạng thái nội tại của một component.

  • Lifecycle Methods (trong Class Components) và React Hooks (trong Functional Components) như useState , useEffect , useContext .

Giai đoạn 2: Bắt đầu với React Native - Môi trường và công cụ

Khi đã có nền tảng, bạn có thể bắt đầu bước vào thế giới React Native.

• Hiểu về môi trường phát triển: Tìm hiểu sự khác biệt giữa hai cách tiếp cận chính:

  • React Native CLI (Command Line Interface): Cung cấp toàn quyền kiểm soát dự án, cho phép bạn viết mã native tùy chỉnh. Phù hợp cho các dự án phức tạp.

  • Expo: Một bộ công cụ và dịch vụ xây dựng trên React Native, giúp đơn giản hóa quá trình phát triển. Bạn không cần cài đặt Android Studio hay Xcode. Rất phù hợp cho người mới bắt đầu và các dự án không yêu cầu can thiệp sâu vào mã native.

• Cài đặt môi trường: Dựa trên lựa chọn của mình, hãy tự tay cài đặt môi trường theo hướng dẫn chi tiết và tạo dự án đầu tiên.

Giai đoạn 3: Xây dựng giao diện và tương tác người dùng

Đây là giai đoạn bạn sẽ học cách biến ý tưởng thành giao diện thực tế trên điện thoại.

• Core Components: Làm quen với các component cơ bản nhất như , , , , .

• Styling: Học cách tạo kiểu cho các component bằng StyleSheet API, tương tự như CSS nhưng với cú pháp JavaScript. Nắm vững Flexbox để xây dựng layout linh hoạt và đáp ứng trên nhiều kích thước màn hình.

• Lists: Học cách hiển thị danh sách dữ liệu hiệu quả bằng và .

• Navigation: Đây là phần không thể thiếu của mọi ứng dụng. Học cách sử dụng thư viện phổ biến nhất là React Navigation để tạo các luồng điều hướng giữa các màn hình, bao gồm Stack Navigator, Tab Navigator ( createMaterialTopTabNavigator ), và Drawer Navigator.

Giai đoạn 4: Quản lý dữ liệu và trạng thái ứng dụng

Khi ứng dụng trở nên phức tạp, việc quản lý trạng thái (state) và dữ liệu sẽ trở thành thách thức.

• State Management: Tìm hiểu các giải pháp quản lý trạng thái toàn cục (global state) như:

  • React Context: Giải pháp sẵn có của React, phù hợp cho các ứng dụng vừa và nhỏ.

  • Redux / Redux Toolkit: Thư viện quản lý trạng thái mạnh mẽ và phổ biến nhất, phù hợp cho các ứng dụng lớn.

  • Các giải pháp khác như MobX, Zustand.

• Làm việc với API: Học cách gọi API từ server bằng fetch API hoặc các thư viện như axios để lấy và gửi dữ liệu.

• Lưu trữ cục bộ: Nắm vững cách lưu trữ dữ liệu trên thiết bị người dùng bằng AsyncStorage , một giải pháp lưu trữ key-value đơn giản và hiệu quả.

Giai đoạn 5: Tối ưu hóa và triển khai ứng dụng

Sau khi đã xây dựng được ứng dụng, bước cuối cùng là đảm bảo nó hoạt động mượt mà và đưa nó đến tay người dùng.

• Tối ưu hiệu năng (Performance): Tìm hiểu các kỹ thuật tối ưu như useMemo , useCallback , React.memo để tránh re-render không cần thiết, tối ưu hóa hiệu năng của FlatList , và debug các vấn đề hiệu năng bằng Flipper.

• Triển khai (Deployment): Học quy trình build ứng dụng thành file .apk (Android) và .ipa (iOS) và các bước để đưa ứng dụng lên Google Play Store và Apple App Store.

Hướng dẫn cài đặt môi trường và tạo dự án React Native đầu tiên

Tóm tắt: Phần này cung cấp hướng dẫn thực hành chi tiết để bạn có thể tự tay cài đặt môi trường phát triển và chạy thành công dự án "Hello World" đầu tiên. Chúng tôi sẽ phân tích rõ ràng hai phương pháp phổ biến là Expo và React Native CLI, giúp bạn đưa ra lựa chọn phù hợp nhất và bắt đầu hành trình code của mình.

Lựa chọn môi trường: React Native CLI và Expo - Nên chọn gì?

Trước khi bắt đầu, bạn cần đưa ra một quyết định quan trọng: sử dụng Expo hay React Native CLI . Đây là hai con đường chính để phát triển ứng dụng React Native, mỗi con đường có ưu và nhược điểm riêng.

• Expo (Khuyến khích cho người mới bắt đầu):

  • Ưu điểm:

    • Cài đặt nhanh chóng: Bạn chỉ cần cài đặt Node.js và Expo CLI. Không cần cài đặt Android Studio hay Xcode (dung lượng rất lớn).

    • Phát triển dễ dàng: Bạn có thể chạy ứng dụng trực tiếp trên điện thoại thật bằng cách quét mã QR qua ứng dụng Expo Go.

    • Tích hợp sẵn nhiều API: Expo cung cấp một bộ thư viện (SDK) đã được tối ưu và kiểm thử, giúp bạn dễ dàng truy cập camera, cảm biến, thông báo đẩy...

  • Nhược điểm:

    • Giới hạn: Bạn không thể sử dụng các thư viện React Native yêu cầu liên kết mã native (native linking) mà không có trong Expo SDK. Mặc dù hiện nay Expo đã có expo dev client để khắc phục phần nào, nhưng vẫn có những giới hạn nhất định.

    • Kích thước ứng dụng lớn hơn: Ứng dụng build bằng Expo thường có kích thước ban đầu lớn hơn một chút.

• React Native CLI (Dành cho dự án chuyên nghiệp và phức tạp):

  • Ưu điểm:

    • Linh hoạt tối đa: Bạn có toàn quyền kiểm soát dự án, có thể tích hợp bất kỳ thư viện native nào và tự viết module native nếu cần.

    • Tối ưu kích thước ứng dụng: Bạn chỉ đóng gói những gì cần thiết, giúp ứng dụng cuối cùng nhẹ hơn.

  • Nhược điểm:

    • Cài đặt phức tạp: Yêu cầu cài đặt và cấu hình Android Studio (cho Android) và Xcode (cho iOS), đây là một quá trình tốn thời gian và có thể gặp nhiều lỗi.

    • Phụ thuộc vào máy ảo/thiết bị thật: Cần chạy máy ảo (emulator/simulator) hoặc kết nối thiết bị thật qua cáp để phát triển.

Kết luận: Nếu bạn là người mới học React Native hoặc đang làm một dự án không quá phức tạp, hãy bắt đầu với Expo . Nó sẽ giúp bạn tập trung vào việc học logic của React Native mà không bị phân tâm bởi các vấn đề cấu hình môi trường.

Hướng dẫn chi tiết với Expo (Expo Go, Expo Dev Client)

Yêu cầu:

1. Cài đặt Node.js (phiên bản LTS).

2. Cài đặt ứng dụng Expo Go trên điện thoại Android hoặc iOS của bạn.

Các bước thực hiện:

1. Cài đặt Expo CLI: Mở Terminal (trên macOS/Linux) hoặc Command Prompt/PowerShell (trên Windows) và chạy lệnh sau:

   npm install -g expo-cli

2. Tạo dự án mới:

   expo init MyFirstApp

   Khi được hỏi, hãy chọn template blank (dành cho dự án trống) hoặc tabs (dành cho dự án có sẵn thanh điều hướng tab). Sau đó, di chuyển vào thư mục dự án:

   cd MyFirstApp

3. Chạy dự án:

   npm start

   Lệnh này sẽ khởi động Metro Bundler và hiển thị một mã QR trong terminal.

4. Xem ứng dụng trên điện thoại: Mở ứng dụng Expo Go trên điện thoại của bạn, chọn "Scan QR Code" và quét mã QR trong terminal. Ứng dụng của bạn sẽ được tải và chạy trên điện thoại. Thật đơn giản!

Hướng dẫn chi tiết với React Native CLI (Android Studio, Xcode)

Quá trình này phức tạp hơn và yêu cầu cấu hình cho từng hệ điều hành.

Yêu cầu chung:

1. Cài đặt Node.js (phiên bản LTS).

2. Cài đặt Watchman (khuyến nghị cho macOS).

Cài đặt cho Android (trên Windows/macOS/Linux):

1. Cài đặt Java Development Kit (JDK).

2. Cài đặt Android Studio .

3. Trong Android Studio, vào SDK Manager và cài đặt Android SDK Platform cần thiết.

4. Cấu hình biến môi trường ANDROID_HOME .

5. Tạo và khởi động một máy ảo Android (AVD) từ Android Studio.

Cài đặt cho iOS (chỉ trên macOS):

1. Cài đặt Xcode từ App Store.

2. Cài đặt Command Line Tools trong Xcode.

3. Cài đặt CocoaPods.

Tạo và chạy dự án:

1. Tạo dự án mới:

   npx react-native init MyFirstCliApp

2. Chạy trên Android:

   Đảm bảo máy ảo Android của bạn đang chạy hoặc đã kết nối thiết bị thật. Sau đó, chạy lệnh:

   npx react-native run-android

3. Chạy trên iOS (chỉ trên macOS):

   Đảm bảo máy ảo iOS của bạn đang chạy. Sau đó, chạy lệnh:

   npx react-native run-ios

Quá trình build lần đầu có thể mất khá nhiều thời gian. Sau khi thành công, bạn sẽ thấy ứng dụng mặc định của React Native chạy trên máy ảo.

Các khái niệm cốt lõi trong React Native bạn phải biết

Tóm tắt: Phần này sẽ đi sâu vào các "viên gạch" nền tảng xây dựng nên mọi ứng dụng React Native. Bạn sẽ hiểu rõ bản chất của Components, Props và State, cách chúng phối hợp với nhau, làm thế nào để tạo kiểu cho giao diện một cách hiệu quả, và cách xử lý các sự kiện từ người dùng cũng như điều hướng phức tạp trong ứng dụng.

Components, Props và State: Nền tảng của mọi ứng dụng

Giống như ReactJS, mọi thứ trong React Native đều là Component . Một component là một khối UI độc lập, có thể tái sử dụng. Bạn có thể coi mỗi màn hình, mỗi nút bấm, mỗi ô nhập liệu là một component.

• Components: Là các hàm JavaScript (Functional Components) hoặc các class (Class Components) trả về các phần tử React để mô tả giao diện sẽ trông như thế nào. 

• Props (Properties): Là cách để truyền dữ liệu từ component cha xuống component con. Props là đối tượng chỉ đọc ( read-only ), nghĩa là component con không thể thay đổi props mà nó nhận được. Trong ví dụ trên, title là một prop.

• State: Là dữ liệu mà một component tự quản lý và có thể thay đổi theo thời gian. Khi state thay đổi, component sẽ tự động render lại để cập nhật giao diện. Trong Functional Components, chúng ta sử dụng hook useState để quản lý state.

Styling: Tạo giao diện đẹp mắt và linh hoạt

Trong React Native, bạn không sử dụng CSS. Thay vào đó, bạn tạo kiểu bằng JavaScript. Cách tiếp cận phổ biến nhất là sử dụng StyleSheet.create để định nghĩa các kiểu và áp dụng chúng vào thuộc tính style của component.

• StyleSheet: Giúp tối ưu hóa hiệu năng và tạo ra mã nguồn sạch sẽ hơn.

• Flexbox: Là cơ chế layout chính trong React Native. Nếu bạn đã quen với Flexbox trên web, bạn sẽ cảm thấy rất quen thuộc. Nó cho phép bạn sắp xếp các phần tử một cách linh hoạt và dễ dàng tạo ra các giao diện phức tạp, tương thích với nhiều kích thước màn hình.

Xử lý sự kiện người dùng (Text Input, Touches, BackHandler)

Ứng dụng di động cần phải tương tác với người dùng. React Native cung cấp một hệ thống sự kiện mạnh mẽ.

• Touches: Các component như TouchableOpacity , TouchableHighlight , Pressable cho phép bạn xử lý các sự kiện chạm, nhấn giữ, v.v., thông qua các props như onPress , onLongPress .

• Text Input: Component cho phép người dùng nhập liệu. Bạn sử dụng prop onChangeText để bắt sự kiện thay đổi văn bản và cập nhật state tương ứng.

• BackHandler: Đây là một API đặc thù của Android, cho phép bạn lắng nghe và tùy chỉnh hành vi khi người dùng nhấn nút "Back" vật lý. Bạn có thể sử dụng nó để hiển thị hộp thoại xác nhận trước khi thoát ứng dụng hoặc để quay lại màn hình trước đó trong một luồng phức tạp.

Điều hướng trong ứng dụng với React Navigation

Hầu hết các ứng dụng đều có nhiều hơn một màn hình. Việc quản lý luồng di chuyển giữa các màn hình được gọi là điều hướng (navigation). Thư viện phổ biến và được khuyến nghị nhất là React Navigation .

• NavigationContainer: Là component gốc phải bọc toàn bộ cấu trúc điều hướng của ứng dụng. Nó quản lý cây điều hướng và chứa trạng thái điều hướng.

• Navigators: React Navigation cung cấp nhiều loại navigator để tạo các luồng khác nhau:

  • Stack Navigator: Các màn hình được xếp chồng lên nhau. Khi bạn đi đến một màn hình mới, nó sẽ được đặt lên trên cùng. Khi bạn quay lại, nó sẽ bị gỡ bỏ. Đây là loại phổ biến nhất.

  • Tab Navigator: Hiển thị một thanh tab ở cuối hoặc đầu màn hình, cho phép chuyển đổi giữa các màn hình khác nhau. createMaterialTopTabNavigator là một ví dụ, tạo ra thanh tab ở phía trên màn hình, thường thấy trong các ứng dụng Android.

  • Drawer Navigator: Hiển thị một menu trượt ra từ cạnh màn hình.

Việc kết hợp các navigator này cho phép bạn xây dựng các luồng điều hướng phức tạp, đáp ứng hầu hết các yêu cầu của ứng dụng hiện đại.

Làm việc với API và các tính năng nâng cao

Khám phá cách mở rộng năng lực cho ứng dụng của bạn. Phần này sẽ hướng dẫn bạn cách lưu trữ dữ liệu cục bộ một cách hiệu quả với AsyncStorage, tương tác với phần cứng của thiết bị thông qua các thư viện như BLEManager, xây dựng các tính năng phức tạp như giao diện chat, và tích hợp các dịch vụ bên ngoài như cổng thanh toán VNPAY.

Lưu trữ dữ liệu cục bộ với AsyncStorage

Khi bạn cần lưu trữ dữ liệu đơn giản và duy trì nó ngay cả khi người dùng đóng ứng dụng (ví dụ: lưu token đăng nhập, cài đặt người dùng, trạng thái của ứng dụng), AsyncStorage là công cụ dành cho bạn. Đây là một hệ thống lưu trữ key-value không được mã hóa, bất đồng bộ và hoạt động trên cả iOS và Android.

Nó hoạt động giống như localStorage trên web nhưng hoàn toàn bất đồng bộ, nghĩa là các thao tác đọc/ghi đều trả về một Promise .

• Cài đặt:

  npm install @react-native-async-storage/async-storage

• Ví dụ sử dụng:

  import AsyncStorage from '@react-native-async-storage/async-storage' ; // Lưu dữ liệu const storeData = async (value) => { try { await AsyncStorage.setItem( '@storage_Key' , value); } catch (e) { // saving error } }; // Đọc dữ liệu const getData = async () => { try { const value = await AsyncStorage.getItem( '@storage_Key' ); if (value!== null ) { // value previously stored } } catch (e) { // error reading value } };

Tích hợp phần cứng và API hệ thống (BLEManager, Camera, Geolocation)

Sức mạnh thực sự của ứng dụng di động nằm ở khả năng tương tác với phần cứng và các dịch vụ của hệ điều hành. React Native, thông qua một hệ sinh thái thư viện phong phú, cho phép bạn làm điều này một cách dễ dàng.

• Bluetooth Low Energy (BLE): Để làm việc với các thiết bị BLE (như smartwatches, thiết bị y tế), bạn có thể sử dụng các thư viện như react-native-ble-manager ( BLEManager ). Thư viện này cung cấp các hàm để quét, kết nối, đọc và ghi dữ liệu tới các thiết bị BLE.

• Camera & Thư viện ảnh: Các thư viện như react-native-vision-camera hoặc react-native-image-picker cho phép bạn truy cập vào camera của thiết bị để chụp ảnh, quay video hoặc chọn ảnh/video từ thư viện của người dùng.

• Vị trí (Geolocation): Thư viện react-native-geolocation-service cung cấp quyền truy cập vào vị trí GPS của thiết bị, hữu ích cho các ứng dụng bản đồ, giao hàng, hoặc check-in.

Xây dựng giao diện chat với GiftedChat

Việc xây dựng một giao diện chat từ đầu có thể rất phức tạp. May mắn thay, cộng đồng đã tạo ra GiftedChat , một thư viện mạnh mẽ và dễ sử dụng giúp bạn tạo ra một giao diện chat đầy đủ tính năng chỉ trong vài phút.

GiftedChat cung cấp sẵn các component cho:

• Bong bóng chat

• Hiển thị avatar

• Ô nhập liệu tự động thay đổi kích thước

• Gửi hình ảnh, video

• Tính năng "load more messages"

• ... và nhiều hơn nữa.

Bạn chỉ cần cung cấp dữ liệu tin nhắn theo một định dạng cụ thể, và GiftedChat sẽ lo phần còn lại.

Tích hợp cổng thanh toán (Ví dụ: VNPAY)

Tích hợp thanh toán là một yêu cầu phổ biến cho các ứng dụng thương mại điện tử hoặc dịch vụ. Để tích hợp một cổng thanh toán như VNPAY trong React Native , quy trình chung thường bao gồm các bước sau:

1. Cài đặt thư viện: Tìm và cài đặt thư viện hỗ trợ VNPAY cho React Native (nếu có) hoặc sử dụng WebView để hiển thị trang thanh toán của VNPAY.

2. Tạo yêu cầu thanh toán: Từ ứng dụng, bạn gửi thông tin đơn hàng (số tiền, mã đơn hàng,...) lên server của bạn.

3. Server tạo URL thanh toán: Server của bạn sẽ sử dụng SDK của VNPAY để tạo một URL thanh toán duy nhất và trả về cho ứng dụng.

4. Hiển thị trang thanh toán: Ứng dụng React Native mở URL này trong một WebView . Người dùng sẽ nhập thông tin thanh toán trên giao diện của VNPAY.

5. Xử lý kết quả: Sau khi người dùng hoàn tất thanh toán, VNPAY sẽ redirect về một URL trả về (return URL) mà bạn đã cấu hình. Ứng dụng sẽ lắng nghe sự thay đổi của URL trong WebView để biết giao dịch thành công hay thất bại và cập nhật giao diện tương ứng.

Chinh phục nhà tuyển dụng: Bộ câu hỏi phỏng vấn React Native thường gặp

Trang bị cho bạn những kiến thức và sự tự tin cần thiết trước buổi phỏng vấn. Bộ sưu tập các câu hỏi phỏng vấn react native này được phân loại rõ ràng từ kiến thức nền tảng, lý thuyết cốt lõi, cho đến các tình huống xử lý thực tế và các câu hỏi chuyên sâu về tối ưu hiệu năng, giúp bạn chuẩn bị một cách toàn diện nhất.

Nhóm câu hỏi về kiến thức cơ bản và lý thuyết

Đây là những câu hỏi để kiểm tra xem bạn có nắm vững các khái niệm nền tảng hay không.

1. React Native là gì? Nó hoạt động như thế nào?

   • Gợi ý trả lời: Nhấn mạnh nó là framework đa nền tảng, sử dụng JavaScript và React. Giải thích cơ chế Bridge, sự khác biệt giữa JS Thread và Native Thread.

2. So sánh React Native với Flutter và lập trình Native.

   • Gợi ý trả lời: Đề cập đến ngôn ngữ (JS vs Dart), kiến trúc (Bridge vs Skia), hiệu năng, và ưu/nhược điểm về thời gian/chi phí phát triển.

3. Sự khác biệt giữa ReactJS và React Native là gì?

   • Gợi ý trả lời: Tập trung vào mục đích sử dụng (web vs mobile) và các primitive components ( div / span vs View / Text ).

4. Props và State trong React Native khác nhau như thế nào?

   • Gợi ý trả lời: Props dùng để truyền dữ liệu từ cha xuống con, là bất biến (immutable). State là dữ liệu nội tại của component, có thể thay đổi và khi thay đổi sẽ kích hoạt re-render.

5. Flexbox trong React Native hoạt động như thế nào? Kể tên một vài thuộc tính quan trọng.

   • Gợi ý trả lời: Giải thích Flexbox là cơ chế layout chính. Các thuộc tính quan trọng: flexDirection (mặc định là column ), justifyContent , alignItems , flex .

6. Sự khác biệt giữa FlatList và ScrollView là gì? Khi nào nên dùng FlatList ?

   • Gợi ý trả lời: ScrollView render tất cả các phần tử con cùng một lúc, phù hợp cho danh sách ngắn. FlatList sử dụng cơ chế "lazy loading" (chỉ render các item hiển thị trên màn hình), giúp tối ưu bộ nhớ và hiệu năng cho danh sách dài.

Nhóm câu hỏi về xử lý tình huống và kinh nghiệm thực tế

Những câu hỏi này đánh giá khả năng giải quyết vấn đề và kinh nghiệm làm việc thực tế của bạn.

1. Bạn sẽ chọn Expo hay React Native CLI cho một dự án mới? Tại sao?

   • Gợi ý trả lời: Phân tích dựa trên yêu cầu dự án. Nếu dự án cần nhanh, đơn giản, không cần can thiệp native nhiều thì chọn Expo. Nếu dự án phức tạp, cần hiệu năng cao, tích hợp nhiều thư viện native thì chọn CLI.

2. Làm thế nào để quản lý trạng thái (state) cho một ứng dụng React Native lớn?

   • Gợi ý trả lời: Đề cập đến các giải pháp như Redux (Redux Toolkit), MobX, hoặc React Context. Giải thích ưu/nhược điểm của từng loại và tại sao bạn chọn một giải pháp cụ thể cho dự án lớn.

3. Bạn đã từng gặp vấn đề gì về hiệu năng trong React Native và đã giải quyết nó như thế nào?

   • Gợi ý trả lời: Nêu các ví dụ cụ thể như danh sách dài bị giật lag (giải quyết bằng cách tối ưu FlatList ), re-render không cần thiết (giải quyết bằng useMemo , useCallback , React.memo ), hoặc Bridge bị quá tải.

4. Làm thế nào để xử lý các phiên bản khác nhau của giao diện cho iOS và Android?

   • Gợi ý trả lời: Đề cập đến việc sử dụng Platform API ( Platform.OS === 'ios' ), tạo file riêng biệt (ví dụ MyComponent.ios.js và MyComponent.android.js ), hoặc sử dụng các thư viện UI cung cấp component cho cả hai nền tảng.

5. Mô tả quy trình debug một ứng dụng React Native của bạn.

   • Gợi ý trả lời: Nhắc đến các công cụ như Chrome DevTools, React Native Debugger, Flipper, và cách bạn sử dụng console.log để theo dõi luồng dữ liệu.

Nhóm câu hỏi về tối ưu hiệu năng và kiến trúc ứng dụng

Đây là những câu hỏi dành cho các vị trí Senior, kiểm tra kiến thức chuyên sâu.

1. Bridge trong React Native là gì và nó có những hạn chế nào? Kiến trúc mới (JSI - JavaScript Interface) cải thiện điều này như thế nào?

   • Gợi ý trả lời: Giải thích Bridge là bất đồng bộ và dựa trên việc serialize JSON, có thể gây tắc nghẽn. JSI cho phép JavaScript gọi trực tiếp các hàm native một cách đồng bộ, giảm độ trễ và tăng hiệu năng đáng kể.

2. Hermes là gì? Tại sao chúng ta nên sử dụng nó?

   • Gợi ý trả lời: Hermes là một JavaScript engine được tối ưu hóa cho React Native. Nó giúp giảm thời gian khởi động ứng dụng, giảm sử dụng bộ nhớ và giảm kích thước file APK.

3. useMemo và useCallback dùng để làm gì? Khi nào bạn sẽ sử dụng chúng?

   • Gợi ý trả lời: useMemo dùng để "memoize" (ghi nhớ) giá trị của một phép tính phức tạp. useCallback dùng để "memoize" một hàm. Cả hai đều giúp tránh việc tính toán lại hoặc tạo lại hàm không cần thiết trong mỗi lần re-render, từ đó tối ưu hiệu năng, đặc biệt khi truyền chúng xuống các component con được bọc bởi React.memo .

4. Code splitting trong React Native có thể thực hiện được không?

   • Gợi ý trả lời: Khác với web, code splitting truyền thống không áp dụng trực tiếp. Tuy nhiên, có thể sử dụng các kỹ thuật như "inline requires" để trì hoãn việc load các module cho đến khi chúng thực sự cần thiết, giúp cải thiện thời gian khởi động.

Tài liệu và các khóa học React Native chất lượng

Để giúp bạn trên con đường trở thành một lập trình viên React Native chuyên nghiệp, phần này cung cấp một danh sách chọn lọc các nguồn tài liệu chính thống, các cộng đồng uy tín nơi bạn có thể học hỏi và trao đổi, cùng với những gợi ý về các khóa học React Native online chất lượng, bao gồm cả lựa chọn miễn phí và trả phí.

Các nguồn tài liệu chính thống và cộng đồng uy tín

Đây là những nơi bạn nên ghé thăm đầu tiên để có được kiến thức chuẩn xác và cập nhật nhất.

• Trang tài liệu chính thức của React Native: Đây là nguồn tài liệu gốc và đáng tin cậy nhất. Mọi khái niệm, API, và hướng dẫn cài đặt đều được trình bày chi tiết và luôn được cập nhật theo phiên bản mới nhất. Hãy tập thói quen đọc tài liệu gốc, đây là kỹ năng quan trọng của một lập trình viên giỏi.

• Trang tài liệu của Expo: Nếu bạn chọn đi theo hướng Expo, đây là người bạn đồng hành không thể thiếu. Trang này cung cấp tài liệu chi tiết về Expo SDK, các công cụ dòng lệnh và quy trình làm việc với Expo.

• GitHub của React Native: Theo dõi kho mã nguồn chính thức trên GitHub giúp bạn nắm bắt được những thay đổi sắp tới, các vấn đề đang được thảo luận và đóng góp của cộng đồng.

• Cộng đồng Viblo: Viblo là một trong những cộng đồng chia sẻ kiến thức IT lớn nhất tại Việt Nam. Bạn có thể tìm thấy vô số bài viết, hướng dẫn react native, và các bài phân tích chuyên sâu về React Native từ các lập trình viên có kinh nghiệm.

• Các blog công nghệ nước ngoài: Các trang như Dev.to, Medium, LogRocket thường xuyên có những bài viết chất lượng cao về các kỹ thuật, thư viện mới và các case study thực tế về React Native.

Gợi ý các khóa học React Native online

Nếu bạn thích học theo lộ trình có cấu trúc và video hướng dẫn, các khóa học online là một lựa chọn tuyệt vời.

• Khóa học miễn phí:

  • Kênh YouTube của "The Net Ninja": Cung cấp các series hướng dẫn React Native rất trực quan và dễ hiểu, phù hợp cho người mới bắt đầu.

  • Kênh YouTube của "Code with Mosh": Mosh Hamedani có các video hướng dẫn React Native cơ bản với chất lượng cao.

  • Nền tảng F8 (Fullstack.edu.vn): Cung cấp các khóa học lập trình miễn phí bằng tiếng Việt, bao gồm cả ReactJS và React Native, với lộ trình bài bản và cộng đồng hỗ trợ mạnh mẽ.

• Khóa học trả phí (Chất lượng cao):

  • Các khóa học trên Udemy: Nền tảng này có rất nhiều khóa học React Native từ cơ bản đến nâng cao của các giảng viên nổi tiếng như Stephen Grider, Maximilian Schwarzmüller. Các khóa học này thường rất toàn diện, bao gồm nhiều dự án thực tế và được cập nhật thường xuyên. Hãy chờ các đợt giảm giá để có thể mua khóa học với chi phí hợp lý.

  • Các nền tảng chuyên sâu như Frontend Masters: Cung cấp các khóa học chuyên sâu về các khía cạnh nâng cao của React và React Native, giảng dạy bởi các chuyên gia hàng đầu trong ngành. Phù hợp khi bạn đã có nền tảng vững chắc và muốn nâng cao tay nghề.