Người viết: Trung Hiếu
Gmail: buihieu3008@gmail.com
Bài viết gốc: https://www.freecodecamp.org/news/react-components-jsx-props-for-beginners/

  • React là một trong những thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng.
  • Nếu bạn muốn trở thành front-end Developer hoặc một công việc phát triển website, thì React sẽ giúp đỡ bạn rất nhiều.
  • Trong bài viết này, bạn sẽ tìm hiểu một số kiến thức cơ bản về React như tạo một Component, cú pháp JSX và Props. Nếu bạn không có hoặc ít kinh nghiệm với React, bài viết này sẽ giúp ích cho bạn.

JSX là gì?

  • Điều đầu tiên bạn sẽ nhận ra sau khi cài đặt dự án React đầu tiên của mình là một hàm JavaScript trả về một số mã HTML:
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}
  • Đây là phần mở rộng đặc biệt và hợp lệ cho React gọi là JSX (JavaScript XML). Thông thường trong các dự án liên quan đến giao diện người dùng, chúng ta tách mã HTML, CSS, JavaScript ra các tệp riêng biệt. Tuy nhiên trong React thì hoạt động hơi khác một chút.
  • Trong các dự án React chúng ta không tạo ra các file HTML riêng biệt, vì JSX cho phép chúng ta viết HTML và JavaScript kết hợp với nhau trong cùng một file như ví dụ trên. Tuy nhiên có thể tách CSS của mình ra một file riêng.
  • Đối với người mới JSX có thể hơi lạ, nhưng đừng lo lắng rồi bạn sẽ quen nó thôi.
  • JSX rất thực tế chúng ta có thể thực hiện bất kể mã JavaScript nào (logic, hàm, biến,…) bên trong mã HTML trực tiếp bằng cách sử dụng dấu {} như sau:
function App() {
  const text = 'Hello World';
  
  return (
    <div className="App">
      <p> {text} </p>
    </div>
  );
}
  • ngoài ra bạn có thể gán các thẻ HTML cho các biến JavaScript:
const message = <h1>React is cool!</h1>;
  • Hoặc bạn có thể trả về HTML bên trong logic JavaScript (chẳng hạn như truờng hợp if-else)
render() {
    if(true) {
        return <p>YES</p>;
    } else {
        return <p>NO</p>;
    }
}

Chúng ta sẽ không đi sâu hơn vào chi tiết về JSX, nhưng hãy đảm bảo những quy tắc sau khi viết JSX:

  • HTML và các thẻ Component phải luôn được đóng </>
  • Một số thuộc tính như “class” đổi thành “className” (vì class đề cập đến các lớp JavaScript), “tabindex” trở thành “tabIndex” và phải được viết theo camelCase.
  • React không thể trả về nhiều phần tử HTML cùng một lúc, vì vậy hãy đảm bảo chúng được đặt trong thẻ cha:
return (
  <div>
    <p>Hello</p>
    <p>World</p>
  </div>
);
  • Hoặc có thể đặt chúng trong thẻ trống <> </>
return (
  <>
    <p>Hello</p>
    <p>World</p>
  </>
);

Functional & Class Components là gì?

Sau khi làm quen với cú pháp JSX, điều tiếp theo cần hiểu là cấu trúc dựa trên các Component của React.
Nếu bạn xem lại ví dụ đầu tiên ở bên trên bạn sẽ thấy mã JSX đang được trả về bởi một function. Nhưng hàm App() này không phải là một hàm thông thường nó là một Component. Vậy Component là gì?

Component là gì?

Component là một đoạn mã độc lập, có thể tái sử dụng, chi giao diện người dùng thành các phần nhỏ hơn. Ví dụ: Xây dựng dao diện người dùng Twitter với React:

twitter

Thay vì xây dựng giao diện người dùng trong một file duy nhất chúng ta có thể và nên chia nhỏ các Component (được đánh dấu bằng màu đỏ) thành các thành phần độc lập. Nói cách khác đây là Component.
Trong React có hai loại Component chính là: FunctionalClass. Bây giờ hãy tìm hiểu kỹ hơn.

Functional Components

Loại thành phần đầu tiên và được đề xuất trong React là Functional Components. Functional Components cơ bản là một hàm JavaScript/ES6 trả về một phần tử React(JSX). Theo tài liệu mới nhất thì Functional Components là một hàm hợp lệ.

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

Ngoài ra bạn cũng có thể dùng Arrow Function để tạo Functional Components:

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

Để có thể sử dụng Component đầu tiên chúng ta cần export và để một Component khác có thể nhận được thì cần phải import vào:

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

export default Welcome;

Sau khi import chúng ta có thể gọi Component như ví dụ dưới đây:

import Welcome from './Welcome';

function App() { 
  return (
    <div className="App">
      <Welcome />
    </div>
  );
}

Vì vậy, một Functional Components:

  • Là một hàm JavaScript/ES6.
  • Phải trả về một phần tử React(JSX).
  • Luôn bắt đầu bằng một chữ cái viết hoa (quy ước đặt tên).
  • Lấy props làm tham chiếu nếu cần thiết.

Class Components

Loại Component thứ hai là Class Components. Class Components là các lớp ES6 trả về JSX. Dưới đây là Welcome function, nhưng lần này là Class Components:

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

Khác với functional components, Class components cần thêm phương thức render() để trả về JSX.

Tại sao dùng Class Components

Chúng ta đã từng sử dụng Class Componentsstate. Trong các phiên bản React cũ hơn(version < 16.8) không thể sử dụng state bên trong Functional components.
Chúng ta chỉ dùng Functional components để hiện thị giao diện người dùng, trong khí đó sử dụng Class Components để quản lý dữ liệu và một số phương thức khác.
Nhưng từ khi React Hook ra đời điều này đã thay đổi và bây giờ chúng ta có thể sử dụng state trong Functional components
Class Component:

  • Lấy props (trong constructor) nếu cần.
  • Phải có cần phương thức render() để trả về JSX.

Props trong React là gì?

Một khái niệm quan trọng khác của các components là cách chúng giao tiếp. React có một object đặc biệt gọi là props (viết tắt của property) mà chúng ta sử dụng để chuyền dữ liệu từ Component này qua Component khác.
Nhưng hãy cẩn thần props chỉ truyền dữ liệu theo luồng một chiều (từ component cha sang component con). Props không thể truyền dữ liệu từ con sang cha và các component cùng cấp.
Hãy truy cập function App() ở trên để xem cách truyền dữ liệu bằng props
Đầu tiên chúng ta cần xác định props ở function Welcome và gán giá trị cho nó:

import Welcome from './Welcome';

function App() { 
  return (
    <div className="App">
      <Welcome name="John"/>
      <Welcome name="Mary"/>
      <Welcome name="Alex"/>
    </div>
  );
}

Props là các giá trị tùy chính và chúng giúp cho component linh động hơn. Ở đây component Welcome là thành phần con chúng ta cẫn xác định props trên thành phần ca của nó (App()), vì vậy chúng ta có thể chuyển các giá trị và nhận kết quả bằng cách truy cập vào prop “name”:

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

props

Cảm ơn các bạn đã đọc bài viết!!!