Học lập trình React tốt nhất

React Native rất tuyệt, nhưng vẫn đang trong quá trình phát triển nên bạn sẽ đọc rất nhiều thông tin không chính xác (lỗi thời) trên mạng vì mỗi tuần lại có thay đổi lớn. Sau đây là một số thứ bạn nên biết (documentation dịch chưa được chuẩn lắm).

Bài viết này viết từ tháng 9/2016 khi React Native đang ở ver 0.33 mới nhất 

rnpm link

rnpm đã được ghép vào  react-native CLI và có thể chạy với react-native link. Rnpm bị bỏ ngỏ rồi, đừng nên install.

Font tùy chỉnh? Không cần chỉnh sửa lại Android/iOS project.

Bạn không cần phải edit Android hay iOS project khi bạn thêm font đâu.

Đơn giản là tạo một thư mục "assets" ở root (hoặc ở đâu cũng được), vứt file font vào, thêm vào trong package.json. 

"rnpm": {
  "assets": ["assets"]
},

Rồi chạy react-native link , bên cạnh việc chạy module thứ 3, nó sẽ chạy luôn file font trong thư mục tương ứng.

Sau đó bạn chỉ việc sử dụng font đã cho vào bằng đặt  fontFamily  là tên của file font (bỏ extension).

Chú ý là  react-native link chưa nhận diện được các loại asset khác ( ví dụ như video) nên bạn vẫn phải tự thêm vào trong project file.

Tham khảo các khóa học lập trình online, onlab, và thực tập lập trình tại TechMaster

Font weight trong fonts custom vẫn còn hạn chế.

Font custom chỉ hỗ trợ bold và italic ở thời điểm hiện tại.

RN sẽ tìm FamilyName_bold.ttf, FamilyName_italic.ttf khi sử dụng font weight tương ứng.

Nhưng bạn nên sử dụng font khác cho bold và italic để đỡ bị lỗi.

Có một vài babel plugins trong RN.

Mặc dù trong doc không nói rõ nhưng bạn nên biết trong React và RN đã bao gồm babel plugins. Nghĩa là bạn có thể thoải mái sử dụng tính năng ES6 trong project của mình. Sau đây là một vài tính năng điển hình bạn có thể sử dụng mà không cần phải cài đặt thêm bất kì thứ gì khác:

Flow!

Flow khá giống Typescript ở điểm nó cho phép bạn định nghĩa type của variable (nếu bạn đặt type cho một variable thì bạn sẽ không thể thay đổi type của variable đó). Sử dụng hợp lí sẽ giúp project ít lỗi hơn. Ví dụ:

function foo(argument1: string, argument2: number): string {  
    argument1 = 0; // dùng flow thì cái này báo lỗi ngay
    argument2 = 0; // cái này thì không
    return 1; // cái này cũng lỗi này
}

Thông tin về Flow của Facebook có thể tìm ở đây

Do chúng ta sử dụng babel plugins nên bạn không cần phải thêm  // @flow  ở đầu.

ES7 class!

ES7 class properties đã được hỗ trợ nên không cần phải :

class MyComponent extends Component {  
    constructor(props) {
        super(props);
        this.thisIsAField = 1;
    }
}
MyComponent.propTypes = {  
    firstname: React.PropTypes.string,
    lastname: React.PropTypes.string
};

mà chỉ việc:

class MyClass {  
    thisIsAField = 1;
    static propTypes = {
        firstname: React.PropTypes.string,
        lastname: React.PropTypes.string
    };
}

Object spread operator!

Với Object spread operator, việc sát nhập objects trở nên đơn giản hơn bao giờ hết, tương tự array spread operator, sử dụng  ... khi khởi tạo object, nó tự động destructure object thành object bạn khởi tạo:

// Rest properties
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };  
console.log(x); // 1  
console.log(y); // 2  
console.log(z); // { a: 3, b: 4 }

// Spread properties
let n = { x, y, ...z };  
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

Bài viết được dịch từ nguồn: https://blog.jari.io/react-native/?utm_source=mybridge&utm_medium=email&utm_campaign=read_more