实战 \Webpack + React全栈工程架构项目实战精讲

Webpack + React全栈工程架构项目实战精讲

难度 高级
时长 14小时
学习人数 71
10.0分
¥ 348.00

Webpack + React全栈工程架构项目实战精讲

Webpack + React全栈工程架构项目实战精讲
市面上讲框架使用的课很多,但鲜有讲如何搭建工程让项目运作起来的课程,本课程将从架构高度,讲解一个高级前端的工作流,在实战中,教你在面对一个项目时,如何进行技术选型,如何根据选择的技术搭建工程,以及如何进行优化,让团队协作更完美,并很好得控制代码质量,让你向前端架构师迈进!

前端也有高低之分,带你成为高阶前端

现代前端开发中,写页面是非常基础的工作,高阶的前端需要理解工程化、前后端分离等有利于整个公司技

术选型的能力,这门课就是为此而生的

  • -一个有真实数据的全栈工程
  • -从零开始由浅及深讲解项目和工程架构
  • -细致得讲解基于Webpack和React的工程构建
  • -涉及方方面面,包括代码lint以保证项目质量
  • -项目都是真实场景,数据都是真实请求,完美实现真实的场景
  • -使用Mobx这个后起之秀作为React的数据层,引领技术时尚

前端架构师的两大核心本领:工程架构+项目架构

工程架构

Webpack

使用Webpack整合整个应用

Webpack-dev-server

加快项目构建速度,提供livereload和hotModuleReplacement

等功能,极大得提高开发效率

Server-side-render

在项目中加入服务端渲染,在开发流程和正式上线流程中完美

适应,并教你随着业务的增加,如何进一步进行优化

网络优化

使用Webpack打包正式项目时,如何尽量降低文件大小,使用浏

览器缓存来降低带宽压力,加快用户的访问速度

项目架构

目录结构

好的目录结构让你在开发过程中节省查找的时间,事半功倍

Mobx

store实现的后起之秀,简单易用,有更高的执行效率

更自由的数据组织方式,更优秀的开发体验

React-router

声明式的路由书写方式跟React无缝连接,是React生态环境中最优秀

使用范围最广的路由管理工具,且很好得提供服务端渲染支持

API代理

使用真实的线上数据,让你开发完项目之后能够真正跑起来跟互联

网另一边的同学进行交流

有架构知识,更有前端技术的综合运用

Webpack

最流行的前端代码打包工具

自定义程度非常高,有丰富的生态,plugin

可命令行启动,可作为node module使用,自由度更高

React

前端最火热的view层框架

声明式,纯组件化,函数式编程理念

使用React16优化了React的运行效率,同时减小代码大小

Mobx

eactive的编程模型,数据修改精度更高,更新UI效率更高

没有类似redux的固定术语,可根据个人使用习惯定制方法

提供非常多的帮助函数让store定义和更新变得非常简单

服务器渲染

使用React-Dom服务端模块进行服务端渲染

解决数据同步、路由跳转、头信息、样式生成等问题

极致hack,解决webpack-dev-server无法调试服务端渲染的问题

随项目跟进服务端渲染优化,完善每个细节

实战开发社区Webapp,手把手学习架构师的具体工作

项目已上线,请你去体验: http://jnode.jokcy.me/

课程不是生硬的理论讲解,前端架构也并非纸上谈兵,课程全程用一个有真实数据的社区类项目带你真切感受架构师的具体工作,带你体验真实项目的成型历程,让你真正了解前端架构师在项目整体中的重要作用

学员专享增值服务

问答专区

讲师集中答疑

关于课程的问题都可在问答区随时提问
讲师会进行集中答疑

源码开放

整套代码下载

课程案例代码完全开放给你,你可以根据
所学知识自行修改、优化

适合人群

前端工作一段时间后,你一定想有所突破,向更高的层级迈进,如果你已能熟练运用前端技术实现项目功能,想更进一步,向前端Leader及架构方向迈进,那本课程再适合不过了

温馨提示:本课程采用React开发,学习前希望你符合以下技术储备要求,当然,如果你想提前一窥前端架构师的工作,提前积累经验,那本课程中项目开发经验也会让你受益匪浅的!

技术储备要求

-掌握React基础知识,且有一定的React相关项目经验

-了解HTML/CSS/JavaScript/ES6/Webpack

-Node.js/Express基础知识

前端架构师

Jokcy

现任某大型互联网公司前端架构师,带领50多位前端小伙伴开发前端项目,在开发生涯中,他从小白自学开始,直至成为一个大公司的前端架构师,经历了一个前端工程师成长的各个关键阶段,因此,他非常清楚前端的学习及发展方向,非常了解学习一个技术的方法,非常擅于引导前端工程师学习进步,在实际工作中,他多次组织公司内部培训,在技术和职业发展方向上给了同事和同学很多正向的指引。

自学的经历让他更明白分享的重要性,因此,他非常乐于技术分享与输出,曾在慕课网出品过“gulp教学,也曾开发过Vue.js的组件库等开源项目,并给Vuex提过PR。

对于教学,他的理念是:“每一个细节的技术都需要深入精进,只有你能保证这个技术以后在使用时遇到问题你能自如解决,才算真的学会”。因此,他的课程会尽力把每个技术点讲到细致,不仅让你知其然,更知其所以然。

来吧,一位从小白成长起来的前端架构师,更能为你拨开前端发展的迷雾!

环境参数

  • 前端工具 Webpack3.x
  • 框架 React16 React-Router mobx
  • 语言 JSX,es8,html
  • 框架 express
  • 框架 material-ui
  • 环境配置 Nodejs 8+ npm 5+
  • 开发系统 不限
提问
数据加载中...
意见反馈 常见问题 APP下载
官方微信