課程介紹
本課程介紹如何成功構建日益復雜的前端應用程序與接口,深入分析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使用。
課程大綱
初識React.JS
什么是React?
React優勢與其他框架的區別
React的核心語法-JSX
JSX的書寫格式介紹
React的開發模式介紹
React框架的基本形態
什么是Bower管理器?Bower的下載及使用
JSX的基本使用方式及事件處理部署
React組件及Class,參數,狀態的使用
面向對象的介紹
class類的介紹使用
React使用組件的方式
組件的傳參方法
組件的props,state詳解及調用事件方法
React獲取節點方法,雙向綁定和拖拽案例
React的雙向綁定的實現方法
React獲取DOM對象的方法
React實現拖拽的原理
React生命周期,事件冒泡
什么是生命周期?React的生命周期簡介
React的常用生命周期介紹及使用
React如何組織事件冒泡
React表單方法和前后臺數據交互
什么是表單?
React中的受控表單和非受控表單使用方法
React交互-使用原生AjAx交互方法
React交互-使用Jquery庫交互方法
React交互-使用axios交互方法
React中的函數及父子及組件數據通信
JSX中的函數使用
React中的組件嵌套
React中的父組件與子組件通信
React中的子組件與父組件通信
React父子組件數據交互小練習
React選項卡原理及JSONP使用
React選線工卡的原理及制作
什么是JSONP?
React使用JSONP方式
React中使用Juqery使用JSONP的方式
React中使用JSONP值作百度下拉框
使用WebPack配置正確React項目
React的另一種基于WebPack的使用方式
什么是WebPack?
WebPack的下載及使用
WebPack的命令環境
WebPack的基本組成
WebPack的配置文件及命令
運行WebPack及基礎指令
Es6的模塊語法
Loader的正確配置
在WebPack正確配置Babel(JSX)
在WebPack中正確的配置React
React的腳手架環境的下載使用及開發
什么是腳手架?
腳手架的介紹
認識React的腳手架
腳手架的環境的下載及使用
腳手架內部的基本構成介紹
使用腳手架值作圖片展示組件
React的動畫和CSS
React動畫的基本使用
React的動畫插件
動畫插件的下載及使用
eac的動畫插件-react-motion
React-motion下載及使用
掌握 React 項目當中CSS的開發:CSS Modules、Sass、PostCSS、CSS in JS
React-Router
什么是Router?
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的配置及基礎使用
認證過程
無認證考試
開班信息
暫無開班信息