Component trong ReacJS

• 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, … .
• 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.
• Viết dưới dạng function (hoặc Class ), và function luôn được return.
• Bên trong return luôn tồn tại tag bao ngoài tất.
• 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>

Ví dụ:

File src/App.js:

import "./App.css";
import SideBar from "./component/Layout/SideBar";
import React, { Component } from "react";

class App extends Component {
  render() {
    return (
        <SideBar />
    );
  }
}

export default App;

File component/Layout/SideBar:

import React, { Component } from "react";
import { BrowserRouter as Link, NavLink } from "react-router-dom";

class SideBar extends Component {
  render() {
    return (
      <aside className="main-sidebar sidebar-dark-primary elevation-4">
        <Link to="/">
          <span className="brand-link text-center">
            <span className="brand-text font-weight-light">Demo ReactJS</span>
          </span>
        </Link>
        <div className="sidebar">
          <nav className="mt-2">
            <ul
              className="nav nav-pills nav-sidebar flex-column"
              data-widget="treeview"
              role="menu"
              data-accordion="false"
            >
              <li className="nav-item">
                <NavLink to="/home" className="nav-link">
                  <i className="nav-icon fa fa-home"></i>
                  <p>Home</p>
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink to="/users" className="nav-link">
                  <i className="nav-icon fa fa-users"></i>
                  <p>Users</p>
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink to="/users_redux" className="nav-link">
                  <i className="nav-icon fa fa-users"></i>
                  <p>Users Redux</p>
                </NavLink>
              </li>
            </ul>
          </nav>
        </div>
      </aside>
    );
  }
}

export default SideBar;

• Với ví dụ trên, ta 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, sau đó ta import các component vào và sử dụng