React Native là 1 framework phát triển ứng dụng di động do Facebook phát hành. Chỉ với 1 bộ source code viết bằng javascript, bạn có thể build ra ứng dụng cho cả 2 nền tảng iOS và Android rất dễ dàng. Không giống các ứng dụng đa nền tảng khác như web hay hybrid, React Native vẫn sử dụng cốt lõi là các module native của iOS và Android. Từ đó hiệu năng của ứng dụng viết bằng React Native là hoàn toàn vượt trội.
Cộng đồng React Native cũng đang ngày 1 phát triển và nhu cầu tuyển dụng cũng ngày 1 tăng lên. Tương lai của React Native rất là sáng sủa bởi nó được phát triển và hậu thuẫn bởi ông lớn Facebook. Vì vậy nếu bạn có kiến thức về React native thì sẽ là 1 lợi thế rất lớn. Hãy cũng mình tìm hiểu về framework thú vị này trong loại bài tutorial hướng dẫn React Native.
[toc]
Cài đặt React Native
Cài đặt NodeJS
Việc đầu tiên ta phải làm là cài đặt Node để có được trình quản lý package npm. Trong quá trình phát triển ứng dụng React Native ta sẽ phải sử dụng rất nhiều đến giao diện cosole. Bởi vậy nên cài đặt Node là điều bắt buộc.
Các bạn vào đây để download Node JS. Lưu ý: Hiện tại React Native mới chỉ làm việc trơn tru với phiên bản npm 4. Đối với npm version 5 trở lên, hoạt động vẫn chưa được ổn định. Bởi vậy mình khuyến cáo nên tải bản NodeJS chứa npm phiên bản 4:
Cài đặt React Native
Sau khi cài xong NodeJS, ta tiếp tục cài đặt React Native. Đầu tiên hãy cài đặt CLI của React Native (Command Line Interface). Đây là trình hỗ trợ dòng lệnh console của React Native. Bạn mở console lên và cài đặt CLI sử dụng câu lệnh:
npm install -g react-native-cli
Chờ 1 lúc cho tiến trình chạy xong. Tiếp theo ta cài đặt React Native:
npm install -g create-react-native-app
Như vậy là xong, ta đã hoàn thành xong việc cài đặt React Native.
Cài đặt môi trường phát triển Android
Bạn cần biết rằng, bản chất của React Native là sử dụng javascript chọc xuống dưới nền tảng native (Android, iOS) để sử dụng các nền tảng đó. Javascript chỉ là lớp bề mặt, phần nổi của ứng dụng, nó chỉ có vai trò gọi và sử dụng các thành phần native. Vì vậy để phát triển ứng dụng, bạn vẫn cần phải cài đặt môi trường phát triển. Đối với Android bạn cần:
- Cài đặt JDK.
- Cài đặt Android Studio.
- Thêm biến môi trường JAVA và ANDROID_HOME: là địa chỉ thư mục jdk và android sdk của bạn.
- Thêm biến môi trường adb: là địa chỉ file adb.exe chứa trong Android SDK.
Cài đặt môi trường phát triển iOS
Tương tự như Android, nếu muốn React Native build ra 1 ứng dụng iOS, bạn cần:
- Cài đặt MacOS (hoặc mua Macbook), miễn sao bạn có MacOS.
- Cài đặt XCode.
Như vậy là mình đã hướng dẫn xong phần cài đặt môi trường để phát triển ứng dụng bằng React Native. Tiếp theo, hãy viết ứng dụng đầu tiên.
Sử dụng IDE nào để phát triển React Native
Để code React Native, ta có thể dùng rất nhiều IDE. Tùy sở thích của từng người sẽ chọn ra cho mình 1 IDE để làm việc. Bởi vì cốt lõi của việc phát triển React Native vẫn là native, nên khi bạn đã cấu hình xong môi trường phát triển (Android, iOS) thì việc bạn dùng trình soạn thảo code nào cũng đều OK. Thậm chí bạn có thể dùng Notepad hãy TextEditor để code cũng không vấn đề gì.
Tuy nhiên, mình xin đưa ra 1 vài IDE hữu ích hơn để bạn tham khảo:
Tham khảo cách cấu hình để code React Native cũng như sử dụng từng loại IDE trên ở đây:
https://www.icicletech.com/blog/top-10-editors-for-react-native
Cá nhân mình thì mình dùng Sublime Text cho nhẹ và phù hợp với sở thích.
Ứng dụng React Native đầu tiên
Các bạn tạo 1 project React Native bằng câu lệnh:
react-native init reactTutorialApp
Tiếp theo di chuyển đến thư mục project đã tạo:
cd reactTutorialApp
Như vậy là bạn đang đứng trong thư mục project và sẵn sàng cho việc build ứng dụng. Bạn hãy chạy sẵn 1 máy ảo. Mình sử dụng máy ảo Android mặc định được cung cấp bởi AVD. Sau khi khởi động máy ảo, hãy thử build project bằng câu lệnh:
react-native run-android
Và chờ đợi quá trình build và xem kết quả:
Ok, vậy là ta đã build xong ứng dụng React Native đầu tiên. Khá đơn giản đúng không.
Khái niệm đầu tiên, Component
Sau khi đã chạy thành công project, ta thấy ứng dụng mặc định này đơn giản chỉ hiển thị vài dòng Text lên màn hình. Giờ mình sẽ thay đổi nội dung của chúng xem sao.
Hãy mở IDE của bạn và trỏ thư mục làm việc tới thư mục project. Trong Sublime Text thì nó sẽ thế này:
Tiếp theo hãy chọn file App.js. Mặc định, đây sẽ là file được cấu hình để chạy đầu tiên khi khởi động app. Hãy bỏ qua mọi thứ râu ria và chú ý vào phần khai báo class App:
export default class App extends Component<Props>
Nội dung của class này sẽ quyết định cái gì sẽ được hiển thị lên màn hình ứng dụng.
Ta thấy class App kế thừa Component. Khi bạn code React native, bạn sẽ làm việc với Component rất rất nhiều. Bởi lẽ tất cả những thứ được hiển thị lên trên app đều được kế thừa từ Component. Hay nói cách khác, Component là class đại diện cho các thành phần giao diện. Nó cũng giống như View ở bên Android hay iOS vậy.
Tiếp theo, hãy để ý trong class App có 1 hàm render(). Hàm này sẽ định nghĩa các thành phần hiển thị lên giao diện ứng dụng. Trong mọi class kế thừa từ Component, ta đều phải khai báo hàm này. Các bạn có thể thấy thân hàm render() có nội dung khá giống với 1 cấu trúc HTML. render() trả về 1 đối tượng View chứa 3 đối tượng Text bên trong. View và Text đều được khai báo thông qua các thẻ. View và Text đều kế thừa từ Component.
Ta thấy trong thân của các thẻ Text đều được định nghĩa nội dung hiển thị. Ta sẽ thay đổi nội dung của chúng, ví dụ như sau:
render() {
let imageSource = {uri:"http://photos.wikimapia.org/p/00/03/16/67/72_full.jpg"};
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Seri Hướng dẫn React Native
</Text>
<Text style={styles.instructions}>
Xin chào mọi người
</Text>
<Text style={styles.instructions}>
Tôi là Dương Vũ
</Text>
</View>
);
}
Sau đó build lại ứng dụng bằng câu lệnh:
react-native run-android
Kết quả:
Tóm lại, các bạn chỉ cần nhớ rằng, mọi giao diện hiển thị trên app đều kế thừa Component.
Component là 1 lớp chứa hàm render() để khai báo các thành phần giao diện. Trong hàm render này, các giao diện (hay còn gọi là Component) được khai báo qua các thẻ có cấu trúc giống HTML.
Chế độ Hot Reloading
Như các bạn thấy ở phần trên, mỗi khi ta có chỉnh sửa gì đó trong code, ta lại phải build lại ứng dụng qua dòng lệnh. Như vậy thì rất là bất tiện. Nhận thấy điều đó, React Native đã hỗ trợ cho chúng ta chức năng Hot Reloading. Tức là mỗi khi bạn thay đổi và save code, thì lập tức ứng dụng sẽ được load lại một cách tự động.
Enable Hot Reloading trên Android
Để bật tính năng này trên android, bạn build app lên máy rồi gõ dòng lệnh trong console:
adb shell input keyevent 82
Lập tức, 1 developer menu hiện lên, bạn hãy chọn Enable Hot Reloading và Enable Live Reloading.
Enable Hot Reloading trên iOS
Đối với iOS, bạn cũng build app rồi ấn Cmd + D để hiển thị menu developer. Rồi chọn Enable Live Reload:
Sau khi đã bật tính năng này thì mỗi khi các bạn save code, ứng dụng sẽ được tự động load lại. Rất thuận tiện đúng không.
Tổng kết
Vậy là bài này mình đã hướng dẫn các bạn cách cài đặt React Native, build ứng dụng đầu tiên và chỉnh sửa Component Text của ứng dụng. Bài tiếp theo mình sẽ giới thiệu về các khái niệm cơ bản khác của React Native. Đồng thời cũng nói qua về 1 số các Component mà chúng ta sẽ hay gặp trong quá trình phát triển. Hãy theo dõi nhé.
One thought on “React Native bài 1: Cài đặt React Native và viết ứng dụng đầu tiên”