極客園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>
)