Chúng ta cùng tiếp tục với Bài 2: Cài đặt Expo CLI & tạo app đầu tiên. Bài viết này sẽ dẫn dắt bạn từng bước, từ cài đặt cho đến việc chạy thử một ứng dụng React Native đầu tiên.
Ở bài trước, bạn đã nắm được khái niệm React Native, sự khác biệt giữa Expo CLI và React Native CLI, và lý do tại sao chúng ta chọn đi theo hướng dùng Expo CLI trong giai đoạn khởi đầu.
Hôm nay, bạn sẽ chính thức bắt tay vào việc viết dòng code đầu tiên, và chạy app di động đầu tiên của chính bạn. Đây là một bước rất thú vị, bởi vì sau bao nhiêu lý thuyết, bạn sẽ được tận mắt thấy mọi thứ hoạt động thế nào.
Giới thiệu về Expo CLI
Expo CLI là một bộ công cụ giúp bạn:
- Khởi tạo dự án React Native chỉ với vài dòng lệnh.
- Dễ dàng chạy thử app trên điện thoại thật hoặc giả lập.
- Không cần cài Android Studio hay Xcode ban đầu.
- Cung cấp sẵn nhiều tính năng tiện lợi như: camera, định vị, push notification, lấy hình từ thư viện,…
Tất cả những điều này giúp bạn tập trung vào học và viết logic ứng dụng, chứ không phải vật lộn với việc cài môi trường phát triển như trước đây.
Cài đặt Node.js
Để cài Expo, trước hết bạn cần cài Node.js, vì nó là nền tảng chạy JavaScript bên ngoài trình duyệt.
Cách cài Node.js:
- Truy cập trang: https://nodejs.org
- Chọn bản LTS (Long-term Support) – đây là phiên bản ổn định.
- Tải về và cài đặt như các phần mềm thông thường.
Sau khi cài xong, bạn kiểm tra trong Terminal bằng lệnh:
node -v
npm -v
Nếu cả hai đều trả về phiên bản (ví dụ: v18.17.1, 9.6.7), nghĩa là bạn đã cài thành công.
Cài đặt Expo CLI
Sau khi có Node.js, bạn mở Terminal (macOS, Linux) hoặc Command Prompt / PowerShell (Windows), gõ lệnh:
npm install -g expo-cli
Lệnh này sẽ cài đặt expo-cli ở chế độ toàn cục (global), để bạn có thể dùng ở bất kỳ đâu.
Sau khi cài xong, bạn có thể kiểm tra bằng:
expo --version
Tạo dự án React Native đầu tiên
Giờ là lúc bạn tạo ra ứng dụng đầu tiên của mình.
Trong Terminal, bạn gõ:
expo init hello-react-native
Expo sẽ hỏi bạn chọn template. Bạn chọn:
- blank (loại JavaScript) – phù hợp cho người mới bắt đầu.
- Chờ khoảng 1–2 phút để Expo tải về các file cần thiết.
Sau khi tạo xong, bạn di chuyển vào thư mục dự án:
cd hello-react-native
Chạy thử ứng dụng
Trong thư mục dự án, gõ lệnh:
npx expo start
Ngay lập tức, một tab sẽ được mở trong trình duyệt, hiển thị một mã QR.
Cách xem app trên điện thoại:
- Tải app Expo Go từ App Store (iOS) hoặc CH Play (Android).
- Mở app Expo Go, quét mã QR đang hiển thị trên trình duyệt.
- Ứng dụng của bạn sẽ chạy trực tiếp trên điện thoại.
Bạn không cần build, không cần chờ lâu. Mọi thay đổi bạn viết trong code sẽ tự động cập nhật trên điện thoại.
Hiểu sơ qua mã nguồn
Mở file App.js trong thư mục dự án. Bạn sẽ thấy nội dung như sau:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hello React Native!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Đây là cấu trúc tối giản của một ứng dụng React Native. Trong những bài tiếp theo, mình sẽ phân tích kỹ hơn ý nghĩa của từng phần.
Ở đây, bạn chỉ cần hiểu: App() là nơi giao diện chính được vẽ ra, và bên trong return là những gì bạn thấy trên màn hình điện thoại.
Câu chuyện thực tế: viết app đầu tiên cho con gái
Một bạn học viên của mình – là một ông bố thích công nghệ – đã học React Native để viết một ứng dụng nhỏ nhắc giờ học, giờ đi ngủ cho con gái. Ứng dụng chỉ có 3 nút, mỗi nút là một lời nhắn như “đến giờ học rồi nhé”, “ngủ ngon nha”, “con nhớ đánh răng đấy”.
Anh ấy không phải lập trình viên chuyên nghiệp, nhưng chỉ sau một tuần học với Expo CLI, anh đã có app chạy trên điện thoại, dành riêng cho con mình. Mình kể câu chuyện này để bạn thấy: làm app không còn là chuyện của lập trình viên cao siêu nữa – bạn hoàn toàn có thể làm được.
Bài tập
Bài tập 1:
Cài đặt Node.js, sau đó cài Expo CLI, khởi tạo project tên hello-react-native, chạy ứng dụng trên điện thoại hoặc trình giả lập.
Bài tập 2:
Chỉnh sửa nội dung trong file App.js, thay đổi dòng Hello React Native! thành tên bạn và một câu chào ví dụ: Xin chào, tôi là Nam. Rất vui được học React Native!
Bài tập 3:
Tạo một thư mục có tên ReactNative-Learning để lưu tất cả project và ghi chú từ nay về sau. Tổ chức rõ ràng từ đầu sẽ giúp bạn học tốt hơn về sau.
Tổng kết
Trong bài học này, bạn đã:
- Cài đặt Node.js và Expo CLI
- Tạo được ứng dụng React Native đầu tiên
- Chạy ứng dụng trên điện thoại thật
- Hiểu sơ qua cấu trúc dự án React Native
Ở bài tiếp theo, chúng ta sẽ cùng mổ xẻ cấu trúc dự án, tìm hiểu ý nghĩa của từng thư mục, từng dòng mã, và bắt đầu bước vào thế giới giao diện thực sự.
Bạn đã hoàn thành một bước cực kỳ quan trọng – tự tay chạy một app đầu tiên. Việc còn lại chỉ là tiếp tục đi tiếp. Cứ chậm mà chắc, bạn sẽ giỏi hơn bạn tưởng.
Thảo luận