React基础教程教学教案.docx

课时安排：2.5学时教学课型：专业课题目(教学章、节或主题)：React基础教学目标(分掌握、熟悉、了解三个层次)1、了解React的诞生和优缺点；2、掌握React基本结构；3、掌握如何编写第一个React程序；4、掌握React的DOM更新机制；5、掌握JSX;6、了解React开发中的约定。教学内容：1、React概述(10分钟)：(1)介绍React的诞生、定位和意义。(2)介绍React的优点和缺点，为后续更深入了解其特点和内涵打下基础。2、React基本结构(25分钟)：(1)虚拟DOM介绍浏览第DOM是什么，通过对比引导介绍虚拟DOM及其作用，让学生初步了斛虚拟DOM的含义和重要性。(2)组件介绍React开发中最基本的功能单元组件，及其开发的3个过程。让学生通过程序员最热爱的“He1.1.oWor1.d'实例认识最基础的ReaCt组件。是一种新的语言，而是基于JavaScript的一种扩展特性。(2) JSX使用方法重点通过实例让学生掌握JSX的使用方法,包括表达式、条件渲染、列表渲染，以及DOM属性、延展属性和注释的使用方法。(3) JSX转义工具介绍了JSX的转义过程和工具。6、ReaC1.开发中的约定(15分钟)：通过实例讲解React开发中的一些特殊用法约定，比如单一根节点、组件名约定、c1.ass和for的保留字、行内样式、HTM1.转译等，并让学生尝试使用，加深印象。教学方式：根据学生实际.注重引导自学，注重启发思维教学媒介：课程PPT讲义教学重难点：1、React的基本结构2、熟练掌握React的DoM更新机制以及JSX的使用方法讨论、思考题、作业：1、虚拟DOM中ReactNode有哪几种类型，哪种是最常见的？2、请构建一个包含3个子组件的组件,组件可以是任意形式“3、请将124节中每秒更新显示时间的例子实现并运行，通过浏览器的调试工具观察浏览器课时安排：1.5学时教学课型：专业课题目（教学章、节或主题）：React组件教学目标（分掌握、熟悉、了解三个层次）7、掌握组件的定义；8、熟悉有状态组件与无状态组件；9、掌握refs引用；10、了解props属性验证；11、了解组件的其他成员“教学内容：7、组件的定义（15分钟）：（3）介绍组件在React开发中的重要性以及React组件的定义。（4）介绍React组件中的PrOPS属性集合、State状态集合和render。核心函数，并通过实例加深学生的印象。8、有状态组件与无状态组件（15分钟）：（5）有状态组件与无状态组件介绍有状态组件与无状态组件的定义,并通过实例讲解其特点。（6）设计组件的state介绍React开发中哪些组件应该有state,哪些数据应放在state中，哪些数据不应该放在state中。9、refs引用（15分钟）：业出版社6、深入浅出ReaCt和RedUx,程墨,机械工业出版社课时安排：1学时教学课型：专业课题目（教学章、节或主题）：组件的生命周期教学目标（分掌握、熟悉、了解三个层次）12、了解React的生命周期；13、掌握挂载函数；14、掌握更新函数；15、掌握卸载函数；16、了解一个简单的示例，教学内容：12、React的生命周期（Io分钟）：（1）介绍了React的生命周期中挂载、更新、卸载的三个阶段，以及对应的三种React组件类型和函数使用中的注意事项。（2）回顾ReactFiber架构和DoM更新的两个阶段.引导学生对应生命周期函数进行深入讨论。13、React挂载函数（10分钟）:详细介绍了组件实例在创建阶段中挂载函数的调用顺序以及调用方法的具体内容，通过实例增加学生的印象和理解。14、React更新函数（10分钟）：详细介绍了组件在更新阶段中生命周期函数的调用顺序以及调用方法的具体内容.通过实例增加学生的印象和理解。15、React卸载函数（5分钟）：详细介绍了在卸载阶段，回调函数的具体内容，通过实例增加学生的印象和理解。16、简单示例（10分钟）：通过数字时钟的例子，介绍了如何使用生命周期函数结合state来实现。教学方式：根据学生实际.注重引导自学，注重启发思维教学媒介：课程PPT讲义教学重难点：1、熟练掌握Reaet的生命周期函数如何使用讨论、思考题、作业：1.通过AJAX从服务器为组件请求数据.应该如何实现？2.卸载事件通常用于内存清理，如果不清理会怎样？3.请了解v1.5版React中有哪些生命周期事件，与本书中v1.6版对比，并解释React为何做出这些改进。参考书目：7、深入ReaCt技术栈,陈屹，人民邮电出版社8、ReaCt+Nodejs开发实战：从入门到项目上线，袁林，尹皓.陈宁,机械工业出版社9、深入浅出ReaCt和Red1.1.X,程墨.机械工业出版社20、合成事件（5分钟）：介绍ReaCt针对跨浏览器的兼容问题给出的解决方案合成事件,以及合成事件的属性。21、响应其他事件（10分钟）：通过实例详细介绍了对于React不支持的事件如何进行响应，引导学生自己用代码实现。教学方式：根据学生实际.注重引导自学，注重启发思维教学媒介：课程PPT讲义教学重难点：1、React对事件处理的原理和方法2、React建立的独立的事件系统讨论、思考题、作业：1、通过鼠标事件实现一个可拖放的<div>.2、通过props的传递，将父组件定义的状态和事件处理函数传递给子组件。参考书目：10、深入ReaCt技术栈，陈屹,人民邮电出版社11、ReaCt+Nodejs开发实战：从入门到项目上线，袁林，尹皓，陈宁，机械工业出版社12、深入浅出ReaCt和RedUX,程聚，机械工业出版社区分内外部事件，外部事件是设计时未知的.而内部事件是设计时已知和明确的。53、表格组件设计小结强调组件封装的黑箱概念、复杂组件的设计思路.组件边界分析、组件职责分析，形成体系性的思路和概念。54、延伸设计，开拓思路表格的增强设计，商业表格组件的拓展。教学方式：根据学生实际.注重引导自学，注重启发思维教学媒介：课程PPT讲义教学重难点：1、*复杂组件的关系逻辑梳理2、#内部组件的边界分析和职责分析讨论、思考题、作业：1、*如何分解和设计内部组件2、查看商业表格组件实现的源代码3、考虑实现一个树形列表组件参考书目：34、深入ReaCt技术栈.陈屹,人民邮电出版社35、ReaCt+Nodejs开发实战：从入门到项目上线，袁林，尹皓，陈宁，机械工业出版社36、深入浅出ReaCt和RedUx,程墨，机械工业出版社课时安排：1学时教学课型：专业课题目（教学章、节或主题）：NodeJs环境、NPM模块管理和常用前端代码编辑器简介教学目标（分掌握、熟悉、了解三个层次）54、了解V8引擎及其特点55、熟悉NodeJS环境搭建；56、了斛服务端渲染基本概念和使用场景；57、掌握JaVaSCriPt代码编写和调试技巧。教学内容：61、NOdeJS环境搭建介绍NodeJS环境、定位。NodeJS是JS作为通用语言的运行环境，其底层支持是V8nV8引擎是JS得以称为通用语言而不是浏览器嵌入语言的关键。NodeJS是JaVaSCriPt的服务后端环境，基于V8弓I郭使用事件驱动、非阻塞式I/O模型.具有轻量、高效的特点，提供配套的中央仓库式模块管理机制。安装过程node.msi.介绍相关选项、介绍环境变量。62、最简Web服务讲解基本代码，简要介绍HttP协议。主要目的是熟悉JaVaSCriPt后端代码写法和调试方法.现场演示。63、ReaCt服务端造染（简单介绍）搜索引擎友好更快的首页加载速度要求后端必须基于NOdeJS技术栈实现，即前后端“同构.。实现技术上要有后端支持，相对复杂.使用上也有一些限制。服务端演染主要适用于对搜索引擎友好度和首页渲染速度有要求的网站，如信息发布类、推广类网站。也可以采用服务端渲染和客户端渲染相结合的混合架构。对于首页采用服务端渲染.对于交互性强的页面采用客户端渲染。64、Npm模块管理主要功能JS模块管理，从互联网上的中央代码仓库自动下载JS模块到本地工程中，运行模块，发布上传我们自己的JS模块按用途，区分两类模块（全局模块和本地模块）。用于开发时的,比如用于测试的、用于打包的；用于运行时，开发时也需要的。常用指令:insta1.1.,init,简要介绍其他指令PaCkagejson是工程配置文件，是NPm依赖管理和工程管理的依据。重要内容包括dependencies、devDepedencies和Scripts065、常用前端代码编辑器简介Dreamweaver,HBuiIder.Sub1.ime、Atom.WebStOrm和VSCode,重点介绍VSCode,现场演示，插件加载、终端命令等。教学方式：根据学生实际.注重引导自学，注重启发思维教学媒介：课程PPT讲义教学垂难点：1、*NPm模块管理和Packagejson配置文件讨论、思考题、作业：1、参考模态对话框组件，设计一个Too1.tip提示组件，即鼠标停留在某个标签上时.以类似气泡的方式弹出一个文本框，显示一段帮助信息；鼠标移出该标签后，文本框消失，2、借鉴模态对话框和树形组件的设计思路,实现一个多层级菜单组件。参考书目：40、深入ReaCt技术栈，陈屹，人民邮电出版社41、ReaCt+Nodejs开发实战从入门到项目上线.袁林,尹皓,陈宁，机械工业出版社42、深入浅出ReaCt和ReduX.程墨，机械工业出版社的代码。2、完成一个典型ReaCt开发的WebPaCk配置。3、通常ReaC1.在开发和运行阶段具有不同的配置,设计一个开关变量.使得通过这个开关变量，可以控制开发阶段和部署阶段的不同配送。参考书目：46、深入ReaCt技术栈，陈屹,人民邮电出版社47、ReaCt+Nodejs开发实战：从入门到项目上线，袁林，尹皓，陈宁，机械工业出版社48、深入浅出ReaCt和RedUX,程聚，机械工业出版社课时安排：1学时教学课型：专业课题目（教学章、节或主题）：EffeCtHook和ReaCt内置Hook教学目标（分掌握、熟悉、了解三个层次）65、掌握EHectHook函数式组件写法,理解与StateHook组件的区别；66、熟悉React内置Hook0教学内容：74、理解“副作用”结合代码实例分析.灌输架构思想，分析.副作用函数的定义、效果75、EffectHook（重点）相比C1.aSS式组件： 访问ProPS和state也需要指定this上下文： 在加我和更新时常常要执行同样的操作，代码存在奥史： 个业务逻辑（如创建订阅和取消订阅）分散开分别置于ComponentDidMount.ComponentDidUpdate和ComponentWiIIUnmount这三个函数中,带来不便.使用USeEffeC3访问pr。PS和State更为简洁，避免了代码取史,组件内相关的副作用组织在一起也更为集中。 但USeEffeCt与ComPOnentDidMount、COmPOnentDidUPdate并不完全等效，最大的区别在于调用UseE