React? ???? ??? ??? ?? ???? ???? ??

???? ??? ???? ?? ?? ? ?? ??? ???? ???? ??? ???? ?? ????? ???? ???? ?? ??? ?? ???? ?????. . ?? ?? ?? ?? JavaScript ????? ? ??? React? ??? ?????? ???? ???? ????? ?? ?? ??? ??? ?????. ? ????? React? ???? ??? ??? ?? ???? ???? ??? ???? ???? ?? ??? ?????.

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

export default Layout;

3. ???? ??

???? ?????? ?? ??? ???? ?? ????? ???? ???. 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. ?? ??? ?? ???

???? ??? ? ??? ?? ???? ???? ?? ?? ??? ??? ???? ???. ???? ?? ????? 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} />
      // 其他路由規(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 ???? ??? ? ??? ???? ? ??? ? ? ????.

?? ??? ??? ?????? ? ?????? ???? ???.

npm install classnames react-responsive

?? ?? 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} />
      // 其他路由規(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 ??? ???? ?? ??? ??? ???? ?????. ??? ??? ?? ???? ??? ??? ??? ??? ???? ??? ???? ??? ? ????.

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>首頁</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? ???? ??? ??? ?? ???? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!