Nếu bạn từng hỏi các lập trình viên Mobile thế hệ trước về kỷ niệm ngày đầu tiên học nghề, 90% sẽ kể cho bạn nghe về một "tấn bi kịch" mang tên: Cài đặt môi trường.
Tải Android Studio nặng hàng chục GB, cấu hình máy ảo giật lag, thiết lập biến môi trường (Environment Variables) rắc rối, và rồi nhận lại một màn hình đỏ chót báo lỗi ngay lần chạy đầu tiên. Rất nhiều người đã bỏ cuộc trước khi kịp viết dòng code nào.
Nhưng hôm nay, bạn đang sống trong kỷ nguyên của Expo. Trong bài viết này, chúng ta sẽ bỏ qua toàn bộ những cơn ác mộng đó. Chỉ với khoảng 15 phút, bạn sẽ tận mắt thấy ứng dụng của mình chạy mượt mà trên chính chiếc điện thoại bạn đang cầm trên tay.
1. Trải nghiệm lập trình không cần cài đặt với Expo Snack
Trước khi bắt tay vào cài đặt bất cứ thứ gì lên máy tính, tôi muốn giới thiệu cho bạn một "vũ khí bí mật" của cộng đồng React Native: Expo Snack.
Hãy tưởng tượng Expo Snack giống như Google Docs nhưng dành cho lập trình viên. Nó là một môi trường phát triển trực tuyến ngay trên trình duyệt web.
- Cách thử ngay: Bạn chỉ cần truy cập vào trang snack.expo.dev.
- Điều kỳ diệu: Bạn có thể gõ code ở khung bên trái và ngay lập tức thấy giao diện ứng dụng cập nhật ở khung giả lập bên phải (hỗ trợ cả giao diện iOS, Android và Web).
Khi nào nên dùng Expo Snack? Snack không sinh ra để làm các dự án lớn. Nó hoàn hảo khi bạn muốn thử nghiệm nhanh một ý tưởng, kiểm tra một đoạn code lỗi, hoặc chia sẻ mã nguồn cho người khác xem chỉ bằng một đường link.
Còn để làm một ứng dụng hoàn chỉnh, chúng ta cần thiết lập môi trường trên máy tính cá nhân. Đừng lo, nó cực kỳ đơn giản.
2. Chuẩn bị "đồ nghề" dành cho Windows & macOS
Để bắt đầu, máy tính của bạn chỉ cần đúng 2 phần mềm cơ bản. Dù bạn dùng Windows hay macOS, các bước đều giống hệt nhau:
Cài đặt Node.js
Node.js là môi trường chạy JavaScript trên máy tính, và React Native cần nó để hoạt động.
- Truy cập trang chủ nodejs.org.
- Tải phiên bản có chữ LTS (Long Term Support). Đây là phiên bản ổn định nhất và ít lỗi vặt.
- Chạy file cài đặt và cứ bấm "Next" cho đến khi hoàn tất.
Mẹo kiểm tra: Mở Terminal (trên macOS) hoặc Command Prompt/PowerShell (trên Windows), gõ lệnh node -v. Nếu màn hình hiện ra các con số (ví dụ: v20.11.0), chúc mừng bạn đã cài đặt thành công!
Cài đặt Visual Studio Code (VS Code)
Đây là trình soạn thảo mã nguồn (Code Editor) quốc dân, miễn phí và tốt nhất hiện nay cho React Native.
- Tải và cài đặt tại code.visualstudio.com.
- Extensions khuyên dùng: Bạn nên cài thêm các tiện ích mở rộng như ESLint (kiểm tra lỗi code), Prettier - Code formatter (làm đẹp code tự động), và React Native Tools để hỗ trợ code nhanh hơn.
3. Expo Go: Cây cầu nối giữa Code và Thiết bị thật
Thay vì phải cài đặt những trình giả lập (Emulator/Simulator) nặng nề làm chậm máy tính, chúng ta sẽ dùng chính chiếc điện thoại của bạn để chạy ứng dụng.
Hãy mở điện thoại (iPhone hoặc Android) lên, vào App Store hoặc Google Play, tìm kiếm từ khóa Expo Go và tải ứng dụng này về.
Expo Go hoạt động như một cái vỏ bọc. Khi bạn viết code trên máy tính, máy tính sẽ đẩy đoạn code đó qua mạng Wi-Fi vào ứng dụng Expo Go trên điện thoại, và Expo Go sẽ "dịch" nó thành giao diện ứng dụng tức thì.
4. Khởi tạo dự án đầu tiên
Máy tính đã sẵn sàng, điện thoại đã cài Expo Go. Giờ là lúc tạo dự án!
- Mở Terminal hoặc Command Prompt trên máy tính của bạn.
- Dùng lệnh
cdđể đi tới thư mục bạn muốn lưu dự án (ví dụ:cd Desktop). - Gõ dòng lệnh "thần thánh" sau và nhấn Enter:
npx create-expo-app@latest my-first-app
Trong đó my-first-app là tên thư mục dự án của bạn. Lệnh này sẽ tự động tải về cấu trúc thư mục chuẩn nhất của Expo mới nhất, cài đặt sẵn toàn bộ các thư viện cần thiết. Bạn chỉ việc pha một tách cà phê, ngồi đợi khoảng 1-2 phút cho Terminal chạy xong.
5. Chạy ứng dụng và trải nghiệm Fast Refresh
Bước cuối cùng và cũng là bước thú vị nhất.
- Di chuyển vào thư mục dự án vừa tạo:
cd my-first-app - Khởi động server của Expo:
npx expo start - Lúc này, trên màn hình máy tính (Terminal) sẽ hiện ra một mã QR lớn.
- Nếu bạn dùng iPhone: Mở ứng dụng Camera mặc định lên, quét mã QR đó và bấm vào thông báo mở bằng Expo Go.
- Nếu bạn dùng Android: Mở ứng dụng Expo Go vừa tải, chọn nút "Scan QR Code" và quét mã trên màn hình.
BÙM! Ứng dụng đầu tiên của bạn đã hiển thị trên màn hình điện thoại.
"Phép màu" mang tên Fast Refresh
Bây giờ, hãy mở thư mục my-first-app bằng VS Code. Tìm và mở file App.js (hoặc app/index.tsx nếu bạn dùng kiến trúc mới).
Bạn sẽ thấy một đoạn code chứa dòng chữ quen thuộc. Hãy thử đổi dòng chữ đó thành:
"Hello world, I'm mastering React Native!"
Nhấn Lưu (Ctrl + S hoặc Cmd + S). Ngay khi bạn vừa nhấn lưu, hãy nhìn vào điện thoại của bạn. Giao diện thay đổi ngay lập tức mà không cần phải biên dịch lại ứng dụng, cũng không mất trạng thái đang chạy. Tính năng này gọi là Fast Refresh, và nó sẽ là trợ thủ đắc lực giúp bạn tăng tốc độ làm việc lên gấp hàng chục lần!
Kết luận: Môi trường không còn là rào cản
Bạn thấy đấy, không có Xcode, không có Android Studio, không có những cấu hình rắc rối. Với Node.js, VS Code và Expo Go, bạn đã hoàn tất việc thiết lập môi trường lập trình React Native siêu tốc độ.
Bây giờ bạn đã có một "phòng thí nghiệm" hoàn hảo. Trong bài tiếp theo, chúng ta sẽ mổ xẻ xem bên trong dự án vừa tạo có những gì, luồng chạy bắt đầu từ đâu, và tại sao nó lại hoạt động được.
