Reactjs - Components

Reactjs - Components

Component giống như các hàm trả về các phần tử HTML

Các thành phần là các bit mã độc lập và có thể tái sử dụng. Chúng phục vụ mục đích tương tự như các hàm JavaScript, nhưng hoạt động riêng lẻ và trả về HTML thông qua một hàm kết xuất.

Thành phần có hai loại, Thành phần lớp và Thành phần chức năng, 

+ Class Component 

+ Function Component

1. Tạo class component

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

- Tên component phải viết hoa chữ đầu

- Phải kế thừa React.Componet, để có thể truy cập các chức năng của React.Component.

- Component yêu cầu 1 phương thức trả về HTML

VD hiển thị Car component trong “root” element

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

ReactDOM.render(<Car />, document.getElementById('root'));

2. Tạo function Component

function Car() {
  return <h2>Hi, I am also a Car!</h2>;
}

- Function component cũng trả về HTML

- Function component hoạt động khá giống class component, nhưng Class component có thêm các tính năng khác.

Ví dụ Hiển thị Car function trong element root

import React from 'react';
import ReactDOM from 'react-dom';

function Car() {
  return <h2>Hi, I am also a Car!</h2>;
}

ReactDOM.render(<Car />, document.getElementById('root'));

3. Component Constructor

- nếu trong component có hàm constructor() thì hàm này sẽ được gọi khi component được tạo.

- Hàm constructor() là nơi bạn khởi tạo các thuộc tính của component.

- Trong react các thuộc tính của component nên được giữ trong một đối tượng gọi State

- Có thể dùng lệnh super(), để thực thi hàm constructor của lớp cha, và có quyền truy cập tất cả chức năng của component cha (React.Component).

VD tạo hàm khởi tạo trong Car component và thêm thuộc tính color và sử dụng thuộc tính color để render()

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

4. Tìm hiểu về Props

- Một cách khác để xử lý các thuộc tính thành phần là sử dụng Props

- Props giống như đối số của hàm và bạn gửi vào component dưới dạng thuộc tính.

Ví dụ: Sử dụng thuộc tính để chuyển một color đến Car component và sử dụng nó để render()

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}

ReactDOM.render(<Car color="red"/>,document.getElementById('root'));

=> output: I am a red Car!

5. Components trong Components

Ví dụ sử dụng Component Car trong Component Garage

class Car extends React.Component {
  render() {
    return <h2>I am a Car!</h2>;
  }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
      <h1>Who lives in my Garage?</h1>
      <Car />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

6. Component trong Files

Mục đích của react là để tái sử dụng các component, và bạn có thể bỏ các component và các file riêng biệt.

Để làm ta tạo file .js và bỏ code vào

Chú ý file phải bắt đầu bằng việc importing React và kết thúc bằng lệnh export default Car;

Ví dụ: tạo Car.js để lưu component car, và sử dụng trong file index.js

Car.js

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';

ReactDOM.render(<Car />, document.getElementById('root'));

Cám ơn