Khởi tạo dự án React Native đầu tiên

Phần hướng dẫn ngay sau đây sẽ giúp bạn cài đặt và khởi tạo dự án React Native đầu tiên. Bạn có thể xây dựng ứng dụng React Native bằng Expo CLI hoặc React Native CLI.

Bắt đầu với React Native là với các công cụ Expo vì chúng cho phép bạn bắt đầu một dự án mà không cần cài đặt và định cấu hình Xcode hoặc Android Studio. Ngoài ra, bạn có thể bạn sẽ muốn sử dụng React Native CLI để phát triển ứng dụng.

Sau đây là phần hướng dẫn các bạn cơ bản hướng dẫn khởi tạo dự án React Native đầu tiên bằng cách sử dụng giao diện dòng lệnh Terminal.

Bước 1: Bây giờ bạn sẽ khởi tạo dự án React Native đầu tiên mới có tên “AwesomeProject”.

Khởi tạo dự án React Native đầu tiên

Bước 2: Tiếp theo hãy truy cập vào dự án vừa được tạo.

Khởi tạo dự án React Native đầu tiên

Tùy thuộc vào mỗi phiên bản React Native mà sẽ có cấu trúc thư mục có đôi chút phần khác nhau, phần hướng dẫn này sử dụng React Native 0.60. Sau đây là một số tập tin hoặc thư mục:

  • Thư mục android: chứa toàn bộ source build ứng dụng Android.
  • Thư mục ios: chứa toàn bộ source build ứng dụng IOS.
  • Thư mục node_modules: chứa toàn bộ các thư viện cần để chạy một ứng dụng react-native.
  • File package.js: file quản lý các package nodejs đi kèm với dự án.
  • File package-lock.js file được general sau khi chạy cài đặt npm install
  • File index.js: file đầu tiên được binding khi chạy ứng dụng. File này sẽ đăng ký một component, component này sẽ được load lên đầu tiên khi chạy, mặc định ứng dụng sẽ đăng ký component trong App.js
  • File app.json: file config tên ứng dụng và tên hiển thị.
  • File App.js là một component mặc định có sử dụng một số Component khác như Text, View…

Bước 3: Bây giờ bạn sẽ khởi chạy dự án có thể là trên máy ảo hoặc máy thật.

Dành cho Android:

Dành cho iOS:

Kết quả chạy ví dụ khởi tạo dự án React Native đầu tiên có thể như sau:

Khởi tạo dự án React Native đầu tiên

Lời kết: Như vậy thông qua nội dung bài viết hướng dẫn cài đặt React Native trên hệ điều hành Windows có thể giúp bạn cài đặt và cấu hình môi trường phát triển ứng dụng React Native trên Windows. Ngoài ra các bạn có thể xem thêm các phần hướng dẫn khác về lập trình React Native trong chuyên mục React Native.

Trương Dương

Bình luận