VIP 视频更新:React 实战项目《CNode》开发

React 实战项目《CNode》开发,是来自妙味实体班《前端全栈 JS 高级工程师课程》的一个补充视频。本视频是以 CNode 为例的 React 实战开发项目,项目中会涉及到 React,Redux,antd 等热点技术的应用,是一个特别不错的 React + antd 练手项目:

视频说明

本视频主要讲解 React、Redux 配合 antd 进行项目的快速开发,项目涉及异步 Redux 配合 antd <List /><Pagination/><Tag />……组件实现的带有 loading 状态和翻页功能的展示列表,redux 配合 antd <Card/> 等组件的文章详情展示,结合了 React-router 及 antd <Menu>、栅格布局的响应式菜单,以及利用 antd 栅格布局实现页面响应式排版等功能。

学完可以做什么

  • 学完本视频之后,可以让大家了解 React 项目开发模式,以及如何利用 antd 组件库快速进入 PC 端的项目开发;

  • antd(Ant Design)是由蚂蚁金服团队开发并维护,用于 React 的一套组件库,也是目前 React 开发时,被使用最多的一套组件库。Ant Design 提供了一套非常完整的 组件化设计规范组件化编码规范,从而 大幅提高了产品设计研发效率及质量

  • Ant Design 与 G2 的代码质量和文档质量都非常高,算是阿里提出 “大中台,小前台” 之后的杰出作品。当然 Ant Design 也包含了许多 PC、移动端 开发时常用的各种组件,可以帮我们节省大量开发时间,避免重复造轮子。

技术栈

  • create-React-app
  • React
  • Redux
  • React-Redux
  • Redux-thunk
  • React-router-dom
  • axios
  • antd

API 接口

这里使用的是 CNodejs 官网给出的数据接口,接口文档地址:https://cnodejs.org/api


视频地址:https://study.miaov.com/study/show/chapter/404

学前基础

视频课程大纲

  • 环境安装
    • 1、create-React-app my_CNode 创建项目
    • 2、cd my_CNode 进入目录
    • 3、npm i Redux -S 安装 Redux
    • 4、npm i React-redux -S 安装 Redux
    • 5、npm i Redux-thunk -S 安装中间件
    • 6、npm i React-router-dom -S 安装 React 路由
    • 7、npm i axios -S 安装 axios
    • 8、npm i antd -S 安装 antd
    • 9、修改配置环境,以适应 antd(官网参考)
      • npm i React-app-rewired -D
      • 修改 package.json 的启动配置"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", "eject": "react-scripts eject" }
      • npm i babel-plugin-import -D
      • 项目根目录创建 config-overrides.js const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config, env) { config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config); return config; };
  • 视图
    • 视图结构划分
    • 路由配置
    • minHeader 组件
      • antd 响应式设计及栅格组件使用
      • antd {Layout, Row, Col, Menu, Icon, Divider,Dropdown} 等组件使用
    • minFooter 组件
    • Index 首页视图
      • 相关子视图及路由配置(全部、精华、问答、分享、招聘、测试)
      • param 参数
      • antd List 组件、Pagination 组件、Tag 组件 使用讲解
    • Details 文章详情视图
      • Card 组件 使用讲解
      • dangerouslySetInnerHTML 方法
    • User 用户视图
    • Book 教程视图 和 About 关于视图
  • 数据处理
    • redux 的异步处理
    • 中间件讲解
    • redux-thunk 使用
    • 相关 reducer 处理
      • list.reducers
      • details.reducers
      • user.reducers
  • 更新相关数据获取,完善整个项目

继续学习

正所谓学无止境。如果你已经完成本套视频学习,你可以继续研究更深入的知识,如:

  • 编写原生组件;
    • 移动端滑屏幻灯片组件
    • 移动端上滑加载列表组件
    • 3D 折页组件
  • 了解 React 本身工作机制,不断提升代码性能;

如果你在学习探索中遇到问题,不妨来妙味社区和我们一起交流:

>>妙味技术交流社区

妙味 QQ 技术交流群:626927936


广而告之:

我们眼中最强悍的 WEB 前端课程大纲 现已上线,目前新班招募中…

2018 年开班信息一览:

>> 北京 3 月份零基础班:《WEB 前端工程师就业课程》 - 西二旗辉煌国际校区
>> 上海 3 月份零基础班:《WEB 前端工程师就业课程》 - 七宝·宝龙城校区

>> 北京 3 月份 JavaScript 班:《JS 高级全栈工程师课程》 - 西二旗辉煌国际校区
>> 上海 3 月份 JavaScript 班:《JS 高级全栈工程师课程》 - 七宝·宝龙城校区

>> 北京 3 月 10 日周末班:《Vue 系统修炼与精彩实战周末班》 - 西二旗辉煌国际校区
>> 上海 3 月 10 日周末班:《Vue 系统修炼与精彩实战周末班》 - 七宝·宝龙城校区

>> 北京 4 月份周末班:《React+redux 高阶实战项目周末班》 - 西二旗辉煌国际校区
>> 上海 4 月份周末班:《React+redux 高阶实战项目周末班》 - 七宝·宝龙城校区

相关链接:

>>我们眼中最强悍的前端课程大纲,是什么样的?
>>年终岁末,妙味实体班就业简报

想要咨询报名的童鞋,可以跟我们的客服 MM 们联系哦,名额有限,心动不如行动,速度约起来吧~


课程咨询:

咨询QQ:2852509866

微信咨询:miaov-class

电话咨询:010-57269690

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号