React Component

Definition

Component ở trong React là một đoạn code nhỏ bao gồm nhiều JSX element mà có thể tái sử dụng và đóng góp một phần trong giao diện của ứng dụng. Một ứng dụng React được cấu thành từ nhiều component.

Component có thể là:

• Functional Component
• Class Component

Trong các phiên bản mới hơn của React, sự phân loại component là không cần thiết. Tuy nhiên, cũng cần phải hiểu sự phân loại này khi làm việc với các phiên bản cũ hơn.

Quy ước đặt tên cho component là PascalCase.

Rendering

Khi render một component, ta viết nó như là một HTML element:

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
 
const rootElement = document.getElementById("root")
const root = createRoot(rootElement)
 
function Form() {
  return (
    <form>
      <h3>Title</h3>
      <p>Description</p>
      <button>Submit</button>
    </form>
  )
}
 
root.render(
  <StrictMode>
    <Form />
  </StrictMode>,
)

Nếu chúng ta không muốn render ra một component nào đó, ta có thể trả về null thay vì trả về một JSX element:

function HiddenComponent() {
  return null
}

Resources

• Component • React