Component React là gì? Code ví dụ component trong ReactJS

Posted on by cuongth

Component React là gì? Code ví dụ component trong ReactJS.

Component React là gì?

  • Trong React, các component hoạt động giống như các hàm trả về các thành phần HTML
  • Các component là các thành phần độc lập và có thể sử dụng lại.
  • Các component thực hiện công việc giống như các functions trong JavaScript nhưng chúng độc lập và nhiệm vụ chính là trả về HTML thông qua hàm render
  • Có 2 loại component là Function Component và Class Component.

Code ví dụ React Component

Trong ví dụ này mình sẽ thực hiện render message hello world bằng Function Component và Class Component.

Tạo file index.html

<html>
<head>
  <title>stackjava: ReactJS hello world!</title>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
  <div id='root'></div>
  <script src="index.jsx" type="text/babel"></script>

</body>
</html>

Tạo file index.jsx chứa code react

Trường hợp sử dụng class component:

Để tạo một class component, ta tạo một class và extends React.Component, hàm render chính là html và component trả về

// Create a ES6 class component
class Message extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      content: "Hello World!"
    };
  }
  // Use the render function to return JSX component
  render() {
    return (
         <p>{this.state.content}</p>
      );
    }
}
 
const element1 = document.getElementById('root')
 
// Use the ReactDOM.render to show your component on the browser
ReactDOM.render(
    <Message />, element1
)

Trường hợp sử dụng function component:

function component chính là một function với response đầu ra là html

const element1 = document.getElementById('root')
 
function Car() {
  return <p>Hello World!</p>;
}
ReactDOM.render(<Car />, element1);

Trường hợp không sử dụng component:

const element1 = document.getElementById('root')
const content = <p>Hello World!</p>;
ReactDOM.render(content, element1);

Chạy file index.html và 1 trong 3 file index.jsx ở trên trong http server ta đều được một kết quả giống nhau.

(Xem lại: ví dụ react hello world)

Component React là gì? Code ví dụ component trong ReactJS

Rõ ràng việc dùng component react  giúp ta đóng gọi lại html thành các thành phần nhỏ (có thể dùng lại được). Dễ dàng khởi tạo giao diện hoặc render lại giao diện bằng cách thay đổi state (với class component) hoặc tham số đầu vào với (function component)

 

Okay, Done!

References:

https://reactjs.org/docs/components-and-props.html

stackjava.com