React-Native Xây dựng úng dụng di động đa                                    nền tảng

React là một Framework được tạo bởi Facebook cho các giao diện web điều khiển dữ liệu. React cung cấp một kiến ​​trúc hướng thành phần sử dụng cú pháp khai báo và có thể dễ dàng mở rộng.

Vậy sự khác biệt giữa React và React Native là gì? React ban đầu được tạo ra cho giao diện người dùng web. Câu thần chú đằng sau React là “Tìm hiểu một lần, viết bất cứ nơi nào”.

Mục tiêu của Facebook là “Phát triển một bộ mục tiêu và công nghệ nhất quán cho phép xây dựng các ứng dụng bằng cách sử dụng cùng một bộ nguyên tắc trên bất kỳ nền tảng nào.

Với mục tiêu bao trùm này, họ đặt ra để áp dụng cùng một bộ nguyên tắc như DOM ảo, các thành phần trạng thái, công cụ bố cục và nhiều thứ khác cho nền tảng iOS và Android.

Đa nền tảng Ios-Android

Lợi ích của React và React Native là nếu bạn hiểu cách xây dựng ứng dụng React Native cho iOS, bạn sẽ hiểu cách xây dựng ứng dụng React Native cho Android. Nó “Học một lần, viết ở bất cứ đâu”.

Các thư viện như Phonegap cung cấp trình bao bọc xung quanh giao diện người dùng web bằng HTML, CSS và JavaScript. Thay vào đó, React Native cung cấp một đại diện DOM ảo, sau đó kết xuất các điều khiển gốc. React Native có thể lấy các thành phần nền tảng gốc như sliders, switches, labels, tab bars và đóng gói chúng trong các thành phần React.

Để cài đặt React Native, hãy làm theo hướng dẫn trên trang web của họ. Nếu bạn đang viết một ứng dụng iOS thì bạn sẽ cần máy Mac để bạn có thể chạy Xcode.

Khi React Native được cài đặt và bạn đã tạo một dự án mẫu, bạn sẽ nhận thấy hai tệp JS chỉ mục riêng biệt cho mỗi nền tảng: index.ios.js và index.android.js.

Các thành phần (Components):

React dựa trên kiến ​​trúc thành phần. Mỗi thành phần UI là một thành phần có thể được tạo kiểu và được hỗ trợ bởi nguồn dữ liệu.

Example:

<View style={styles.container}>
 <Text style={styles.welcome}>
  Welcome to React Native!
 </Text>
</View>

Ở đây React Native lấy biểu diễn DOM ảo này và kết xuất các thành phần gốc. Chế độ xem hiển thị UIView cho iOS và chế độ xem gốc trong Android. Trong nó chứa Text với nội dung là một UILabel cho iOS và TextView cho Android.

Lý do nó được gọi là DOM ảo vì nó là đại diện chung cho giao diện người dùng của bạn sẽ trông độc lập với hai nền tảng. React Native sau đó kết xuất lại điều khiển gốc dựa trên UI của bạn.

Mỗi thành phần cũng có một thuộc tính Type, có thể được định nghĩa trong cùng một tệp hoặc hoàn toàn trong một tệp riêng biệt. StyleSheet cung cấp cú pháp kiểu CSS và sử dụng Flexbox để bố trí. Flexbox cung cấp một cách hiệu quả để bố trí, sắp xếp và phân phối không gian giữa các mục, ngay cả khi kích thước của chúng không xác định hoặc thay đổi động. Sử dụng Flexbox cho bố cục cung cấp một lợi ích lớn vì các công cụ bố trí trên nền tảng di động là một công việc khó khăn, đặc biệt là đối với các bố cục phức tạp.

Các trạng thái (States and Props)

Không có bài viết nào về React hoặc React Native sẽ được hoàn thành mà không nói về state. Một thành phần có các loại ràng buộc dữ liệu: state và props. Props như các thuộc tính của một thành phần được xác định khi tạo một thành phần. Ví dụ: Văn bản cho nhãn nhãn hoặc URL hình ảnh cho một thành phần hình ảnh. Chúng luôn được cố định trong suốt vòng đời của một thành phần.

Mặt khác, state là động và có thể điều khiển nội dung nào cần được hiển thị trong một thành phần. Ví dụ: bạn tải xuống dữ liệu và điền vào ListView hoặc tạo danh sách các tác vụ bằng ListView có thể được cập nhật động khi các tác vụ được tạo, cập nhật hoặc xóa mà không phải kết xuất lại UI theo cách thủ công.

Kết luận

React Native không khác lắm so với React. Nếu bạn đã học trước đây thì bạn có thể dễ dàng tạo một ứng dụng di động bằng React Native. Một số kiến ​​thức về các thành phần UI gốc sẽ hữu ích để bạn hiểu cách sử dụng chúng và hiểu các giới hạn của chúng.

Các lợi ích của React Natives so với phát triển IOS gốc là: lặp lại ứng dụng nhanh, JavaScript hiện đại và các quy tắc kiểu rõ ràng tương tự như CSS. Và đừng quên Flexbox để bố trí UI.

React-Native có một cộng đồng phát triển lớn

Trên đây là những chia sẻ về React-Native một Framework xây dựng ứng dụng di động đa nền tảng đang được quan tâm nhiều nhất bởi các nhà phát triển ứng dụng di động. Rất mong là nó hữu ích đối với các bạn!