大圣前端进阶指南
Return to top
On this page

React18 + Typescript + Vite4企业级实战

一个从入门到专家的React企业级实战课程

什么是企业级的项目

课程亮点和收获

一次性学完React进阶的项目和实战难点

让你拥有一个可以写入简历的项目和组件库

  • React18全家桶入门
  • 企业级项目实战全流程
    • 企业级项目基建：规范，工程化，Typescript
    • 功能实现、复杂场景优化
    • 性能优化、发布部署...
  • 设计和开发自己的组件库
  • React生态框架一览 （Next,Umi)

技术栈

课程架构

适合学员

0~5年经验的前端，希望构建前端核心竞争力

有一定的Javascript基础，想要深入React18框架,成为React生态高手

提高面试成功率，进大厂

学习前提

  • 掌握基础的前端基础知识
  • 掌握ES6基础知识
  • 使用React开发过简单的项目
  • 有Node.js和Npm的使用经验

讲授方式

  • 从入门到实战 循序渐进
  • 理论和实战结合 体系化提升
  • 手写代码，力求让大家知其然也知其所以然

你将获得

  • 企业级的React项目实战
  • 企业级前端架构设计
  • 一个自己的React组件库
  • 更高的前端视野 + 前端核心竞争力 + 良好的学习习惯
  • 一个可以写入简历的亮点的开源项目，不定期的简历点评， 让你面试游刃有余
  • 不定期加餐 （新框架 新技术)

详细大纲

  1. 开课介绍
  2. React18技术栈介绍
    1. React实战 & 第一个React应用
    2. 什么是组件
    3. JSX是什么
    4. 处理用户交互
    5. 事件处理
    6. React18带来了什么
  3. React全家桶进阶
    1. 工程化工具Vite
    2. 路由机制
    3. 数据流讨论
    4. AntDesign5实战
    5. React进阶API
    6. 组件化进阶
    7. 封装自己的Hooks
    8. 项目实战
    9. 项目打包
  4. 企业级实战
    1. 实现CRUD后，我们能做什么
    2. 性能如何提升
    3. 开发效率如何提高
    4. 如何提高开发质量
    5. 用户体验的提升
    6. 相关技术栈和工具介绍
  5. React和Typescript必知必会
    1. 为什么我们需要Typescript
    2. Typescript入门类型
    3. Typescript函数
    4. 宿主环境的类型
    5. Typescript泛型入门
    6. 好用的类型工具函数
    7. React中的Typescript
  6. 企业级项目规范搭建
    1. Vite + pnpm
    2. 代码规范
    3. 目录规范搭建
    4. 好用的脚本工具
    5. 工程化系统搭建
  7. 企业级项目实战
    1. 权限系统
    2. 大数据量如何渲染
    3. 大文件如何上传
    4. React前端性能优化
    5. 用户体验优化
    6. React前端监控
    7. 网络请求封装和优化
    8. 工程化Vite插件定制
    9. 自动化部署 CI / CD
  8. React18 组件库
    1. AntDesign5学习
    2. 组件库设计概览
    3. 技术选型讨论
    4. 通用组件渲染 （Button，Layout
    5. 表单组件（Form,Input
    6. 弹窗组件（Modal,Notification
    7. 表格组件（Table
    8. 树形组件（Tree
    9. 组件库文档
    10. 组件库发布
  9. 新技术&框架探讨
    1. Next.js介绍
    2. Umijs介绍
    3. Solidjs
    4. 前端全栈框架
    5. React在Web3生态的库
    6. React生态有意思的库（持续更新）
  10. 课程总结
    1. React进阶带来了什么
    2. 不定期面试提高
    3. 课程总结与回顾
    4. 头脑风暴

追求持续轻松的职业生涯