Để tiếp tục với chuỗi bài viết về ReactJS, hôm này chúng ta sẽ cùng nhau tìm hiểu về các cú pháp cơ bản trong ReactJS với những phần chính sau: Components trong ReactJS, props trong ReactJS, và state trong ReactJS. Đây là những kiến thức cơ bản nhưng đồng thời nó cũng sẽ là những kiến thức rất quan trọng giữ vai trò quyết định trong toàn bộ dự án ReactJS về sau này. Không dài dòng thêm nữa chúng ta hãy cùng đến với những Cú pháp cơ bản trong ReactJS ngay sau đây.

>>> Xem thêm bài viết trong chuỗi bài về ReactJS tại đây:

1. Components trong ReactJS

1.1. Khái niệm về Components trong ReactJS

Components là một trong những thành phần cơ bản và quan trọng nhất trong ReactJS. Với việc có thể chia nhỏ các component, nó giúp cho mã nguồn ReactJS trở nên dễ đọc, dễ bảo trì và phát triển một cách linh hoạt hơn.

Một số đặc điểm về Components trong ReactJS:

  • Tái sử dụng: Mỗi component có thể được tái sử dụng lại tại nhiều nơi khác nhau trong ứng dụng ReactJS. Việc này khiến cho mã ReactJS giảm sự lặp lại trong mã nguồn, đồng thời nó tăng khả năng bảo trì trong mã nguồn ReactJS.
  • Phân tách chức năng: Trong ReactJS mỗi component được tạo ra cho một thành phần cụ thể của giao diện người dùng hoặc các tính năng cụ thể trong ứng dụng ReactJS. Việc này giúp phân tách chức năng cũng như tăng tính tổ chức mã nguồn một các rõ ràng hơn.
  • Dễ đọc và dễ hiểu: Với việc sử dụng cú pháp JSX tương tự mã HTML, mã nguồn trở nên dễ đọc và dễ hiểu hơn.
  • Quản lý state: Trong ReactJS, Components dựa vào trạng thái state để phản ánh các thay đổi trong dữ liệu, đồng thời cập nhật giao diện tương ứng.
  • Function Components và Class Components: Cho đến hiện tại ReactJS hỗ trợ 2 loại components chính là function components và class components. Function components đơn giản và ngắn gọn hơn, trong khi class components chưa nhiều phương thức và có khả năng quản lý state.
  • Props: Props là một trong những cách truyền dữ liệu từ component cha sang component con. Việc truyền dữ liệu giữa các components giúp cho component có khả năng tái sử dụng cũng như linh hoạt hơn.

>>> Bài viết liên quan:

1.2. Class Component trong ReactJS

Mỗi class component cần phải được extends từ React.Component. Mỗi component cũng sử dụng phương thức render() để trả về mã HTML.

Ví dụ:

class Home extends React.Component {
  render() {
    return <h1>This is Home page!</h1>;
  }
}

1.3. Function Component trong ReactJS

Tương tự, chúng ta có mã sau để tạo ra component bằng cách sử dụng Function trong ReactJS.

Ví dụ:

function Home() {
    return <h1>This is Home page!</h1>;
}

1.4. Tái sử dụng Components

  • Ví dụ 1:
function Welcome() {
  return <p>Hello this is page of Stringee Company</p>;
}
function Home() {
  return (
    <>
      <h1>This is Home page@</h1>
      <Welcome />
    </>
  );
}
  • Ví dụ 2:

Welcome.js

function Welcome() {
  return <p>Hello this is page of Stringee Company</p>;
}
export default Welcome;

Home.js

import Welcome from './Welcome.js';
function Home() {
  return (
    <>
      <h1>This is Home page@</h1>
      <Welcome />
    </>
  );
}

2. Props trong ReactJS

