Không có gì tốt hơn việc xây dựng ứng dụng bằng JavaScript. Trừ khi bạn đang xây dựng ứng dụng dành cho thiết bị di động. JavaScript dành cho việc xây dựng các ứng dụng web và sử dụng nó để xây dựng ứng dụng dành cho thiết bị di động gốc mà trước đây không thể thực hiện được. Thật khó cho bất kỳ nhà phát triển web nào để đi sâu vào việc xây dựng các ứng dụng di động gốc. Họ phải học Java, hoặc Objective-C… hoặc bất kỳ ngôn ngữ lập trình nào được sử dụng cho mục đích này.
Đó là, cho đến khi Facebook’s React Native phá vỡ rào cản này. React Native đi kèm với những lợi thế lớn như xây dựng ứng dụng đa nền tảng cho cả Android và IOS. Trước React Native, bạn phải viết mã của mình hai lần - một cho Android và một cho IOS. Đó không còn là trường hợp nữa.
Bài viết này là phần giới thiệu về thế giới của React Native, vậy hãy sẵn sàng chưa?.
Tại sao nên sử dụng React Native?
Đúng vậy, vậy tại sao lại là React native mà không phải bất kỳ công nghệ nào khác?
Nó cung cấp cho chúng tôi nhiều giải pháp mà các công nghệ khác không thể có được. Đây là những gì bạn có thể làm với React Native:
Xây dựng ứng dụng dành cho thiết bị di động gốc
React Native cho phép chúng tôi viết các ứng dụng gốc bằng JavaScript cho cả iOS và Android. Nó cung cấp cho chúng tôi khả năng sử dụng tất cả các thành phần gốc như cử chỉ, thông báo đẩy, camera và vị trí. Có một số thư viện JavaScript khác để xây dựng các ứng dụng di động như ionic hoặc PhoneGap. Nhưng các thư viện đó sử dụng Webview và các ứng dụng được xây dựng bằng các công nghệ đó không phải là bản gốc.
Xây dựng ứng dụng di động đa nền tảng (iOS và Android)
Vâng, với React Native, bạn có thể tạo các ứng dụng di động có thể chạy trên iOS và Android. Đây là một trong những lợi ích tuyệt vời của React Native. Trước khi Facebook tạo ra nó, bạn phải xây dựng ứng dụng của mình hai lần và với các mã khác nhau:một cho iOS sử dụng Swift hoặc Objective-C và một cho Android sử dụng Java hoặc Kotlin. React Native đã giải quyết vấn đề này để bạn có thể xây dựng ứng dụng React Native của mình và nó sẽ hoạt động trên iOS và Android. Đáng kinh ngạc! ?
Viết tất cả mã của bạn bằng JavaScript và React
Trong khi bạn đang xây dựng các ứng dụng React Native, bạn sẽ thực sự viết JavaScript. Mã Reactjs cho phép chúng tôi xây dựng các thành phần giao diện người dùng và trải nghiệm người dùng tuyệt vời.
Bắt đầu với react-native
Bắt đầu với react-native có thể thú vị nhưng đồng thời cũng có thể hơi khó hiểu. Bước đầu tiên là cài đặt nó và có một số cách để thực hiện:
Sử dụng expo-cli:
expo-cli là một công cụ dòng lệnh. Nó tải xuống và cài đặt trình soạn thảo React Native cho bạn, được tích hợp với API hội chợ (xem hướng dẫn cài đặt tại đây). Đây là một cách dễ dàng để tạo một ứng dụng React Native và đó là cách được khuyến nghị nếu bạn mới bắt đầu với React Native.
expo-cli cung cấp cho bạn nhiều lựa chọn. Bạn có thể chạy và kiểm tra ứng dụng của mình trên thiết bị di động mà không cần bất kỳ cấu hình nào. Quét mã QR và ứng dụng của bạn sẽ mở ra với ứng dụng di động hội chợ. Bạn có thể khám phá các ứng dụng di động khác được xây dựng bằng React Native trên trình duyệt qua giao diện web được gọi là apperfying!
Sử dụng react-native-cli
React-native-cli thực hiện công việc tương tự như expo-cli, nhưng với một cách tiếp cận khác và có thêm lợi thế. Các ứng dụng được cài đặt với react-native-cli cung cấp cho chúng tôi tùy chọn và khả năng tạo các mô-đun gốc của riêng chúng tôi trong ứng dụng của chúng tôi. Bạn không cần phải loại bỏ ứng dụng của mình để có thể tạo các mô-đun gốc. Việc loại bỏ giúp bạn có thể sử dụng các mô-đun gốc và viết do bạn sở hữu ( chúng ta sẽ khám phá cách viết các mô-đun gốc trong một phần khác ).
Việc phát triển các ứng dụng React Native trên các nền tảng khác nhau là một quá trình khác nhau. Đôi khi chúng tôi cần một số cấu hình cụ thể cho một nền tảng cụ thể. Ví dụ:để xây dựng cho Android, bạn cần sử dụng Android SDK, vì vậy hãy cùng khám phá cách hoạt động của điều này!
Xây dựng ứng dụng di động cho Android
Có một số yêu cầu bạn cần cài đặt để bắt đầu phát triển cho Android. Trước tiên, bạn phải tải xuống và định cấu hình cả Android SDK và Android Studio. Bạn có thể tải chúng xuống bằng liên kết này tại đây.
Sau khi tải xuống Android Studio, bạn cũng cần cài đặt một số API. Để làm điều đó, hãy mở Android Studio, sau đó nhấp vào tab cài đặt, cửa sổ này sẽ mở ra:
Trước tiên, hãy kiểm tra ✔️ nền tảng bạn muốn bản gốc phản ứng của mình hỗ trợ trong tab Nền tảng SDK (ví dụ:Android 6.0 Marshmallow). Sau đó, chuyển sang các công cụ SDK.
Và kiểm tra Android SDK Build-Tools , Android SDK tools và google play service . Trong Công cụ xây dựng SDK Android, hãy chọn tất cả các nền tảng:
- Bắt đầu từ 19.0.0 đến 20.0.0
- Từ 22.0.0 đến 24.0.0
- Và 25.0.2, 26.0.1 đến 26.0.3
- 27.0.3 và 28.0.1 đến 28.02
Bây giờ chúng ta đã hoàn tất với SDK và Android Studio. Bước tiếp theo là trình giả lập. Trình giả lập (hoặc trình giả lập) là nơi chúng ta phải chạy và thử nghiệm ứng dụng của mình. Có nhiều sự lựa chọn khác nhau.
Bạn có thể sử dụng trình giả lập Android Studio. Bạn xem tại đây cách tạo trình giả lập để sử dụng trên Android Studio. Thành thật mà nói tôi chưa bao giờ sử dụng chúng. Thay vào đó, tôi thích Genymotion hoặc một thiết bị thực.
Genymotion
Genymotion là ứng dụng dành cho máy tính để bàn cung cấp trình giả lập ảo để kiểm tra ứng dụng của bạn. Tôi thích sử dụng nó nhiều vì nó nhanh. ? Nó cung cấp cho bạn các tùy chọn để tạo ra một chiếc điện thoại tùy chỉnh với các tính năng mà bạn có thể tìm thấy trong bất kỳ thiết bị thực nào. Ví dụ:bật Wifi, Vị trí và Máy ảnh. Tôi thực sự khuyên bạn nên sử dụng Genymotion trên trình giả lập Android Studio hoặc bất kỳ trình giả lập nào khác.
Sử dụng thiết bị thực
Không gì tốt hơn khi sử dụng các thiết bị thực để chạy và thử nghiệm ứng dụng của bạn. Điều này là do nó cho phép bạn biết ứng dụng của bạn trông như thế nào trên một thiết bị thực. Nó làm cho bạn cảm thấy thực tế công việc của mình theo cách mà thiết bị ảo không cung cấp. Vì vậy, nếu bạn có khả năng sử dụng một thiết bị, đừng ngần ngại.
Cho đến thời điểm này, chúng tôi thấy ổn với Android - nhưng còn iOS thì sao?
Tạo ứng dụng react-native cho IOS
Chạy React Native cho iOS trông không khác nhiều so với Android. Ứng dụng React Native chạy trên Android cũng có thể chạy trên iOS, với một số ngoại lệ.
Ví dụ:nếu bạn muốn chạy trên thiết bị iOS, bạn cần phải có hệ điều hành MacOS. Nói về MacOS và iOS, bạn không cần tải thêm bất kỳ phần phụ thuộc nào như SDK cho Android để chạy React Native trên iOS.
Về Trình giả lập, Xcode có các trình giả lập đẹp mắt mà bạn có thể sử dụng để kiểm tra ứng dụng React Native của mình. Bạn có thể kiểm tra bài đăng này để biết một số thủ thuật sử dụng với Trình giả lập.
Trong MacOS, bạn có thể chạy cả iOS và Android. Bạn chắc chắn có thể cài đặt Android Studio và Genymotion trên MacOS. Khả năng này không tồn tại trên PC nơi bạn chỉ có thể chạy trình mô phỏng Android chứ không thể chạy trình mô phỏng iOS. Vậy bạn là người may mắn? Nếu bạn có MacOS - hãy tận hưởng?.
Vì vậy, bây giờ chúng tôi có môi trường để xây dựng một ứng dụng React Native và chúng tôi đã cài đặt mọi thứ, nhưng mã React Native được viết như thế nào? Nó rất đơn giản:bạn thực sự sẽ viết mã Reactjs.
Bạn có thể xem hướng dẫn chính thức để thực hành với React Native. Tôi khuyên bạn nên bắt đầu bài viết tuyệt vời này để bắt đầu “React Native YouTube Replica”. Nó sẽ hướng dẫn bạn từng bước để tạo ứng dụng React Native đầu tiên của bạn.
Ồ! Cho đến bây giờ, bạn vẫn ổn và bạn đang viết mã với react-native. ? Nhưng bạn cần kiểm tra và gỡ lỗi và xem nhật ký mã của bạn. Y eah các bản ghi !! Vì vậy, chúng ta cần một d ebugger! Làm cách nào để gỡ lỗi với React Native?
Gỡ lỗi react-native
Gỡ lỗi mã của bạn là rất quan trọng, không chỉ với React Native mà với bất kỳ ngôn ngữ lập trình nào khác. Vì vậy, trong mã React Native, bạn cần biết điều gì đang xảy ra. Có nhiều cách khác nhau để gỡ lỗi ứng dụng React Native như:
Gỡ lỗi bằng Chrome devtools
React Native cung cấp cho bạn tùy chọn sử dụng các công cụ phát triển của Chrome để xem nhật ký ứng dụng của bạn. Để gỡ lỗi bằng Chrome và bật chế độ gỡ lỗi trong trình mô phỏng của bạn, trên bàn phím, chỉ cần nhấp vào Ctrl+ m .
Màn hình này sẽ bật lên:
Và sau đó chọn Debug Js Remotely . Thao tác này sẽ mở một tab trong Google Chrome với địa chỉ này https://localhost:8081/debugger-ui/ . Đó là để sử dụng công cụ phát triển của Chrome, còn các tùy chọn khác thì sao?
Sử dụng React-native-debugger
React-native-debugger là một công cụ tuyệt vời để gỡ lỗi mã React Native. Đây là một ứng dụng dành cho máy tính để bàn mang lại cho bạn nhiều lợi thế. Nó đi kèm với Redux devtools và tích hợp React-devtools. Bạn cũng có thể gỡ lỗi kiểu. Nó thực sự là trình gỡ lỗi tốt nhất cho React Native và đó là trình tôi sử dụng. Thông thường, nó có sẵn trên MacOS, Windows và Linux. Xem hướng dẫn cài đặt và tích hợp.
Tôi nghĩ rằng nó là đủ vào thời điểm này. Đây là phần đầu tiên của hướng dẫn tuyệt đối để xây dựng ứng dụng di động với React Native. Trong phần tiếp theo, chúng ta sẽ đi sâu vào các mẹo và vấn đề kỹ thuật hơn như cách chúng ta có thể sử dụng các thành phần gốc, API gốc của React, tích hợp với các thư viện khác, Redux, GraphQL và những thứ tương tự. Vì vậy, hãy đăng ký vào danh sách thư này để được theo dõi khi phần tiếp theo ra mắt. Cảm ơn bạn đã dành thời gian. ?
Bạn luôn có thể tìm thấy tôi trên Twitter?