Giới thiệu

Học React Native không chỉ là việc nắm vững lý thuyết mà còn cần có sự chuẩn bị kỹ lưỡng về mặt công cụ và môi trường phát triển. Trong bài viết này, chúng ta sẽ khám phá các bước cần thiết để cài đặt và cấu hình các công cụ cần thiết cũng như khởi tạo dự án React Native.

Nội dung chính

1. Cài đặt Node.js
2. Cài đặt Android Studio (Tùy chọn)
3. Cài đặt React Native với Expo CLI
4. Khởi tạo dự án React Native
5. Danh sách các tiện ích mở rộng cần thiết cho VS Code
6. Thực hành tốt
7. Các cạm bẫy phổ biến
8. Mẹo hiệu suất
9. Khắc phục sự cố
10. Câu hỏi thường gặp

Cài đặt Node.js

Bước đầu tiên và quan trọng nhất là cài đặt Node.js. Đây là môi trường chạy cho JavaScript bên ngoài trình duyệt. Bạn nên cài đặt phiên bản 18.20.6. Hãy truy cập link download và tìm phiên bản có đuôi .msi để cài đặt.

Sau khi cài đặt, bạn kiểm tra phiên bản Node.js bằng cách mở Command Prompt và nhập lệnh sau:

node -v

Nếu Node.js được cài đặt thành công, bạn sẽ thấy phiên bản được hiển thị.

Cài đặt Android Studio (Tùy chọn)

Mặc dù không bắt buộc, việc cài đặt Android Studio có thể hữu ích cho việc tạo emulator giúp bạn xem ứng dụng trên thiết bị ảo. Tuy nhiên, do kích thước lớn của ứng dụng, bạn có thể bỏ qua bước này nếu không cần thiết.

Cài đặt React Native với Expo CLI

Để cài đặt React Native, bạn có thể sử dụng Expo CLI, một công cụ giúp đơn giản hóa quá trình phát triển. Chạy lệnh sau trong Command Prompt hoặc PowerShell:

npm install -g expo-cli

Nếu lệnh này chạy thành công, bạn sẽ thấy thông tin xác nhận trên màn hình. Để kiểm tra xem Expo CLI đã được cài đặt đúng hay chưa, bạn có thể sử dụng lệnh:

expo --version

Khởi tạo dự án React Native

Bây giờ, hãy tạo một thư mục cho dự án của bạn. Ví dụ: thư mục có tên Kuliah. Mở thư mục này trong Visual Studio Code (VS Code).

Tiếp theo, mở terminal trong VS Code và chạy lệnh sau để tạo dự án React Native:

npx create-expo-app MyApp

Sau khi lệnh này chạy thành công, bạn sẽ thấy các thông tin liên quan đến quá trình tạo dự án. Để chuyển vào thư mục dự án vừa tạo, hãy chạy:

cd MyApp

Để chạy ứng dụng trên trình duyệt (không cần thiết bị di động), sử dụng lệnh:

npm run web

Hoặc để chạy ứng dụng trên thiết bị di động, cài đặt ứng dụng Expo Go trên điện thoại Android/iOS và quét mã QR Code xuất hiện trong terminal bằng ứng dụng đó.

Danh sách các tiện ích mở rộng cần thiết cho VS Code

1. React Native Tools: Cung cấp hỗ trợ cho React Native, giúp debug và phát triển hiệu quả hơn.
2. Prettier - Code formatter: Tiện ích giúp tự động định dạng mã nguồn, giúp mã dễ đọc hơn.
3. ESLint: Giúp kiểm tra và sửa lỗi mã JavaScript, đảm bảo chất lượng mã.

Thực hành tốt

• Luôn cập nhật phiên bản mới nhất của các công cụ và thư viện.
• Tổ chức mã nguồn rõ ràng, dễ hiểu.
• Sử dụng hệ thống kiểm soát phiên bản (như Git) để theo dõi thay đổi.

Các cạm bẫy phổ biến

• Không cập nhật các gói thư viện: Thường xuyên kiểm tra và cập nhật để tránh các lỗi bảo mật.
• Thiếu cấu hình môi trường: Đảm bảo rằng môi trường phát triển giống như môi trường sản xuất.

Mẹo hiệu suất

• Sử dụng FlatList thay vì ScrollView cho danh sách lớn để cải thiện hiệu suất.
• Tối ưu hóa ảnh và tài nguyên để giảm thời gian tải.

Khắc phục sự cố

• Nếu bạn gặp lỗi khi chạy ứng dụng, hãy kiểm tra lại các phiên bản của Node.js và Expo CLI.
• Đảm bảo rằng bạn đã cài đặt tất cả các gói cần thiết.

Câu hỏi thường gặp

1. Tôi có cần cài đặt Android Studio không?

• Không, bạn có thể phát triển ứng dụng React Native chỉ với Expo CLI mà không cần Android Studio.

2. Làm thế nào để kiểm tra xem Expo CLI đã được cài đặt thành công không?

• Bạn có thể chạy lệnh expo --version để kiểm tra.

3. Tôi có thể chạy ứng dụng trên thiết bị nào?

• Bạn có thể chạy trên cả Android và iOS bằng cách sử dụng ứng dụng Expo Go.