Overview

Để hiểu rõ hơn về React Native là gì, trước tiên chúng ta cần phân biệt sự khác nhau giữa ứng dụng Native và Hybrid

Ứng dụng Hybrid

Là chương trình phần mềm trên điện thoại di động được viết dựa trên nền tảng web (html5, css3, javascript), bản chất hoàn toàn là ứng dụng web nhưng có thêm được các tính năng thao tác phần hệ điều hành như tập tin, truy cập máy ảnh…Toàn bộ những thứ này đều được bao bọc bởi một lớp ứng dụng Native mà nổi bật là Phonegap/Cordova. Phần web được xử lý hiển thị bởi webview, phần tính năng truy cập hệ thống được cung cấp bởi các hàm API, gọi hàm bằng Javascript thông qua API thì chương trình bao bọc sẽ gọi trực tiếp Native xuống hệ điều hành. Bằng cách này, ứng dụng web có thêm những tính năng cao cấp của ứng dụng Native, và do được tính hợp mã nguồn sẵn nên tốc độ của ứng dụng hybrid nhanh hơn ứng dụng web.

Ứng dụng Native (iOS, Android)

Là ứng dụng được phát triển trực tiếp bằng ngôn ngữ của hệ điều hành đó cung cấp. Ví dụ với iOS là Objective-C, Swift Và Android là Java. Các ứng dụng viết bằng ngôn ngữ này được biên dịch ra ngôn ngữ máy trên điện thoại và có toàn bộ tính năng mà hệ điều hành đó cung cấp. Do là ngôn ngữ trực tiếp cũng như không phải thông qua ứng dụng nào khác nên tốc độ là nhanh nhất.

• Điểm hạn chế khi viết ứng dụng Native đó là tốn thời gian re-complie. Mỗi lần sửa đổi một chức năng bạn cần re-build. Với iOS khi sử dụng swift cho codebase lớn, bạn sẽ thấy tốc độ re-complie khá là chậm.
• Nhưng tại sao native app vẫn được ưu chuộng và phát triển hơn là việc dùng Web app hay Hybrid

Lý do rất đơn giản, các ứng dụng native mang lại trải nghiệm tốt hơn cho người dùng.

React Native là gì?

React Native là framework giúp ta viết các ứng dụng Native chỉ bằng Javascript do Facebook phát hành. Nó sử dụng cùng thiết kế như React . Hiểu đơn giản bạn viết code Javascript để có thể sử dụng cho cả thiết bị iOS và Android . Do đó React Native sẽ rất dễ dàng với người đã nắm vững Javascript. Hới đau đớn cho anh em mobile

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

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

Sự ra đời của React Native để khắc phục các điểm yếu của ứng dụng Web và Hybrid. Với React Native, bạn không phải đang xây dựng một "mobile Web app", một "HTML5 app", hay một "Hybrid app". Bạn đang build một "real mobile app" cho tất cả các hệ điều hành nhưng không phân biệt bạn đang dùng Objective-C, Swift hay Java. React Native xây dựng giao diện cơ bản giống như các ứng dụng iOS và Android thông thường. Bạn chỉ cần đặc các Component lại với nhau bằng JavaScript và React.

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

class AwkwardScrollingImageWithText extends Component {
  render() {
    return (
      <ScrollView>
        <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} />
        <Text>
          On iOS, a React Native ScrollView uses a native UIScrollView.
          On Android, it uses a native ScrollView.

          On iOS, a React Native Image uses a native UIImageView.
          On Android, it uses a native ImageView.

          React Native wraps the fundamental native components, giving you
          the performance of a native app, plus the clean design of React.
        </Text>
      </ScrollView>
    );
  }
}

Sử dụng React Native sẽ giảm thời gian Re-compiling, cho bạn cảm giác như real-time compiling. Thay vì phải mất thời gian re-compiling, React Native hỗ trợ Reload building , đơn giản sử dụng tổ hợp phím Command⌘ + R trên iOS simulator.

React Native hỗ trợ drop down to native code (Objective-C, Swift hay Java) nếu bạn cần custom hay optimize một số trường hợp đặc biệt trong ứng dụng của bạn. Bạn sẽ rất dễ dàng để xây dựng một phần/chức năng trong ứng dụng của bạn bằng React Native, và ngược lại. Đó cũng là cách mà Facebook apps đang sử dụng.

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { TheGreatestComponentInTheWorld } from './your-native-code';

class SomethingFast extends Component {
  render() {
    return (
      <View>
        <TheGreatestComponentInTheWorld />
        <Text>
          TheGreatestComponentInTheWorld could use native Objective-C,
          Java, or Swift - the product development process is the same.
        </Text>
      </View>
    );
  }
}

Getting Started

Để cài đặt React Native lên máy tính của bạn (Mac, Window, Linux), bạn có thể làm theo hướng dẫn từ trang chủ React Native Trước hết bạn cần cài đặt Homebrew nếu trên máy tính bạn chưa có.

Cài đặt run iOS app

Node, Watchman

brew install node brew install watchman

The React Native CLI

npm install -g react-native-cli

Xcode Bạn nên cài đặt trực tiếp từ Mac App Store, sau đó bạn cần cài đặt iOS Simulator và các tools cần thiết để xây dựng iOS apps.

Tạo mới React Native project

react-native init ProjectName

Sau đó bạn truy câp vào folder project vừa tạo

cd ProjectName

Và đơn giản thực hiện dòng lệnh để build app

react-native run-ios

Cài đặt run Androi app

Build app lên thiết bị Android ảo thì khó khăn hơn một chút Bắt buộc bạn phải cài đặt Java SE Development Kit (JDK) Tiếp đến cài đặt Android Studio

Trường hợp bạn có chiếc điện thoại Android, đơn giản bạn chỉ cần kết nối nó với máy tính. Sau đó bạn tạo mới project React-Native bằng câu lệnh.

react-native init ProjectName

Sau đó bạn truy câp vào folder project vừa tạo

cd ProjectName

Và đơn giản thực hiện dòng lệnh để build app

react-native run-android

Nếu bạn muốn dùng thiết bị ảo để chạy ứng dụng, mình suggest nên dùng Genymotion. Nhưng với Android thì thiết bị ảo không thể đáp ứng được hầu hết các yêu cầu mong muốn từ lập trình viên, đầu tiên đó là nó chạy rất chậm, nên việc có đầu tư một chiếc smartphone Android vừa tầm là việc cần thiết

Editor tools

XCode và Android Studio bạn sẽ sử dụng để run ứng dụng, còn bạn nên dùng Editor nào để coding React Native ? Hiện tại mình đang dùng Atom và thêm package Nuclide. Hỗ trợ khá mạnh mẽ cho React-Native Ngoài ra bạn có thể dùng Subline , Visual Studio Code

React-Native đang tạo ra một cơn sốt thực sự, được đánh giá với trên 48k Stars và trên 11k Forks trên Github. Trong khuôn khổ bài viết, mình mới chỉ dừng lại ở mức đưa ra cho bạn cái nhìn tổng quát về React Native và cách tiếp cận nó. Các bài viết tiếp theo (kết hợp vừa học vừa tổng hợp), mình sẽ cố gắng để giới thiệu tiếp làm sao để xây dựng được một ứng dụng hoàn chỉnh.

Let's enjoy it with me !