Site icon Bệ Phóng Việt

ReactJS Bài 2: Tạo cấu trúc giao diện chung (Layout)

jphopeblog
Advertisements

Bài trước: ReactJS Bài 1: Khởi động dự án với reactjs

Trong bài này, chúng ta sẽ học cách tạo layout cho giao diện của ứng dụng reactjs. Layout thực chất là 1 reactjs component có thể sử dụng lại cho các màn hình khác nhau của ứng dụng.

Ví dụ bạn có thể có 1 layout chính cho ứng dụng và được các tài khoản user bình thưởng sử dụng, gọi là DefaultLayout và 1 layout cho các màn hình chỉ có admin sử dụng, gọi là AdminLayout

Trước hết chúng ta hãy làm quen với khái niệm component.

ReactJS component là gì?

Trong React, component là một đơn vị tái sử dụng được dùng để hiển thị giao diện người dùng (UI). Mỗi component là một class hoặc function có thể nhận dữ liệu từ nguồn khác nhau như props (thuộc tính) và trả về một thẻ HTML, một số JSX (JavaScript + XML), hoặc một component khác.

Để tạo một component trong React, bạn có thể sử dụng các cách sau:

Class component: là một class có thể nhận props và trả về một thẻ HTML hoặc JSX.

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

Function component: là một function có thể nhận props và trả về một thẻ HTML hoặc JSX.

import React from 'react';

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

export default Welcome;

Để sử dụng function component này trong một component khác, bạn có thể dùng nó như một thẻ HTML:

import Welcome from './Welcome';

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

Tạo component MenuBar

Như đã giới thiệu ở trên, ứng dụng của chúng ta sẽ có MenuBar với các item: Home, To-do, Settings. MenuBar này sẽ được xuất hiện ở layout chính của ứng dụng. Nhưng trước khi tạo layout, chúng ta sẽ viết đoạn code cho MenuBar trước:

  1. Tạo thư mục src/components.
  2. Tạo file src/components/MenuBar.js với nội dung sau: 
    import React from 'react';

function MenuBar() {
  return (
    <div>
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <a className="navbar-brand" href="#">My App</a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav">
            <li className="nav-item active">
              <a className="nav-link" href="/">Home</a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="/to-do">To-do</a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="/settings">Settings</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  );
}

export default MenuBar;

Tạo Footer component

Ngoài việc hiển thị MenuBar, chúng ta muốn tất cả các trang mặc định cho người sử dụng cũng hiện Footer với nội dung như Contact (Liên hệ), About (Giới thiệu).

Chúng ta sẽ tạo Footer component cho việc này. Trong file /src/components/Footer.js nhập đoạn code sau:

import React from 'react';

function Footer() {
  return (
    <div>
      <a href="#">Contact us</a> | <a href="#">About us</a>
    </div>
  );
}

export default Footer;

Tạo DefaultLayout

Chúng ta muốn ứng dụng của mình có khung trình bầy giống nhau ở các screen cùng nhóm cho người sử dụng. Layout chính là khung trình bầy đó.

DefaultLayout mà chúng ta sẽ xây dựng bao gồm có MenuBar ở trên cùng, nội dung của trang ở giữa và chân trang (Footer) ở dưới cùng.

Bạn hãy tạo folder src/layouts với file DefaultLayout.js trong thư mục này. Copy nội dung code sau:

import React from "react";
import MenuBar from "../components/MenuBar";
import Footer from "../components/Footer";

const DefaultLayout = ({title = "Title", className, children}) => {
  return (
    <div class="container">
      <MenuBar />
      <h2>{title}</h2>
      <div. className={className}>{children}</div>
      <hr/>
      <Footer />
    </div>
  );
}

export default DefaultLayout

Như bạn thấy, thực ra DefaultLayout chúng chính là 1 component mà thôi.

Đây là 1 component chung cho toàn bộ layout của ứng dụng (hoặc trang bạn muốn), bao gồm MenuBar, Footer và phần nội dung được truyền vào.

Hàm “DefaultLayout” nhận vào 3 props:

  1. title,
  2. className và
  3. children.

Props “title” là tiêu đề của trang, “className” là tên (các) class của phần nội dung, “children” là nội dung truyền vào. Chú ý các tên này của 3 props đã được khai báo sẵn trong ReactJS, chứ không phải tên bạn tự đặt.

Trong hàm render của component, nó sẽ hiển thị 3 phần chính: MenuBar, tiêu đề và nội dung truyền vào, và Footer.

Ở bài tiếp theo, chúng ta sẽ học cách cử dụng Layout này cho trang Home và trang To-do.

Bài tiếp theo: ReactJS Bài 3: Xây dựng nội dung trang với Layout đã tạo

Exit mobile version