ホームページ > 記事 > ウェブフロントエンド > React を使用して応答性の高いバックエンド管理システムを開発する方法

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

王林オリジナル: 2023-09-28 16:55:48957ブラウズ

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

React プロジェクトの作成

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

npx create-react-app backend-system

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

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

バックグラウンド管理システムには、通常、サイドバーとメインコンテンツ領域があります。 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;

サイドバーの作成

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;

メインコンテンツ領域を作成します

サイドバーに加えて、次のことも行う必要があります。メインコンテンツ領域を作成して、各モジュールの特定のコンテンツを表示します。 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>首页</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} />
      // 其他路由规则
    </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;

レスポンシブデザイン

バックグラウンド管理システムがさまざまなデバイス上で適切な表示効果を発揮できるようにするには、レスポンシブデザインの機能を追加する必要があります。 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>首页</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} />
      // 其他路由规则
    </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 フックを使用して、現在のデバイスがモバイルデバイスかどうかを判断します。さまざまな状況に応じて、さまざまなクラス名をレイアウト要素に追加して、さまざまなスタイルを実現できます。

スタイルの追加

最後に、バックグラウンド管理システムにいくつかのスタイルを追加する必要もあります。 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>首页</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} />
      // 其他路由规则
    </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 サイトの他の関連記事を参照してください。

JavaScript css npm class JS router

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：React Query でデータの増分更新を実装するにはどうすればよいですか?次の記事：React Query でデータの増分更新を実装するにはどうすればよいですか?

続きを見る