课程

课程介绍

本课程介绍如何成功构建日益复杂的前端应用程序与接口,深入分析React库,并详述React生态系统中的其他工具与库,从而指导学员创建完整复杂的应用程序。

培训对象

需精通HTML5+CSS3,Javascript,ES6等前端技术的专业人员。

课程收益

如何创建可组合的用户界面;
理解React的虚拟DOM架构以及如何利用该架构开发应用程序;
了解各项功能的原理及重要性;
深入学习React以及React生态系统中重要的第三方库;
学习如何创建通用/同构应用程序从而改进用户体验和SEO;
深刻理解复杂应用程序中的数据流策略;
学习如何测试、完善和部署React项目。

知识概要

-- 初识React.JS;  
-- React组件及Class,参数,状态的使用;  
-- React获取节点方法,双向绑定和拖拽案例;  
-- React生命周期,事件冒泡;  
-- React表单方法和前后台数据交互;  
-- React中的函数及父子及组件数据通信;  
-- React选项卡原理及JSONP使用;  
-- 使用WebPack配置正确React项目;  
-- React的脚手架环境的下载使用及开发;  
-- React的动画和CSS;  
-- React-Router;  
-- Redux使用。

课程大纲

模块

学习内容

第一天AM

初识React.JS

什么是React?

React优势与其他框架的区别

React的核心语法-JSX

JSX的书写格式介绍

React的开发模式介绍

React框架的基本形态

什么是Bower管理器?Bower的下载及使用

JSX的基本使用方式及事件处理部署

React组件及Class,参数,状态的使用

面向对象的介绍

第一天PM

class类的介绍使用

React使用组件的方式

组件的传参方法

组件的props,state详解及调用事件方法

React获取节点方法,双向绑定和拖拽案例

React的双向绑定的实现方法

React获取DOM对象的方法

React实现拖拽的原理

React生命周期,事件冒泡

什么是生命周期?React的生命周期简介

React的常用生命周期介绍及使用

React如何组织事件冒泡

第二天AM

React表单方法和前后台数据交互

什么是表单?

React中的受控表单和非受控表单使用方法

React交互-使用原生AjAx交互方法

React交互-使用Jquery库交互方法

React交互-使用axios交互方法

React中的函数及父子及组件数据通信

JSX中的函数使用

React中的组件嵌套

React中的父组件与子组件通信

React中的子组件与父组件通信

React父子组件数据交互小练习

React选项卡原理及JSONP使用

React选线工卡的原理及制作

什么是JSONP?

第二天PM

React使用JSONP方式

React中使用Juqery使用JSONP的方式

React中使用JSONP值作百度下拉框

使用WebPack配置正确React项目

React的另一种基于WebPack的使用方式

什么是WebPack?

WebPack的下载及使用

WebPack的命令环境

WebPack的基本组成

WebPack的配置文件及命令

运行WebPack及基础指令

Es6的模块语法

Loader的正确配置

在WebPack正确配置Babel(JSX)

在WebPack中正确的配置React

第三天AM

React的脚手架环境的下载使用及开发

什么是脚手架?

脚手架的介绍

认识React的脚手架

脚手架的环境的下载及使用

脚手架内部的基本构成介绍

使用脚手架值作图片展示组件

React的动画和CSS

React动画的基本使用

React的动画插件

动画插件的下载及使用

eac的动画插件-react-motion

React-motion下载及使用

掌握 React 项目当中CSS的开发:CSS Modules、Sass、PostCSS、CSS in JS

React-Router

什么是Router?

第三天PM

React-Router的下载及使用

BrowserRouter详解

React-Router具体配置使用

React-Router严格匹配

React-Router匹配组件和函数

React-Router与组件的数据传输

React-Router中match详解

无限调用router做法

React-Router中使用数据交互

Redux使用

Redux的理解与介绍

Redux的核心概念-Reducer介绍

Redux的核心概念-Store介绍

Redux的核心概念-State介绍

Redux的核心概念-action介绍

Redux的配置及基础使用

认证过程

无认证考试

开班信息

暂无开班信息