React.js Component

React.js Component

  • Như đã giới thiệu ở bài React.js là gì?, React chia nhỏ các phần của trang thành từng phần riêng biệt, gọi là component, ví dụ như các phần: header, footer, sidebar, navigation, itemList, ... .
  • Tính chất của component giống như một hàm (function) Javascript, có thể tái sử dụng ở nhiều nơi khác nhau.

Cách viết một component

  • Viết dưới dạng function (hoặc Class - nói ở bài sau), và function luôn được return.
  • Bên trong return luôn tồn tại tag bao ngoài tất cả (tag wrap).
  • Sử dụng thư viện React.DOM để render một component.
  • Function render phải có cấu trúc XML, viết dưới dạng <Tên /> hoặc <Tên></Tên>

Để hiểu hơn về component ta tạo một file index.html với nội dung sau:

Chú ý là chúng ta tạm thời sẽ sử dụng cách cài đặt trực tiếp React.js để hiểu các khái niệm cũng như tính năng của React nhé, sau này tới bài thao tác Project chúng ta sẽ thực hành Project React cài đặt bằng lệnh sau.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Component</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="member"></div>

    <script type="text/babel">
      function Member(){
        return(
          <div className="member">
            <h2>Nguyễn Văn A</h2>
            <p>Tuổi: 25</p>
          </div>
        )
      };

      ReactDOM.render(
        <Member />,
        document.getElementById('member')
      );
    </script>
  </body>
</html>

Hiển thị trình duyệt

Nguyễn Văn A

Tuổi: 25

Làm thử!

  • Function Member() đóng vai trò là một component, nhiệm vụ là tạo một đối tượng member với tên và tuổi.
  • ReactDOM.render giữ vai trò render nội dung ra trình duyệt, dựa vào id="member".

Cách tạo và include component

  • Giả sử ta có nhiều component khác nhau trong một trang, mỗi component có một nhiệm vụ riêng, Ví dụ:
    • Component avatar dành để xử lý hình ảnh member.
    • Component memberInfo dành để hiển thị thông tin member như tên, tuổi.
    • Component comment dành để quản ý bình luận của member.
  • Nhiệm vụ của ta là làm sao viết kết hợp các component này lại để hiển thị thông tin cho member, ta làm như sau:

Viết lại index.html với nội dung tách riêng các component: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Component</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="member"></div>

    <script type="text/babel">
      function Avatar(){
        return(
          <div className="avatar">
            <img src="img_avatar.jpg" alt="" />
          </div>
        )
      };

      function MemberInfo(){
        return(
          <div className="info">
            <h2>Nguyễn Văn A</h2>
            <p>Tuổi: 25</p>
          </div>
        )
      };

      function Comment(){
        return(
          <div className="comment">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit proin sit amet neque.
          </div>
        )
      };

      function Member(){
        return(
          <div className="member">
            <Avatar />
            <MemberInfo />
            <Comment />
          </div>
        )
      };

      ReactDOM.render(
        <Member />,
        document.getElementById('member')
      );
    </script>
  </body>
</html>

Hiển thị trình duyệt

Nguyễn Văn A

Tuổi: 25

Lorem ipsum dolor sit amet, consectetur adipiscing elit proin sit amet neque.

Làm thử!

  • Với ví dụ trên, các bạn sẽ thấy việc tạo component rất đơn giản, chỉ cần tách các phần riêng biệt cho từng chức năng khác nhau, là ta đã có được các component, việc này thuận lợi trong việc sử lý các phần riêng mà không bị ảnh hưởng hay bị phân tâm với các component khác.
  • Khi làm thực tế, ta cần tách từng component ra riêng một file Javascript để tiện sử dụng, cách làm như thế nào sẽ được giới thiệu sau nhé.

Một vấn đề khác: Như đã nói component có thể tái sử dụng được, vậy với nội dung cố định như trên thì làm sao ta có thể tạo thêm được một member khác được?, không lẽ cần phải viết thêm một component mới? rất may là không cần, React có một khái niệm gọi là Props, giúp component truyền tham số dễ dàng cho các đối tượng, cùng xem tiếp bài học về React.js Props nhé.

Cấu trúc JSX

React.js Props