React を使用して応答性の高いバックエンド管理システムを開発する方法

React を使用して応答性の高いバックエンド管理システムを開発する方法

インターネットの急速な発展に伴い、ますます多くの企業や組織が効率的で柔軟なバックエンド管理システムを必要としています。日常の運用上の問題を処理するための、管理が簡単なバックエンド管理システム。現在最も人気のある JavaScript ライブラリの 1 つである React は、ユーザー インターフェイスを構築するための簡潔で効率的かつ保守しやすい方法を提供します。この記事では、React を使用して応答性の高いバックエンド管理システムを開発する方法と、具体的なコード例を紹介します。

1. React プロジェクトの作成

まず、React プロジェクトを作成および管理するために Node.js と npm をインストールする必要があります。コマンド ライン ツールを開き、次のコマンドを実行して新しい React プロジェクトを作成します。

npx create-react-app backend-system

これにより、backend-system という新しいディレクトリが作成され、React とその関連依存関係が自動的にインストールされます。

2. デザイン システムのレイアウト

バックグラウンド管理システムには、通常、サイドバーとメイン コンテンツ領域があります。 React コンポーネントを使用してレイアウト全体を構築できます。

まず、src ディレクトリに Layout という名前のフォルダーを作成し、その中に新しい Layout.js ファイルを作成します。 Layout.js ファイルでは、バックグラウンド管理システム全体のレイアウトとして Layout という名前の React コンポーネントを定義できます。

import React from 'react';

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

export default Layout;

3. サイドバーの作成

Layout コンポーネントで、ナビゲーション メニューを表示するサイドバーを作成する必要があります。 React のリスト レンダリング機能を使用してメニュー項目を生成できます。

Layout.js で、次のコードを追加します。

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. メイン コンテンツ領域を作成します

サイドバーに加えて、次のことも行う必要があります。メイン コンテンツ領域を作成して、各モジュールの特定のコンテンツを表示します。 Layout コンポーネントでは、React Router を使用してページのルーティングとレンダリングを実装できます。

まず、React Router をインストールする必要があります:

npm install react-router-dom

次に、Layout.js に React Router を導入し、特定のコンテンツ ページをレンダリングする MainContent という名前のコンポーネントを作成します。

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. レスポンシブ デザイン

バックグラウンド管理システムがさまざまなデバイス上で適切な表示効果を発揮できるようにするには、レスポンシブ デザインの機能を追加する必要があります。 React の CSS モジュール性は、この目標の達成に役立ちます。

まず、2 つのライブラリ クラス名と反応応答性をインストールする必要があります:

npm install classnames react-responsive

次に、これら 2 つのライブラリを Layout.js で使用して、応答性の高いデザインを実装できます。

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;

上記のコードでは、反応応答ライブラリの useMediaQuery フックを使用して、現在のデバイスがモバイル デバイスかどうかを判断します。さまざまな状況に応じて、さまざまなクラス名をレイアウト要素に追加して、さまざまなスタイルを実現できます。

6. スタイルの追加

最後に、バックグラウンド管理システムにいくつかのスタイルを追加する必要もあります。 CSS モジュール性を使用してスタイルを管理し、記述することができます。 src ディレクトリにstylesという名前のフォルダーを作成し、その中にlayout.module.cssという名前のファイルを作成します。

.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;
}

Layout.js では、CSS モジュール化を使用してスタイルを導入します。

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;

これまでのところ、React に基づいた応答性の高いバックエンド管理システムの開発が完了しました。もちろん、これは単なる例であり、実際のプロジェクトでは、特定のニーズに応じてさらに多くの機能やインターフェイスを開発する必要があります。この記事があなたのお役に立てば幸いです。ご不明な点がございましたら、お気軽にお問い合わせください。

以上がReact を使用して応答性の高いバックエンド管理システムを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。