Hướng dẫn tạo sidebar với Reactjs

Reactjs đang là một thư viện để hỗ trợ người dùng tạo website theo phong cách hiện đại mọi thứ được tối giản hóa giúp lập trình viên có thể dễ dàng thao tác với mã nguồn. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn tạo một sidebar đơn giản sử dụng functional component trong Reactjs với sự hỗ trợ của Typescript.

Điều kiện

  • Đã cài đặt npx, nếu bạn chưa cài đặt npx có thể sử dụng câu lệnh
npm install npx

Cài đặt thư viện hỗ trợ

Trước khi tiến hành lập trình, bạn cầ cài đặt thêm react-router-dom, styled-components, react-icons bằng câu lệnh sau:

npm i -D react-router-dom styled-components react-icons @types/react-router-dom @types/styled-components

Tiến hành lập trình

Sau khi cài đặt xong mã nguồn, tiến hành sửa file App.tsx

import React, { FC } from 'react';
import './App.css';
import Sidebar from './components/Sidebar';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Configurations, History, Order, Overview, Revenue, Users } from './pages/Overview';

const App: FC = () => {
    return (
        <Router>
            <Sidebar />
            <Switch>
                <Route path="/overview" component={Overview} exact></Route>
                <Route path="/overview/users" component={Users} exact></Route>
                <Route path="/overview/revenue" component={Revenue} exact></Route>
                <Route path="/order" component={Order} exact></Route>
                <Route path="/history" component={History} exact></Route>
                <Route path="/configurations" component={Configurations} exact></Route>
            </Switch>
        </Router>
    );
};

export default App;
  • Sau khi bạn sửa router, tiến hành thêm mới một số file Sidebar.tsx, SidebarData.tsx, Submenu.tsx, SidebarItem.ts theo cấu trúc

Github: https://github.com/toannguyen3105/reactjs-typscript-sidebar-vi-v1

Youtube: Quá trình thực hiện cụ thể

Kết thúc

Bạn đẫ có sidebar theo ý mình

Leave a Comment