Bắt đầu với ReactJs (Phần 1)

React là gì?

• React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng, nó không phải là 1 framework js nào hết.
• React hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được.
• React được xây dựng xung quanh các component.
• React không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau…

Installation

Có rất nhiều cách để tạo reactjs app, nhưng cách nhanh nhất và tốt nhất là Create React App nó đã cài đặt sẵn môi trường cho bạn, bạn có thể sử dụng tính năng mới nhất của javascript

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

**kết quả **

Hello World

Một ví dụ đơn giản và phổ biến nhất,

React.render(
    <div>Hello, word!</div>,
    document.body
)

JSX là gì

JSX không phải một ngôn ngữ template, Hiểu một cách đơn giản, JSX chính là cú pháp để thay thế Javascript, cách viết gần giống XML. Ta có một vài ví dụ về việc sử dụng JSX để biểu thị UI components như sau:

const element = <h1>Hello, world!</h1>;

Embedding Expressions in JSX#

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX Represents Objects#

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

Việc sử dụng JSX trong ReactJS là không bắt buộc. Bạn có thể sử dụng chỉ JS thuần thôi. Nhưng có rất nhiều lý do cho việc nên sử dụng JSX trong ReactJS. 1.JSX không làm thay đổi ngữ nghĩa của Javascript 2.JSX với cú pháp gần giống XML nên Code JSX ngắn hơn, dễ hiểu hơn code JS.

Rendering Elements

ReactJS sử dụng phương thức render để tạo ra cấu trúc DOM ảo trên một vị trí bất kỳ trên DOM thật.

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Đoạn mã trên sẽ tạo ra một thẻ bên trong định danh #root trên DOM thật.

Components and Props

Component trong React là một trong những thành phần quan trọng nhất của React. Do vậy, việc hiểu rõ vòng đời của một component sẽ giúp cho bạn hiểu rõ hơn về React. cách viết đơn giản nhất

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Bạn có thể sử dụng ES6 class để define một component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

**Rendering a Component

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Danh sách các component

class User extends Component {
  constructor(props){
    super(props)
    // Hàm này Thực hiện việc thiết lập state cho component
    // Việc sử dụng super(props) là để có thể sử dụng this.props trong phạm vi hàm constructor này
  }
  
  componentWillMount() {
    // Thực hiện một số tác vụ, hàm này chỉ thực hiện 1 lần duy nhất
    
  }
  componentDidMount() {
    // Thực hiện một số tác vụ, hàm này chỉ thực hiện 1 lần duy nhất
    // Hàm này rất hữu dụng khi bạn làm việc thêm với Map, bởi vì map chỉ render được 
    // khi có node (id) trong DOM  
    // Nói tóm lại, hàm này được gọi để thông báo component đã tồn tại trên DOM, 
    // từ đó các thao tác trên DOM sẽ có thể thực hiện bình thường đối với component này
  }
  componentWillUnmount() {
    // Hàm này thực hiện một lần duy nhất, khi component sẽ unmount
    // Hàm này hữu dụng khi bạn cần xoá các timer không còn sử dụng
  }
  componentWillReceiveProps(nextProps) {
    // Hàm này thực hiện liên tục mỗi khi props thay đổi
    // (1) Sử dụng để thay đổi trạng thái (state) của component phụ thuộc props
    // (2) Sử dụng các kết quả, khởi tạo biến có tính chất async. Ví dụ: Khởi tạo Google Map Api, đây là quá trình async,
    // do vậy, bạn không thể biết được khi nào khởi tạo xong, thì khi khởi tạo xong có thể truyền xuống component thông qua
    // props, và từ đó bạn có thể khởi tạo các dịch vụ khác.
    // Code mẫu:
    //# if(nextProps.mapLoaded){ //props.mapLoaded khởi tạo false
    //#     let googleMaps = this.props.googleMaps ||
    //#         (window.google && // eslint-disable-line no-extra-parens
    //#         window.google.maps) ||
    //#         this.googleMaps;

    //#     if (!googleMaps) {
    //#         console.error(// eslint-disable-line no-console
    //#          'Google map api was not found in the page.');
    //#         return;
    //#     }
    //#     this.googleMaps = googleMaps;

    //#     this.autocompleteService = new googleMaps.places.AutocompleteService();
    //#     this.geocoder = new googleMaps.Geocoder();
    //# } 
  }
  shouldComponentUpdate(nextProps, nextState) {
    // Hàm này thực hiện khi state và props thay đổi
    // Hàm này sẽ trả về kết quả true/false, bạn sẽ cần sử dụng đến hàm này để xử lý xem có cần update component không
  }
  
  componentWillUpdate(nextProps, nextState) {
    // Hàm này thực hiện dựa vào kết quả của hàm trên (shouldComponentUpdate)
    // Nếu hàm trên trả về false, thì React sẽ không gọi hàm này
  }  
  componentDidUpdate(prevProps, prevState) {
    // Hàm này thực hiện sau khi component được render lại, từ kết quả của componentWillUpdate
  }
  
  render() {
    return (
      <div>
        // thực hiện việc render
      </div>
    );
  }
}

User.propTypes = {
  //Khai báo kiểu biến cho props
};
User.defaultProps = {
  //Khai báo giá trị mặc định cho props
}
export default User;

Vòng đời của 1 component

Khởi tạo Component

Lần lượt các hành động sau để khởi tạo component:

• Khởi tạo Class (đã thừa kế từ class Component của React)
• Khởi tạo giá trị mặc định cho Props (defaultProps)
• Khởi tạo giá trị mặc định cho State (trong hàm constuctor)
• Gọi hàm componentWillMount()
• Gọi hàm render()
• Gọi hàm componentDidMount()
• Khi State thay đổi

Cập nhật giá trị cho state

• Gọi hàm shouldComponentUpdate()
• Gọi hàm componentWillUpdate() – với điều kiện hàm trên return true
• Gọi hàm render()
• Gọi hàm componentDidUpdate()
• Khi Props thay đổi

Cập nhật giá trị cho props*

• Gọi hàm componentWillReceiveProps()
• Gọi hàm shouldComponentUpdate()
• Gọi hàm componentWillUpdate() – với điều kiện hàm trên return true
• Gọi hàm render()
• Gọi hàm componetDidUpdate()

Khi Unmount component Gọi hàm componentWillUnmount()

Kết Luận

React chỉ là View, nên việc kết hợp với Redux, Flux, hay bất cứ mô hình luồng dữ liệu là cần thiết. (phần 2 Kết hợp với Redux.js)