Giới thiệu Components trong ReactJS

Trong bài trước mình đã giới thiệu đến bạn JSX, trong bài này chúng ta sẽ tiếp tục tìm hiểu về Components trong ReactJS.

Cùng bắt đầu thôi nào.

Components trong ReactJS

Trong React thành phần cấu thành là những Component, Component cho phép bạn chia nhỏ từng chức năng UI ra và sau đó tái sử dụng nó.

Chúng ta cùng sét một ví dụ nhỏ sau

const Notification = (props) => {
  const { title, content } = props;
  return (
    <div className="notification">
      <h2 className="message__title">{title}</h2>
      <p>{content}</p>
    </div>
  );
};

Ở ví dụ trên mình đã tách phần UI hiển thị thông báo ra thành một component riêng, mỗi khi bạn cần hiển thị thông báo ở đâu đó thì chỉ cần gọi component Notification này là xong.

<Notification
    title = "Welcome to VoManhKien.com"
    content = "You're great guy"
/>

Thay vì phải viết code đó ở nhiều nơi thì chỉ cần viết ở một nơi rồi sử dụng lại nhiều lần, sẽ tránh được duplicate code.

Thêm một ví dụ trực quan hơn để bạn dễ hiểu

Nếu bạn được yêu cầu làm giao diện này thì bạn sẽ làm thế nào?

Bạn có thể chia nhỏ từng thành phần ra để làm hoặc bạn cũng có thể vo 1 cục vào, nhưng khi bạn muốn hiển thị phần Social ở chỗ khác thì bạn lại phải lấy nguyên code phần Social mang sang chỗ cần hiển thị.

Thay vào đó bạn có thể chia nhỏ từng button ra từng component sau đó ghép lại thành giao diện hoàn chỉnh.

Khởi tạo một React Component

Để khởi tạo một component thì chúng ta có 2 cách 1 là function component, hai là class component, chúng ta cùng đi tìm hiểu từng khái niệm nhé.

Function Component

Đối với Function Component thì bạn có thể viết như bên dưới

import React from "react";
 
const Welcome = function(props) {
  return (
    <div>
      <h1>Welcome ! I am a function component </h1>
    </div>
  )
}
 
export default Welcome;

Nếu bạn muốn sử dụng component này thì bạn chỉ cần import nó vào một component nào đó và sử dụng thôi

import React from 'react';
import Welcome from './Welcome'
function App() {
  return (
    <div>
        <Welcome />
        <p>Show something</p>
    </div>
  );
}
 
export default App;

Hoặc bạn có thể truyền tham số Props vào component Welcome để hiển thị ra. Chi tiết chúng ta sẽ học trong vài về Props.

<Welcome name="Vo Manh Kien" /> bạn có thể truyền tham số name với giá trị là Vo Manh Kien vào sau đó ở trong component Welcome bạn chỉ cần lấy tham số name ra từ trong props giống như bên dưới đây.

...
<h1>Welcome ${props.name}</h1>
...

Lưu ý những phần … là thành phần trên và dưới nhé, chứ k phải nó chỉ có thế kia đâu.

Vậy câu hỏi đặt ra khi nào thì nên dùng function component?

Theo mình thì sau sự ra đời của React Hooks thì bạn hoàn toàn có thể thay thế gần như hoàn toàn class component bằng function component. Tại thời điểm hiện tại thì vẫn còn một số chức năng vẫn chưa thể giải quyết bằng function component nhưng trong tương lai gần team React và cộng đồng sẽ giải quyết được hết.

Và hơn nữa khi sử dụng function component code của bạn sẽ trông gọn hơn rất nhiều và tránh được wrapper hell khá nhiều.

Class Component

Function component giống bản thu nhỏ của class component, với class component thì bạn sẽ có đầy đủ events, state, ref, lifecycle. (Những vấn đề này đã được giải quyết hết bằng React Hooks khi bạn sử dụng Function Component)

Một class component sẽ trông thế này

import React, { Component } from "react";
class Welcome extends Component {
  render() {
    return (
      <div>
        <h1>Welcome ! I am a class component </h1>
      </div>
    );
  }
}
export default Welcome; 

Khi bạn chạy lên thì cũng không khác gì function component cả

Nhưng bạn có thể viết thêm các method như ví dụ bên dưới

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Chi tiết về lifecycle chúng ta sẽ học ở những bài sau

Kết luận

Như vậy trong bài viết này mình đã giới thiệu cho bạn về Components trong ReactJS, không có gì phức tạp cả đúng không nào.

Trong những bài tiếp theo mình sẽ tiếp tục giới thiệu những phần khác của ReactJS.

Nếu có thắc mắc gì bạn có thể comment ở bên dưới hoặc join group Facebook để cùng thảo luận nhé: https://vomanhkien.com/group-fb

Hẹn gặp bạn trong những bài viết tiếp theo.