[React Native Cơ Bản] Bài 1 : Bắt đầu với React Native

Mở đầu : Seri học lập trình React Native cơ bản anh đã biết 8 bài cách đây khá lâu rồi, hiện tại React Native đã có nhiều thay đổi, cập nhật so với trước kia nên anh tiếp tục viết lại 8 bài khác, cập nhật các khái niệm, lý thuyết mới nhất ở thời điểm viết bài 30/12/2019. Các em cùng xem nhé

Hi các em trong bài viết này, anh hướng dẫn các em các bước thiết lập và cài đặt để tạo dự án đầu tiên với React native trên môi trường Windows

Để chuẩn bị cho bài học, chúng ta cần tải và cài đặt lần lượt các phần mềm sau :

Node js : https://nodejs.org/en/download/
Lưu ý : chọn đúng phiên bản windows của mình nhé. Cài đặt mặc định, tức là chỉ nhấn Next đến khi kết thúc.

Lưu ý : Sau khi cài đặt Nodejs thành công, các em khởi động lại máy, mở cmd, gõ thử “npm” nếu hiện như hình thì là các em đã cài đặt thành công rồi :

Còn nếu báo dòng not found npm thì cần thiết lập biến môi trường cho nodejs nhé. Lỗi này các em có thể tìm thấy cách thiết lập trên Google rất nhanh chóng thôi

Visual Studio Code : https://code.visualstudio.com/download
Lưu ý : là Code editor dùng để lập trình nhé, ngoài ra các em có thể dùng các phần mềm khác tương đương như Notepad ++ cũng đc nhưng nên dùng Visual Studio Code nhé, vì nó hỗ trợ nhiều plugin (tiện ích) khi lập trình

trong trường hợp chưa cài đặt được mà chúng ta muốn test ngay thì có thể sử dụng trang code online của SNACK EXPO để thử nhé. https://snack.expo.io/

Sau khi cài đặt xong các phần mềm trên, chúng ta cần cài đặt Android SDK, Android Emulator hoặc cần có thiết bị thật để chạy thử ứng dụng.

Như các em đã biết React Native được phát triển bởi Facebook. Ở thời điểm hiện tại, FB cung cấp 2 lựa chọn cho lập trình viên khi bắt đầu với React Native

  1. Nếu bạn mới học lập trình Mobile : Sử dụng công cụ EXPO của React Native để có thể tiếp cận, làm app 1 cách nhanh nhất
  2. Nếu bạn là lập trình viên Mobile đã có kn (Android, iOS) thì có thể sử dụng React Native ‘thuần’ – tức là ko thông qua công cụ EXPO mà chúng ta lập trình trên Xcode hoặc Android Studio.

Trong seri này, để tiếp cận nhanh chóng, chúng ta sẽ sử dụng Expo nhé.

Các bạn cũng đường lo lắng, khi chúng ta đã sử dụng Expo tốt, thì việc chuyển qua React Native ‘thuần’ cũng ko có vấn đề gì quá lớn.

Cài đặt expo

Mở cmd, nhập npm install -g expo-cli
Bước này cần mạng Internet ổn định mới chạy được nhé các em

Thành công :

Khởi tạo 1 dự án mới và chạy thử

Bước 1. Tạo 1 thư mục với đường dẫn, địa chỉ đúng cách (Ko bao gồm dấu cách, kí tự đặc biệt, tiếng việt …) và để tránh lỗi file not found sau này

Giữ shift + Mouse Right Click chọn như hình :

Nhập : expo init HelloWorld
Trong đó expo init là từ khóa tạo dự án, HelloWorld là tên của thư mục chứa dự án.
Kế tiếp, sử dụng phím mũi tên lên xuống, chọn mẫu dự án mong muốn. ở đây chúng ta chọn dòng đầu tiên là blank

Kết quả. chúng ta nhập tên của dự án từ bàn phím và bấm enter

Chờ ít phút để chương trình tải các file cần thiết về :
( Nếu mạng chậm là hơi lâu nhé )

Sau khi hoàn thành, nhập như thông báo trên máy các bạn để chạy dự án

Kết quả, Expo sẽ cung cấp 1 giao diện trên trình duyệt web để quản lý 1 số tác vụ cơ bản với dự án React native expo

Trong màn hình này có các chức năng sau :
Run on Android … : chạy chương trình trên 1 máy android ảo hoặc thật
Run on iOS … : chạy máy iOS (Mac only)
Send link .. : gửi link cài đặt qua mail
Publish or republish … : Đưa code lên trang EXPO và người dùng có thể tìm thấy trên app Expo và cài đặt. (Các em có thể cái app expo từ CH Play hoặc Apple Store nhé)

Cuối cùng là QR Code dùng để quét và cài app trực tiếp trên điện thoại thật.

Kết quả :

Như vậy, trong bài anh đã hướng dẫn các em cách chạy thử 1 dự án với Expo. Trong bài tiếp theo chúng ta sẽ học cách mở dự án và lập trình thử với Visual Studio Code nhé 🙂

Bài gốc : https://facebook.github.io/react-native/docs/getting-started