7-从零开始学react - 全家桶项目实战

react-cnode实战项目

学习了一系列的react基础知识。接下来要实践一个小项目加强巩固下。
本项目代码放在github：react_cnode项目代码传送门

资源参考

• https://github.com/motao314/React_cNode

技术栈

• react
• react-router-dom
• redux
• react-redux
• redux-thunk
• axios
• antd

create-react-app 项目 引入antd

antd官网最新提供的：在 create-react-app 中使用，引入less后会报错。找到一个插件 craco-antd

craco-antd包括：支持less 通过craco-less; babel-plugin-import 按需引入antd; 很方便的方式去配置主题

安装依赖

yarn add @craco/craco craco-less craco-antd antd

自定义主题颜色

这有一份所有主题配置列表文件

自定义主题有2种方式:

一. 根目录下的文件 antd.customize.less 中配置

在你的文件根目录下新建文件 antd.customize.less

@primary-color: #1da57a;
@link-color: #1da57a;

二. 根目录下的 craco.config.js 配置 customizeTheme 对象

在你的文件根目录下新建文件 craco.config.js

const CracoAntDesignPlugin = require("craco-antd");
 
module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeTheme: {
          "@primary-color": "#1DA57A",
          "@link-color": "#1DA57A"
        }
      }
    }
  ]
};

修改css文件

修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.less';

引入 button 组件

import React from 'react';
import { Button } from 'antd';
import './App.less';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

可以看到页面上的button是从默认的蓝色的变成了绿色的，然后可以愉快的开始业务编码了。

数据来源

仿写页面-cnode官网

cnode数据-官方开放api

业务编码之…

页面

• 首页（主题列表）
• 主题详情
• 用户详情
• 关于 (静态数据)
• 教程 (静态数据)

路由

• 项目需要划分2块路由，全局路由(首页/关于/教程/用户页/主题详情) 和 首页路由(全部/精华/问答/分享/招聘/测试)
• 全局路由先匹配出首页面 (attention, 这里不可用exact):
• 首页面HomePage 再 展示出路由渲染首页面下不同类型的页面

版本 branchs

• simpleVersion 未使用redux
• reduxVersion1 使用redux + class
  • 引入react, react-redux, 创建reducer,action和store
  • 首页/主题详情/用户详情，分别建立reducer
  • 请求接口的方法和dispatch触发action都存放在actions.js
  • 需要仓库的页面，用connect传递state和dispatch; 页面数据从state中取出改为从props取
• reduxVersion2 使用redux + hooks: 改造class组件为funciton组件。示例HomeList.js
  1. store 数据传递 useSelector : const { data, loading } = useSelector(state => state.home);
  2. 接口actions改造成自定义hook, 返回一个函数: actions.js
  3. 在页面的 useEffect 里边定义接口 useEffect(() => { getHomeData(type, page) }, [page, type]);
  4. 组件内状态用 useState 定义 const [page, setPage] = useState(1);
  5. 来自路由的参数 useParams 获取 const { type } = useParams();

专栏系列快速链接

1-从零开始学react-认识react&jsx&props&state
2-从零开始学react-深入state，组件通讯，生命周期，受控组件
3-从零开始学react-其他api,初识hook
4-从零开始学react-hooks相关
5-从零开始学react - react-router-dom5
6-从零开始学react - redux相关
7-从零开始学react - 全家桶项目实战