How to use React to develop a responsive backend management system

How to use React to develop a responsive backend management system

With the rapid development of the Internet, more and more companies and organizations need an efficient, flexible, and Easy-to-manage backend management system to handle daily operational matters. As one of the most popular JavaScript libraries currently, React provides a concise, efficient and maintainable way to build user interfaces. This article will introduce how to use React to develop a responsive backend management system and give specific code examples.

1. Create React Project

First, we need to install Node.js and npm to create and manage React projects. Open the command line tool and execute the following command to create a new React project:

npx create-react-app backend-system

This will create a new directory called backend-system and automatically install React and its related dependencies.

2. The layout of the design system

In the background management system, there is usually a sidebar and a main content area. We can use React components to build the entire layout.

First, create a folder named Layout in the src directory and create a new Layout.js file in it. In the Layout.js file, we can define a React component named Layout as the layout of the entire background management system.

import React from 'react';

const Layout = () => {
  return (
    <div className="layout">
      <div className="sidebar">
        {/* 侧边栏的内容 */}
      </div>
      <div className="content">
        {/* 主要内容区域的内容 */}
      </div>
    </div>
  );
}

export default Layout;

3. Create a sidebar

In the Layout component, we need to create a sidebar to display the navigation menu. We can use React's list rendering functionality to generate menu items.

In Layout.js, add the following code:

import React from 'react';

const Layout = () => {
  const menuItems = [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/users' },
    { title: '订单管理', path: '/orders' },
    // 其他菜单项
  ];

  return (
    <div className="layout">
      <div className="sidebar">
        <ul>
          {menuItems.map((item, index) => (
            <li key={index}>
              <a href={item.path}>{item.title}</a>
            </li>
          ))}
        </ul>
      </div>
      <div className="content">
        {/* 主要内容区域的内容 */}
      </div>
    </div>
  );
}

export default Layout;

4. Create the main content area

In addition to the sidebar, we also need to create a main content area to display the specific content of each module. In the Layout component, we can use React Router to implement page routing and rendering.

First, we need to install React Router:

npm install react-router-dom

Then, introduce React Router in Layout.js and create a component named MainContent to render the specific content page.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = () => <h1 id="首页">首页</h1>;
const Users = () => <h1 id="用户管理">用户管理</h1>;
const Orders = () => <h1 id="订单管理">订单管理</h1>;
// 其他页面组件

const MainContent = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/orders" component={Orders} />
      // 其他路由规则
    </Switch>
  );
}

const Layout = () => {
  const menuItems = [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/users' },
    { title: '订单管理', path: '/orders' },
    // 其他菜单项
  ];

  return (
    <Router>
      <div className="layout">
        <div className="sidebar">
          <ul>
            {menuItems.map((item, index) => (
              <li key={index}>
                <a href={item.path}>{item.title}</a>
              </li>
            ))}
          </ul>
        </div>
        <div className="content">
          <MainContent />
        </div>
      </div>
    </Router>
  );
}

export default Layout;

5. Responsive design

In order to make the background management system have good display effects on different devices, we need to add the function of responsive design. React's CSS modularity can help us achieve this goal.

First, we need to install the two libraries classnames and react-responsive:

npm install classnames react-responsive

Then, we can use these two libraries in Layout.js to implement responsive design.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { useMediaQuery } from 'react-responsive';
import classNames from 'classnames';

const Home = () => <h1 id="首页">首页</h1>;
const Users = () => <h1 id="用户管理">用户管理</h1>;
const Orders = () => <h1 id="订单管理">订单管理</h1>;
// 其他页面组件

const MainContent = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/orders" component={Orders} />
      // 其他路由规则
    </Switch>
  );
}

const Layout = () => {
  const menuItems = [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/users' },
    { title: '订单管理', path: '/orders' },
    // 其他菜单项
  ];

  const isMobile = useMediaQuery({ maxWidth: 767 });

  return (
    <Router>
      <div className={classNames('layout', { 'mobile': isMobile })}>
        <div className="sidebar">
          <ul>
            {menuItems.map((item, index) => (
              <li key={index}>
                <a href={item.path}>{item.title}</a>
              </li>
            ))}
          </ul>
        </div>
        <div className="content">
          <MainContent />
        </div>
      </div>
    </Router>
  );
}

export default Layout;

In the above code, we use the useMediaQuery hook in the react-responsive library to determine whether the current device is a mobile device. According to different situations, we can add different class names to layout elements to achieve different styles.

6. Add styles

Finally, we also need to add some styles to the background management system. We can use CSS modularity to manage and write styles. Create a folder named styles in the src directory and create a file named layout.module.css in it.

.layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 240px;
  background: #f0f0f0;
  padding: 20px;
}

.content {
  flex: 1;
  padding: 20px;
}

.mobile .sidebar {
  display: none;
}

.mobile .content {
  width: 100%;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  color: #ff6600;
}

In Layout.js, use CSS modularization to introduce styles.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { useMediaQuery } from 'react-responsive';
import classNames from 'classnames';
import styles from './styles/layout.module.css';

const Home = () => <h1 id="首页">首页</h1>;
const Users = () => <h1 id="用户管理">用户管理</h1>;
const Orders = () => <h1 id="订单管理">订单管理</h1>;
// 其他页面组件

const MainContent = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/orders" component={Orders} />
      // 其他路由规则
    </Switch>
  );
}

const Layout = () => {
  const menuItems = [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/users' },
    { title: '订单管理', path: '/orders' },
    // 其他菜单项
  ];

  const isMobile = useMediaQuery({ maxWidth: 767 });

  return (
    <Router>
      <div className={classNames(styles.layout, { [styles.mobile]: isMobile })}>
        <div className={styles.sidebar}>
          <ul>
            {menuItems.map((item, index) => (
              <li key={index}>
                <a href={item.path}>{item.title}</a>
              </li>
            ))}
          </ul>
        </div>
        <div className={styles.content}>
          <MainContent />
        </div>
      </div>
    </Router>
  );
}

export default Layout;

So far, we have completed the development of a responsive backend management system based on React. Of course, this is just a simple example. In actual projects, more functions and interfaces need to be developed according to specific needs. I hope this article can help you, if you have any questions, please feel free to ask.

The above is the detailed content of How to use React to develop a responsive backend management system. For more information, please follow other related articles on the PHP Chinese website!