React Native

React Native là một framework mã nguồn mở được sáng tạo bởi Facebook. Nó được sử dụng để phát triển ứng dụng di động Android, iOS, Web và UWP bằng cách cho phép các nhà phát triển sử dụng React cùng với môi trường ứng dụng gốc (native).

React Native

Phát triển bởi	Facebook và cộng đồng
Phát hành lần đầu	26 tháng 3 năm 2015 (2015-03-26)
Phiên bản ổn định	0.61.5 / 23 tháng 11 năm 2019 (2019-11-23)
Kho mã nguồn	https://github.com/facebook/react-native
Viết bằng	JavaScript, Java, C++, Objective-C, Objective-C++, Python
Giấy phép	MIT License
Website	facebook.github.io/react-native/

Lịch sử

Năm 2012 Mark Zuckerberg đã phát biểu, "Sai lầm lớn nhất của chúng tôi khi làm công ty là dựa trên quá nhiều HTML hơn là môi trường phát triển gốc". Ông hứa rằng Facebook sẽ sớm cung cấp trải nghiệm di động tốt hơn.

Kỹ sư Jordan Walke tại Facebook đã tìm ra cách xây dựng các thành phần UI cho iOS bằng một luồng JavaScript. Họ quyết định tổ chức cuộc thi Hackathon để hoàn thiện nguyên mẫu hệ thống để có thể xây dựng các ứng dụng di động gốc (native app) bằng công nghệ này.

Sau nhiều tháng phát triển, Facebook đã phát hành phiên bản đầu tiên cho React Native vào năm 2015. Trong một cuộc hội thảo công nghệ, Christopher Chedeau cho biết Facebook đã sử dụng React Native trong phát triển ứng dụng nhóm và ứng dụng quản lí quảng cáo của họ.

Hoạt động

Các nguyên tắc hoạt động của React Native gần như giống hệt với React ngoại trừ việc React Native không thao tác với DOM thông qua DOM ảo. Nó chạy một quá trình xử lý nền (phiên dịch JavaScript viết bởi các nhà phát triển) trực tiếp trên thiết bị đầu cuối và giao tiếp với nền tảng gốc qua một cầu trung gian, bất đông bộ và theo đợt.

Các thành phần React bao bọc mã gốc và tương tác với API gốc qua mô hình UI khai báo và Javascript của React. Điều này giúp việc phát triển ứng dụng cho nhiều nền tảng nhanh hơn.

React Native không sử dụng HTML. Thay vào đó, nó sử dụng các thành phần khác từ luồng Javascript.

Hello World

Ví dụ về chương trình Hello World:

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

// Bỏ qua dòng này nếu bạn sử dụng công cụ Create React Native App
AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

// Code ReactJS có thể được sử dụng từ một thành phần khác bằng câu lệnh sau:

import HelloWorldApp from './HelloWorldApp';