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

  • 项目功能和演示，包括
    • 登录、退出
    • 首页
    • 内容（文章）管理：文章列表、发布文章、修改文章
  • 技术栈：
    • 项目搭建：React 官方脚手架 create-react-app
    • react hooks
    • 状态管理：redux，以及：react-redux 绑定库、redux-thunk 中间件、redux-devtools-extension 中间件
    • UI 组件库：antd v4
    • ajax请求库：axios
    • 路由：react-router-dom 以及 history
    • 富文本编辑器：react-quill
    • CSS 预编译器：sass
    • CSS Modules 避免组件之间的样式冲突

      项目搭建

      目标：能够基于脚手架搭建项目基本结构步骤：
  1. 使用 React CLI 搭建项目：npx create-react-app geek-pc-138
  2. 进入项目根目录：cd geek-pc-138
  3. 启动项目：npm start
  4. 调整项目目录结构：
  5. 修改页面标题

/src /assets 项目资源文件，比如，图片 等 /components 通用组件 /pages 页面组件 /store Redux 状态仓库 /utils 工具，比如，token、axios 的封装等 App.css 根组件样式文件 App.js 根组件 index.css 全局样式 index.js 项目入口
核心代码：
src/index.js 中：
import React from ‘react’import ReactDOM from ‘react-dom’import ‘./index.css’import App from ‘./App’ ReactDOM.render( , document.querySelector(‘#root’))
src/App.js 中：
import ‘./App.css’ function App() { return

} export default App
public/index.html 中：

注：为了统一操作，直接删除 src 下的所有文件后，再调整

使用 git/gitee 管理项目

目标：能够将项目推送到 gitee 远程仓库步骤：

  1. 在项目根目录打开终端，并初始化 git 仓库（如果已经有了 git 仓库，无需重复该步），命令：git init
  2. 添加项目内容到暂存区：git add .
  3. 提交项目内容到仓库区：git commit -m 项目初始化
  4. 添加 remote 仓库地址：git remote add origin [gitee 仓库地址]
  5. 将项目内容推送到 gitee：git push origin master -u
  • 以后只需要：git push origin 即可
  • 代码仓库地址：https://gitee.com/zhoushugang/react-geek-pc-138

    使用CSS预编译器 - SASS

    目标：能够在 CRA 中使用 sass 写样式
    内容：
    SASS 是一种预编译的 CSS，作用类似于 Less、stylus。由于 React 中内置了处理 SASS 的配置，所以，在 CRA 创建的项目中，可以直接使用 SASS 来写样式。
    SASS 支持两种后缀，分别是：.sass 和 .scss。区别如下：
  1. .sass 是一种简化语法形式（用缩进代替 {} 、用换行代替;）

.button display: inline-flex border: none &:hover cursor: pointer

  1. .scss 是传统的语法形式【推荐使用】

.button { display: inline-flex; border: none; &:hover { cursor: pointer; }}
步骤：

  1. 安装解析 sass 的包：yarn add sass
  2. 将全局样式文件 index.css 修改为index.scss，并修改 index.js 中导入的样式文件后缀
  3. 将 App.css 修改为 App.scss ，并修改 App.js 中导入样式文件的后缀

核心代码：
src/index.scss 中：
html, body, #root { height: 100%;}
src/index.js 中：
import ‘./index.scss’

配置基础路由

目标：能够配置登录页面的路由并显示在页面中步骤：

  1. 安装路由：yarn add react-router-dom@5.3.0
  2. 在 pages 目录中创建2个文件夹：Login、Layout
  3. 分别在2个目录中创建 index.js 文件，并创建一个简单的组件后导出
  4. 在 App 组件中，导入路由组件以及 2 个页面组件
  5. 配置 Login、Layout的路由规则

核心代码：
pages/Login/index.js 中：
const Login = () => { return

登录页面
}export default Login
App.js 中：
// 导入路由import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’ // 导入页面组件import Login from ‘./pages/Login’import Layout from ‘./pages/Layout’ // 配置路由规则function App() { return (
)} export default App

组件库 - antd

目标：能够使用 antd 的 Button 组件渲染按钮
内容：
Ant Designantd PC 端组件库文档
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。开箱即用
步骤：

  1. 安装 antd 组件库：yarn add antd
  2. 全局导入 antd 组件库的样式
  3. 导入 Button 组件
  4. 在 Login 页面渲染 Button 组件

核心代码：
src/index.scss 中：
// 引入antd的样式@import ‘~antd/dist/antd.css’;
pages/Login/index.js 中：
import { Button } from ‘antd’ const Login = () => (

)
总结：

  1. 在哪个文件中导入 antd 的样式文件？ index.js 文件中
  2. antd 的样式文件和我们自己的全局样式文件的导入顺序？ 先导入 antd 的样式，再导入自己的全局样式文件

    配置路径别名

    目标：能够配置@路径别名简化路径处理
    内容：
    文档：antd 自定义 CRA 的默认配置文档：craco 配置文档
  • 注意：CRA 将所有工程化配置，都隐藏在了 react-scripts 包中，所以，项目中看不到任何配置信息
  • 如果要修改 CRA 的默认配置，有以下几种方案：
    1. 【推荐】通过第三方库来修改，比如，@craco/craco
    2. 通过执行 yarn eject 命令，释放 react-scripts 中的所有配置到项目中（注意：该操作不可逆！！！）

步骤：

  1. 安装修改 CRA 配置的包：yarn add -D @craco/craco
  2. 在项目根目录中创建 craco 的配置文件：craco.config.js，并在配置文件中配置路径别名
  3. 修改 package.json 中的脚本命令
  4. 在代码中，就可以通过 @ 来表示 src 目录的绝对路径
  5. 重启项目，让配置生效

核心代码：
/craco.config.js 中：
const path = require(‘path’) module.exports = { // webpack 配置 webpack: { // 配置别名 alias: { // 约定：使用 @ 表示 src 文件所在路径 ‘@’: path.resolve(__dirname, ‘src’) } }}
package.json 中：
// 将 start/build/test 三个命令修改为 craco 方式 “scripts”: { “start”: “craco start”, “build”: “craco build”, “test”: “craco test”, “eject”: “react-scripts eject”},

@别名路径提示

目标：能够让vscode识别@路径并给出路径提示
分析说明：
在 VSCode 中，jsconfig.json 文件中的有时候会有红色波浪线提示错误，直接忽略即可，不会影响路径提示
步骤：

  1. 在项目根目录创建 jsconfig.json 配置文件
  2. 在配置文件中添加以下配置

核心代码：
/jsconfig.json 中：
{ “compilerOptions”: { “baseUrl”: “./“, “paths”: { “@/“: [“src/“] } }}
总结：

  1. VSCode 会自动读取 jsconfig.json 中的配置，让 vscode 知道 @ 就是 src 目录