Course Introduce
课程介绍
本课程将介绍React框架的基本知识和实践，包括React的定义、优势、核心语法、开发模式和基本形态等。课程还将涵盖React组件及参数的使用、生命周期和事件冒泡、表单方法和前后台数据交互、函数及父子组件数据通信、选项卡原理和JSONP的使用、使用WebPack配置正确React项目、React的脚手架环境的下载使用及开发、React的动画和CSS以及React-Router和Redux的使用等内容。
在线咨询
Course Objectives
课程目标
该课程将带领学员深入掌握React框架，从基础到高级应用，涵盖了React的核心语法、组件使用、生命周期、事件冒泡、表单交互、数据通信、动画和CSS等方面的知识。通过本课程的学习，学员将能够熟练使用React框架进行实际的前端开发，提升Web应用开发效率和质量，为个人和团队的开发工作带来更大的价值和效益。
在线咨询
创新传承 铸就慧谷 专业品质 诚信服务
“慧谷教育培训”品牌于2004年在上海交大科技园成立，曾连续多年获得徐汇区优秀办学机构荣誉。“慧谷教育”是专注于IT高新技术和互联网职业技能的研发和成果转化的机构，目前联合上海交大教育集团智能信息技术研究院和新型人力资源服务公司--聚盼湖科技，为各大企业客户和社会精英人群提供优质培训和一站式人才职业规划咨询服务。
在线咨询课程大纲
| 课程单元 | 课程大纲 |
|---|---|
| 单元1 初识React.JS |
1. 什么是React? 2. React优势与其他框架的区别 3. React的核心语法-JSX 4. JSX的书写格式介绍 5. React的开发模式介绍 6. React框架的基本形态 7. 什么是Bower管理器? 8. Bower的下载及使用 9. JSX的基本使用方式及事件处理部署 |
| 单元2 React组件及Class、参数、状态的使用 |
1. 面向对象的介绍 2. class类的介绍使用 3. React使用组件的方式 4. 组件的传参方法 5. 组件的props,state详解及调用事件方法 |
| 单元3 React获取节点方法，双向绑定和拖拽案例 |
1. React的双向绑定的实现方法 2. React获取DOM对象的方法 3. React实现拖拽的原理 |
| 单元4 React生命周期，事件冒泡 |
1. 什么是生命周期?React的生命周期简介 2. React的常用生命周期介绍及使用 3. React如何组织事件冒泡 |
| 单元5 React表单方法和前后台数据交互 |
1. 什么是表单？ 2. React中的受控表单和非受控表单使用方法 3. React交互-使用原生AjAx交互方法 4. React交互-使用Jquery库交互方法 5. React交互-使用axios交互方法 |
| 单元6 React中的函数及父子及组件数据通信 |
1. JSX中的函数使用 2. React中的组件嵌套 3. React中的父组件与子组件通信 4. React中的子组件与父组件通信 5. React父子组件数据交互小练习 |
| 单元7 React选项卡原理及JSONP使用 |
1. React选线工卡的原理及制作 2. 什么是JSONP？ 3. React使用JSONP方式 4. React中使用Juqery使用JSONP的方式 5. React中使用JSONP值作百度下拉框 |
| 单元8 使用WebPack配置正确React项目 |
1. React的另一种基于WebPack的使用方式 2. 什么是WebPack？ 3. WebPack的下载及使用 4. WebPack的命令环境 5. WebPack的基本组成 6. WebPack的配置文件及命令 7. 运行WebPack及基础指令 8. Es6的模块语法 9. Loader的正确配置 10. 在WebPack正确配置Babel(JSX) 11. 在WebPack中正确的配置React |
| 单元9 React的脚手架环境的下载使用及开发 |
1. 什么是脚手架？ 2. 脚手架的介绍 3. 认识React的脚手架 4. 脚手架的环境的下载及使用 5. 脚手架内部的基本构成介绍 6. 使用脚手架值作图片展示组件 |
| 单元10 React的动画和CSS |
1. React动画的基本使用 2. React的动画插件 3. 动画插件的下载及使用 4. React的动画插件-react-motion 5. React-motion下载及使用 6. 掌握 React 项目当中CSS的开发：CSS Modules、Sass、PostCSS、CSS in JS |
| 单元11 React-Router |
1. 什么是Router？ 2. React-Router的下载及使用 3. BrowserRouter详解 4. React-Router具体配置使用 5. React-Router严格匹配 6. React-Router匹配组件和函数 7. React-Router与组件的数据传输 8. React-Router中match详解 9. 无限调用router做法 10. React-Router中使用数据交互 |
| 单元12 Redux使用 |
1. Redux的理解与介绍 2. Redux的核心概念-Reducer介绍 3. Redux的核心概念-Store介绍 4. Redux的核心概念-State介绍 5. Redux的核心概念-action介绍 6. Redux的配置及基础使用 |