极客园PC-第1章 项目介绍与搭建

项目介绍

资料

• 短信接收&M端演示：http://geek.itheima.net/
• PC 端接口文档：http://geek.itheima.net/api-pc.html

项目介绍

「极客园」对标CSDN、博客园等竞品，致力成为更加贴近年轻 IT 从业者（学员）的科技资讯类应用
产品关键词：IT、极客、活力、科技、技术分享、前沿动态、内容社交
用户特点：年轻有活力，对IT领域前言科技信息充满探索欲和学习热情

• 极客园 PC 端项目：个人自媒体管理端
• 项目演示
• 项目功能，包括
  • 登录
  • 首页
  • 内容（文章）管理
    • 文章列表
    • 发布文章
    • 修改文章
• 技术栈：
  • react v17.0.2 / react-dom v17.0.2
  • ajax请求库：axios
  • 路由：react-router-dom 以及 history
  • 富文本编辑器：react-quill
  • CSS 预编译器：sass
  • UI 组件库：antd v4
  • 项目搭建：React 官方脚手架 create-react-app

项目搭建

创建项目

1. 使用 React CLI 搭建项目：npx create-react-app geek-pc
2. 进入项目根目录：`cd geek-pc
3. 启动项目：yarn start
4. 调整项目目录结构：

/src
  /assets         项目资源文件，比如，图片 等
  /components     通用组件
  /pages          页面
  /utils          工具，比如，token、axios 的封装等、
  /api            封装接口
  
  App.js          根组件
  index.css       全局样式
  index.js        项目入口

配置基础路由

• 安装路由：yarn add react-router-dom

• 在 pages 目录中创建两个页面：Login、Layout

src/pages/Layout/index.js

import { Component } from 'react'

class Layout extends Component {
  render() {
    return <div className="layout">首页布局</div>
  }
}

export default Layout

src/pages/Login/index.js

import { Component } from 'react'

class Login extends Component {
  render() {
    return <div className="login">登录页</div>
  }
}

export default Login

• 在 App 组件中，导入路由组件以及两个页面组件，配置路由规则

// 导入路由
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from 'react-router-dom'

// 导入页面组件
import Login from './pages/Login'
import Layout from './pages/Layout'

// 配置路由规则
function App() {
  return (
    <Router>
      <div className="App">
        {/* 路由规则 */}
        <Switch>
          <Redirect exact from="/" to="/home"></Redirect>
          <Route path="/home" component={Layout}></Route>
          <Route path="/login" component={Login}></Route>
        </Switch>
      </div>
    </Router>
  )
}

export default App

• 点击http://localhost:3000/login测试

组件库 - antd

Ant Design

antd PC 端组件库文档

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

开箱即用

1. 安装：yarn add antd
2. 使用：

// 1 在 index.js 中导入 antd 的样式文件
import 'antd/dist/antd.css'

// 2 在 Login 页面组件中，使用 antd 的 Button 组件
import { Button } from 'antd'

const Login = () => (
  <div>
    <Button type="primary">Button</Button>
  </div>
)