Trong ReactJS, properties (thuộc tính) hay props là cách để truyền dữ liệu từ component cha xuống component con. Cụ thể, props là một đối tượng chứa các giá trị hoặc các đối tượng khác mà một component có thể nhận được từ component cha. Sau đây chúng ta cùng nhau tìm hiểu về các cách sử dụng props trong ReactJS:

  • Props trong Class Components:

Trong Class Components chúng ta có thể sử dụng từ khóa this để truy cập props như sau:

// Class component
class Welcome extends React.Component {
  render() {
    return <h1>My name company is {this.props.company}!</h1>;
  }
}
// Sử dụng component với props
const element = <Welcome company="Stringee" />;
  • Sử dụng nhiều props:

Chúng ta có thể sử dụng đồng thời nhiều giá trị props trong component như sau:

// Component con
function Welcome(props) {
  return (
    <div>
      <p>My company's name, {props.company}!</p>
      <p>Email: {props.email}</p>
    </div>
  );
}
// Sử dụng component với nhiều props
const userElement = <Welcome company="Stringee" email="[email protected]" />;
// Component con
function Welcome({company, email}) {
  return (
    <div>
      <p>My name company is, {company}!</p>
      <p>Email: {email}</p>
    </div>
  );
}
// Sử dụng component với nhiều props
const userElement = <Welcome company="Stringee" email="[email protected]" />;
  • Sử dụng children prop

children là một prop đặc biệt trong ReactJS, prop này chứa nội dung bên trong thẻ mở và thẻ đóng của một component:

// Component con
function Welcome(props) {
  return <div>{props.children}</div>;
}
// Sử dụng component với children prop
const boxedElement = (
  <Welcome>
      <p>My name company is, Stringee!</p>
      <p>Email: [email protected]</p>
  </Welcome>
);

3. State trong ReactJS

Trong ReactJS, các state đề cập đến trạng thái nội tại của một component. Components sẽ theo dõi sự thay đổi của các đối tượng state, khi state thay đổi đồng thời trạng thái component thay đổi, lúc này React sẽ tự động render lại component để phản ánh những thay đổi này lên giao diện người dùng.

  • Khởi tạo và sử dụng state
import React, { Component } from 'react';
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

Ở đây, chúng ta sử dụng state count với giá trị ban đầu là 0. Trong phương thức render(), chúng ta sử dụng lại giá trị của nó với cú pháp this.state.count. Mỗi khi giá trị của count thay đổi thì giao diện người dùng cũng sẽ được cập nhật lại giá trị count mới nhất.

  • Cập nhật state

Với phương thức setState chúng ta có thể cập nhật lại dữ liệu của biến count. Như đã nói ở trên giao diện người dùng sẽ được cập nhật khi giá trị count thay đổi như sau:

import React, { Component } from 'react';
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  increaseCount() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increaseCount()}>Increase</button>
      </div>
    );
  }
}
  • Sử dụng state trong Function Components
import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Trong React Hooks, chúng ta sử dụng state bằng cách sử dụng hook useState, với hook này trả về một mảng. Trong đó, phần tử đầu tiên là giá trị hiện tại của state và phần tử thứ hai là một hàm để cập nhật state (setCount)

State là một trong những khái niệm quan trọng trong ReactJS, nó giúp quản lý trạng thái của các component và làm cho ứng dụng ReactJS trở nên động và phản ánh thay đổi lên giao diện người dùng.

Tổng kết

Các khái niệm cơ bản trên là nền tảng rất quan trọng trong ReactJS để có thể xây dựng một ứng dụng hiệu quả và dễ bảo trì trong tương lai. Việc hiểu rõ về cách tạo components, sử dụng props và quản lý state sẽ giúp chúng ta có thể làm việc với ReactJS một các hiệu quả và tốt hơn. Hy vọng rằng bài viết này đã cung cấp cho các bạn các thông tin hữu ích về những gì cơ bản nhưng cũng rất quan trọng trong ReactJS. Hẹn gặp lại các bạn trong những bài viết tiếp theo trong series về ReactJS này.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: