精简版掘金开发的十个要点

2023-10-30 10:46:24

一、技术指南

使用 React 框架
采用 RESTful API 架构
使用MongoDB数据库
使用Node.js 作为后端语言
使用 Docker 容器化应用

二、代码示例

// 创建 React 应用
npx create-react-app my-掘金-app

// 安装依赖项
npm install react-router-dom antd

// 创建路由组件
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/articles" component={Articles} />
        <Route path="/tags" component={Tags} />
      </Switch>
    </Router>
  );
};

export default App;

// 创建首页组件
import { Affix, Layout, Menu } from 'antd';
import React, { useState } from 'react';

const Home = () => {
  const [top, setTop] = useState(0);

  useEffect(() => {
    window.addEventListener('scroll', () => {
      const scrollTop = document.documentElement.scrollTop;
      if (scrollTop > top) {
        setTop(scrollTop);
      }
    });
    return () => {
      window.removeEventListener('scroll');
    };
  }, [top]);

  return (
    <Layout>
      <Affix offsetTop={top}>
        <Menu
          mode="horizontal"
          style={{ lineHeight: '64px' }}
        >
          <Menu.Item key="home">
            <Link to="/">首页</Link>
          </Menu.Item>
          <Menu.Item key="articles">
            <Link to="/articles">文章</Link>
          </Menu.Item>
          <Menu.Item key="tags">
            <Link to="/tags">标签</Link>
          </Menu.Item>
        </Menu>
      </Affix>
      <Content style={{ padding: '0 50px', marginTop: 64 }}>
        <div style={{ background: '#fff', padding: 24, minHeight: 380 }}>
          Content
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>掘金精简版 ©2023 Created by Ant UED</Footer>
    </Layout>
  );
};

export default Home;