Course Introduce
课程介绍
本课程将介绍React框架的基本知识和实践，包括React的定义、优势、核心语法、开发模式和基本形态等。课程还将涵盖React组件及参数的使用、生命周期和事件冒泡、表单方法和前后台数据交互、函数及父子组件数据通信、选项卡原理和JSONP的使用、使用WebPack配置正确React项目、React的脚手架环境的下载使用及开发、React的动画和CSS以及React-Router和Redux的使用等内容。
在线咨询
Course Objectives
课程目标
该课程将带领学员深入掌握React框架，从基础到高级应用，涵盖了React的核心语法、组件使用、生命周期、事件冒泡、表单交互、数据通信、动画和CSS等方面的知识。通过本课程的学习，学员将能够熟练使用React框架进行实际的前端开发，提升Web应用开发效率和质量，为个人和团队的开发工作带来更大的价值和效益。
在线咨询
上海交大教育集团智能信息技术研究院
上海交大教育（集团）有限公司于1999年8月4日设立,以独立法人经济实体的形式对外发展终身教育事业。为打造社会化教育平台，充分发挥自身在教育、人才、技术及信息方面的资源和优势并服务于社会。上海交大教育集团，注册资本1.5亿元人民币，股东为上海交大产业投资管理（集团）有限公司和上海新南洋昂立教育科技股份有限公司。目前管理多所院校和十家控、参股公司。集团聚焦职业教育、基础教育与国际教育等领域，致力于发展终身教育事业。上海交大教育集团传承 “起点高、基础厚、要求严、重实践、求创新”的醇厚传统，秉持“严谨、务实、创新”的质量方针，聚焦国际教育和职业教育，不断探索人才的培养模式，满足社会教育需求，承担社会教育责任。
在线咨询课程大纲
| 课程单元 | 课程大纲 |
|---|---|
| 单元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的配置及基础使用 |