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

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

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

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

npx create-react-app backend-system

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

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

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

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

import React from 'react';

const Layout = () => {
  return (
    <div className="layout">
      <div className="sidebar">
        {/* 側(cè)邊欄的內(nèi)容 */}
      </div>
      <div className="content">
        {/* 主要內(nèi)容區(qū)域的內(nèi)容 */}
      </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">
        {/* 主要內(nèi)容區(qū)域的內(nèi)容 */}
      </div>
    </div>
  );
}

export default Layout;

4. メイン コンテンツ領(lǐng)域を作成します

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

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

npm install react-router-dom

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

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

const Home = () => <h1>首頁</h1>;
const Users = () => <h1>用戶管理</h1>;
const Orders = () => <h1>訂單管理</h1>;
// 其他頁面組件

const MainContent = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/orders" component={Orders} />
      // 其他路由規(guī)則
    </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 で使用して、応答性の高いデザインを?qū)g裝できます。

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>首頁</h1>;
const Users = () => <h1>用戶管理</h1>;
const Orders = () => <h1>訂單管理</h1>;
// 其他頁面組件

const MainContent = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/orders" component={Orders} />
      // 其他路由規(guī)則
    </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 フックを使用して、現(xiàn)在のデバイスがモバイル デバイスかどうかを判斷します。さまざまな狀況に応じて、さまざまなクラス名をレイアウト要素に追加して、さまざまなスタイルを?qū)g現(xiàn)できます。

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 モジュール化を使用してスタイルを?qū)毪筏蓼埂?

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>首頁</h1>;
const Users = () => <h1>用戶管理</h1>;
const Orders = () => <h1>訂單管理</h1>;
// 其他頁面組件

const MainContent = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/orders" component={Orders} />
      // 其他路由規(guī)則
    </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 を使用して応答性の高いバックエンド管理システムを開発する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。