React-native: Công cụ lập trình và mẹo (p.2)

1. Công cụ lập trình React-Native

Khuyên dùng: Intellij IDEA Ultimate và Genymotion
Link download : https://www.jetbrains.com/idea/download/
Lý do: Hổ trợ những gì cần thiết để code React-Native
_ React (không phải React-Native nhé các bạn)
_ Javascript,
_ HTML,
_ Android,
_ Java,
_ SVN,
_ Gib,
_ Emulator Android (nên dùng Genymotion tốt hơn)
_ Log, Debug, Terminal

2. Tạo File and Code Templates

Để lập trình React-Native theo đúng chuẩn, hiểu đúng và code đúng, các bạn nên tạo 1 Template File đúng chuẩn React-Native.
Mục đích của việc làm này giúp bạn đở tốn thời gian rất nhiều trong việc gõ lệnh không cần thiết. Việc làm này giúp bạn mang lại hiệu quả cao trong quá trình làm việc và nghiêm cứu React-Natice. Bạn hãy thử xem, chắc chắn là bạn sẽ thích, tôi tin vào điều đó.

Open Intellij > Preferences… > Editor > File and Code Template > Press[+] > Name “React-Native” > Extenstion “js” > Nhập code vào khung kế bên

Đây là Template mà tôi đang dùng, bạn có thể tham khảo.

/**
 * Created by SAMSET on ${DATE}.
 */
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var StyleSheet = require('StyleSheet');
var PropTypes = require('ReactPropTypes');
var Dimensions = require('Dimensions');
var {
    Alert,
    Image,
    Text,
    AlertIOS,
    Platform,
    TouchableOpacity,
    ListView,
    View
} = ReactNative;
const TAG = "[SamSet-v1] $MyComponent : ";
const widthScreen = Dimensions.get('window').width;
const heightScreen = Dimensions.get('window').height - ((Platform.OS === 'ios') ? 18 : 42);
var $MyComponent = React.createClass({
  propTypes: {
    ...View.propTypes,
  },
  getDefaultProps: function() {
    return {
    }
  },
  getInitialState : function(){
    console.log(TAG + "START ............");
    return {
    };
  },
  // componentWillMount() -> render() -> componentDidMount()
  componentWillMount() {
  },
  // componentWillMount() -> render() -> componentDidMount()
  componentDidMount() {
  },
  // When component is unmount, clear timer if has using
  componentWillUnmount() {
  },
  // When props changed
  componentWillReceiveProps(nextProps) {
  },
  // When state and props changed
  shouldComponentUpdate(nextProps, nextState) {
        return true; //default
  },
  // If shouldComponentUpdate return true
  componentWillUpdate(nextProps, nextState) {
  },
  // After component re-render , từ hậu quả của componentWillUpdate
  componentDidUpdate(prevProps, prevState) {
  },
  // componentWillMount() -> render() -> componentDidMount()
  render(){
    return (
        $Content
    );
  }
});
var styles = StyleSheet.create({
  container: {
        flex: 1,
        paddingBottom:(Platform.OS == "ios") ? 64:0,
        backgroundColor:'#EDEEEE',
    },
    row:{
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: 0,
        paddingVertical: 10
    },
    alignRow:{
        justifyContent: 'space-between'
    },
});
module.exports = $MyComponent;

Sau khi xong, bạn hãy thử tạo 1 new File để trãi nghiệm kết quả.

File > New > React-Native File <<<<<<

Theo tuần tự từ trên xuống vòng đời (cycle life) của 1 trang code React-Native sẽ như sau: (giải thích theo template của tôi nhé)

1.  propTypes : Nơi khai báo các prop (tham số) sẽ nhận từ bên ngoài vào
2.  getDefaultProps : Gán giá trị mặc định cho các prop (được gọi khi build app)
3.  getInitialState : Khai báo và gám các giá trị cho các State (Biến nội bộ) Đặc biệt lưu ý: khi bất kì biến state nào được thay đổi thì hàm render sẽ được gọi.
4.  componentWillMount : Chuẩn bị trước khi render
5.  render : Hàm quan trọng nhất – Load Form – View
6.  componentDidMount : Sau khi render
7.  componentWillUnmount : Đã thoát trang Luồng tác động từ bên ngoài
8.  componentWillReceiveProps : nhận props mới ở bên ngoài
9.  shouldComponentUpdate : khi state hay props thay đổi thì hàm này được gọi
10. componentWillUpdate : được gọi nếu shouldComponentUpdate trả về true
11. componentDidUpdate : componentWillUpdate –> re-render -> được gọi

3. Live Templates

Tương tự như File and Code Templates. Nhưng Live Templates khác ở chổ nó được sử dụng trong quá trình viết code. Ví dụ làm như hình minh họa:

Tạo Live Template

Trong quá trình code bạn code lệnh:
logSamSet > Enter
console.log(“Sam set tư vấn giải pháp công nghệ miễn phí”);
console.log chắc hẳn sẽ là lệnh mà bạn dùng nhiều nhất trong quá trình code, nên việc tạo Live Templates giúp bạn tiếc kiệm thời gian đáng kể. Nếu trong quá trình code mà bạn phải gõ đi gõ lại 1 dòng code quen thuộc nào đó bạn hãy nghĩ ngay đến Live Template.
Hãy tự tạo ra nhiều Templates cho phù hợp với phong cách code của bạn.