Nội dung bài viết
Video học lập trình mỗi ngày
Như mình đã giới thiệu ngay lúc ở phần 1 chúng ta sẽ đi hết những tính năng này trong toàn bộ 3 phần này.
Phần 1 bao gồm:
Đọc phần 1: [Series es6 vs react] - Làm rõ về es6 và react native! Phần 1.
- Immutability - tính bất biến
- Formatting Arguments
- Modules
- Destructuring
Phần 2 bao gồm:
- ES6 classes
- Các khai báo kiểu mới ngoài var, let/const
- Sử dụng Map and filter
- ES6 module
Phần 3
- Default Arguments
- Cách return ngầm trong function.
- Spread
- Arrow functions
Các bạn chưa đọc ở phần 1 thì nhớ đọc qua để hiểu bản chất của REACT NATIVE với ES6 trước. Chứ không lại không hiểu chuyện gì đang xảy ra ở đây? =]]
1 - ES6 classes.
Trước tiên mình sẽ show cho các bạn một đoạn code khi mặc định sinh ra trong file app.jstrong react native.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Hello, world!</Text>
</View>
);
}
}Giờ mình sẽ giải thích vì sao nó lại giống như es6 mà chúng ta thường sử dụng. ES6 đã giới thiệu cú pháp lớp được sử dụng theo cách tương tự với Java hoặc Python.
Một lớp cơ bản trong ES6 sẽ trông như thế này:
class Developer {
constructor(hello){
this.hello = hello;
}
hello(){
return this.hello;//'Hello World;
}
}Chú ý: Class systax khác với constructor function nhé. Có thể bài khác mình sẽ nói rõ hơn về phần này. Phương thức constructor luôn được gọi trong khởi tạo đối tượng.
Bất kỳ tham số nào được truyền vào đối tượng sẽ được truyền vào đối tượng mới.
Ví dụ:
var hello = new Developer('Hello World');
hello.hello(); // Hello World;Rồi mình sẽ viết một class khác và sẽ kế thừa class Developer.
class ReactDeveloper extends Developer {
installReact(){
return 'installing React .. Done.';
}
}
var hello = new ReactDeveloper('Hello World');
hello.hello(); // Hello World'
hello.installReact(); // installing React .. Done.Rồi, đến đây các bạn thấy rõ hơn chưa. Theo mình nghĩ thì react nó ăn trộm systax của es6 thì phải :D. Bây giờ chúng ta đã hiểu lớp ES6 và inheritance, chúng ta có thể hiểu lớp React được định nghĩa trong src / app.js.
Đây là một thành phần React
import React, { Component } from 'react';
class App extends Component {
// class content
render(){
return (
<h1>Hello React!</h1>
)
}
}nhưng các bạn có thể nhìn thấy nó thực sự chỉ là một lớp ES6 bình thường kế thừa định nghĩa của React class.
Đến đây bạn nào thự sự chưa hiểu thì có thể tham khảo thêm những bài mà mình add phía dưới bài viết này. Rồi bây giờ chúng ta qua phần thứ 2
2 - Các khai báo kiểu mới ngoài var, let/const.
Ở phần này thì mình nghĩ hầu như bạn nào cũng biết về var, let, const. Và để cho các bạn nhớ thêm thì mình sẽ nhắc lại một lần nữa ở bài này.
Vì từ khóa var JavaScript khai báo biến dạng global, hai khai báo biến mới được giới thiệu trong ES6 để giải quyết nhiều hơn các vấn đề mà của trước đó var đang giải quyết, đó là let và const. Ai nhìn vào và chưa hiểu thì cứ bảo chúng giống nhau à có giống nhau thật đó là chúng được sử dụng để khai báo các biến. Sự khác biệt là const không thể thay đổi giá trị của nó sau khi khai báo, trong khi đó let và var đều có thể.
Giờ chúng ta đi tìm sự khác nhau nó như thế nào:
let: Rất giống với var nhưng scope là khác nhau. var là hàm có scope (có thể được sửa đổi ở bất kỳ đâu trong hàm) và nó chỉ khả dụng trong function mà mình đang đặt chúng. Và mình bây giờ cũng không biết mình sử dụng let từ khi nào nữa. hahha..
const: Tương tự scope (block) như cho phép nhưng bạn không thể thay đổi giá trị của nó, ví dụ:
const name = 'Cristian Ronaldo'; name = 'javascript' // Can't do this ố yeah
Tuy nhiên các bạn đừng nhầm lẫn như mình như lúc đầu sử dụng const. Các bạn có thể modify trong object or array khi dùng const. ví dụ:
const player = {
name: 'Cristian Ronaldo',
team: 'Viet Nam'
}
player.job = 'Coder';
// player => {
name: 'Cristian Ronaldo',
team: 'Viet Nam',
job: 'Coder'
}array cũng tương tự.
3 - Sử dụng Map and filter.
Mình khuyến khích các bạn đọc thêm bài này để hiểu hơn về map, filter, và reduce. Tự Học Javascript - Trường Hợp Nào Sử Dụng Map, Filter, Reduce Trong Javascript
Mặc dù hướng dẫn này tập trung vào ES6 và React, nhưng mình nói thêm các method map và filter trong JavaScript cần được đề cập vì chúng có thể là một trong những tính năng ES5 được sử dụng nhiều nhất khi xây dựng ứng dụng React. Riêng về xử lý dữ liệu. Hai phương pháp này được sử dụng nhiều hơn trong xử lý dữ liệu.
Ví dụ trong react:
class App extends Component {
// class content
render(){
const users = [
{ name: 'Ronaldo', age: 25 },
{ name: 'Son Tung', age: 30 },
{ name: 'Quang Hai', age: 28 },
];
return (
<ul>
{users
.map(user => <li>{user.name}</li>)
}
</ul>
)
}
}Chúng ta cũng có thể dùng filter để render data.
<ul>
{users
.filter(user => user.age > 26)
.map(user => <li>{user.name}</li>)
}
</ul>4 - ES6 module
Trước hết ta thấy code quen thuộc trong React
import React, { Component } from 'react';
Để mình giải thích es6 module có quan hệ gì trong React nhé.
Trước hết toạ file Util.js
// in util.js
export function times(x) {
return x * x;
}
export function plusTwo(number) {
return number + 2;
}// Thì trong app.js ta khai báo thế này . import { times as multiplication, plusTwo as plus2 } from './util.js';
Qua ví dụ chúng ta có thể hình dung React thật ra cũng như es6 thôi. Nhưng dev nhiều kinh nghiệm nhìn vào là có thể hìnhd dung qua sự tương đồng về react native và es6.
Kết Luận:
Qua bài viết phần 2 này. Mình chưa kết luận hết tất cả những gì mà react và es6 làm việc. Nhưng điều tuyệt vời nhất là React không làm quá khó hay không thêm một foreign abstraction layer nào lên để phát triển ứng dụng. Do đó React trở nên ngày càng mạnh mẽ và phổ biến đối với các developer js. Nó chỉ đơn giản là sử dụng JavaScript tốt nhất để xây dựng giao diện người dùng dễ dàng hơn và có thể duy trì. Cảm ơn các bạn đã đọc và chúng tôi hy vọng bạn đã học được một số điều mới trong bước đường tiến vào react native.
Và các bạn không quên đón đọc phần 3: [Series Es6 Vs React] - Làm Rõ Về Es6 Và React Native! Phần 3.
