实战 \React全栈+服务器渲染(ssr)打造社区Webapp
收藏

React全栈+服务器渲染(ssr)打造社区Webapp

搭建完整前端工程,前端工程师向架构师的进阶之战

React全栈+服务器渲染(ssr)打造社区Webapp

难度 高级 ·
时长 14小时 ·
学习人数 549 ·
综合评分 10.00分
¥ 348.00

React全栈+服务器渲染(ssr)打造社区Webapp

观看导学视频

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

前端架构师

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

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

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

  • -一个有真实数据的全栈工程
  • -从零开始由浅及深讲解项目和工程架构
  • -细致得讲解基于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基础知识

环境参数

  • 前端工具 Webpack3.x
  • 框架 React16 React-Router mobx
  • 语言 JSX,es8,html
  • 框架 express
  • 框架 material-ui
  • 环境配置 Nodejs 8+ npm 5+
  • 开发系统 不限

万事俱备 只等你来

  • jeanneze

    非常棒,这门课程解决了我在学习前端架构搭建时的很多困惑,老师解决问题也很及时,对于想要手动搭建前端框架,而不是借助框架的自动化构建工具构建前端架构,这门课将是你不二的选择,非常期待老师Vue的前端架构课,如果能再出相应的React Native或Weex就更好了,一定继续追,支持老师!

  • 吴小粥

    非常的不错,其实我们缺的就是一个完整的开发流程,这门课就非常完整的展示了一个react项目的开发流程,无论是代码还是经验都完全可以迁移到真正的项目开发中。推荐。五星好评。vue的什么时候出?

  • 前端荣耀王者

    这个课程对于想进阶学习react webapp开发的同学太有意义了,从零开始的webpack配置,react服务端渲染的使用,解决了我之前一直想不通的问题。为老师疯狂打call,希望以后能多出一些架构类的课程,这方面自己学太难了。

查看全部26条用户评价
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信