React Native

Hướng dẫn React Native - Phần 1: Cài đặt môi trường

Nguyễn Nhân

Nguyễn Nhân

— 3 min read
Hướng dẫn React Native - Phần 1: Cài đặt môi trường

Mình đã có bài viết về React Native có thể là tương lai của ứng dụng di động, bài viết này mình sẽ hướng dẫn cơ bản để bắt đầu xây dựng ứng dụng di động bằng React Native một cách rất đơn giản!

Nội dung chính

Yêu cầu

  • Mac OS X: để biên dịch iOS, nếu bạn chỉ xây dựng ứng dụng cho Android thì có thể dùng Win hoặc Linux
  • XCode 7.0+
  • Android Studio
  • JDK 1.8
  • Node.js 4.0+
  • Khác:

Cài đặt

Bước 1: Cài đặt command line

Cài đặt react native cli dùng để thao tác command line

$ npm install -g react-native-cli

Bước 2: Khởi tạo dự án

Khởi tạo dự án

$ react-native init AwesomeProject

Đợi 1 lúc cho npm tải các gói cần thiết.

Bước 3: Chạy ứng dụng

iOS

$ cd AwesomeProject
$ react-native run-ios

Bạn cũng có thể mở ios/AwesomeProject.xcodeproj từ XCode và thực hiện build

Android

$ cd AwesomeProject
$ react-native run-android

Rất đơn giản, bạn đã khởi chạy được ứng dụng di động trong vòng 15 phút.

Lập trình

Sau khi bạn khởi chạy được ứng dụng từ bước cài đặt trên, bạn hãy mở file index.ios.js đối với iOS hoặc index.android.js thử thay đổi các chữ phía trong <Text></Text>

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
 //...
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  //...
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Sau đó, với iOS nhấn ⌘-R, bạn sẽ thấy kết quả thay đổi ngay, tương tự với Android bạn nhấn F2 và chọn “Reload JS”. Đối với bạn nào đã từng lập trình iOS hay Android, việc thay đổi chỉ đơn giản là Refresh là một sự kinh ngạc! Bởi vì khi xây dựng ứng dụng bằng ObjectiveC hay Java bạn phải build lại bất kể chỉ thay đổi 1 chữ nào đó trong ứng dụng, và điều này là không cần thiết đối khi xây dựng bằng React Native.

Tham khảo

React Native là gì?

ES6/ES2015 là gì? Đây là bài viết hướng dẫn về ES6/ES2015, mặc dù bạn có thể dùng Javascript thuần, tuy nhiên sẽ rất “hợp thời” nếu bạn làm quen với ES2015 ngay từ đầu.

https://facebook.github.io/react-native/docs/getting-started.html

Read more