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并不完全等效，最大的区别在于调用UseEffect由明的副作用函数不公矶察浏览器更新.这使得浏览器的响应速度更快. 大多数情况卜.副作用函数不需要同步运行. 如果确实需要同步运行，如基于浏览器DoM迸行布局测量时.也可以使用USe1.aYOUtEffeCt这个HoOk76、React内置Hook（熟悉）参考书目：52、深入ReaCt技术栈，陈屹，人民邮电出版社53、ReaCI+Nodejs开发实战：从入门到项目上线，袁林.尹皓，陈宁,机械工业出版社54,深入浅出ReaCt和RedUX,程星，机械工业出版社钩子函数的调用顺序来决定哪个State对应哪个钩子函数(如USeState()的.只有在最顶层使用HOOk钩子函数，才能确定保证一致的调用顺序，避免产生错误.：(3)仅在ReaCt函数组件中调用Hook钩子函数不要类式声明组件中使用Hook钩子函数.也不要在普通的JavaScript函数中调用Hook钩子函数。只在函数声明的React组件、或者自定义Hook钩子函数中调用Hook钩子函数(4)自定义HOOk名称以USe开头只有遵循这个规范的函数，ReaCt才认为它是自定义Hook钩子函数，才会按照HOOk钩子函数的使用规则(即仅在最顶层使用、仅在ReaCt函数中调用)进行检查。(5)合理设置副作用函数的依赖默认情况下.UserEffectO钩子函数传递的副作用函数每次宣染后都会执行。如果不希望无意义的副作用函数被执行，可以给USerEffeCt()钩子函数传递第二个参数,将副作用函数依赖的值作为数组传递给useEffect().这样只有Propssource改变时该副作用函数才会执行，可以有效减少多余的副作用函数执行.提高运行性能。传递一个口空数组，则该副作用函数仅运行一次。需要注意的是，该数组必须包含外部作用域发生变化且在副作用函数中使用的所有变量。(6)正璃处理副作用函数依赖的函数通常应在副作用函数内部去声明它所依赖的函数，而不是去调用外部作用域中声明的函数.因为外部声明的函数中，可能会有依赖，这些侬赖应该正确课时安排：1学时教学课型：专业课题目(教学章、节或主题)：10.1F1.ux教学目标(分掌握、熟悉、了解三个层次)69、熟悉ReaCt应用开发典型设计模式；70、掌握FkJX工作原理71、掌握FIUX适用场景72、了解基于F1.UXUtiIS应用开发方法教学内容：1、 F1.UX简介(13) FIUX的作用与定位介绍F1.UX在ReaCt应用开发中的作用，为什么需要用到,以及什么场景中需要用到F1.UX框架。(14) FIUX工作原理介绍F1.UX如何通过视图触发，通过派发器发出动作，并通过执行状态仓库的回调函数实现状态变化，随后发出状态变化的事件引发视图更新.(15) FIUX各组成部分介绍dispatcher、action,store的作用及使用方式(16) FkJXUti1.S工具包利用FIUX工具包进行开发有哪些优势，如何用它来减少样板代码开发量教学方式：题目(教学章、节或主题)：14选修课选课系统工程实例教学目标(分掌握、熟悉、了解三个层次)1、 掌握React应用开发基本流程和方法；2、 掌握React工具链的搭配和组装；3、 了解需求分析方法教学内容：1、 基本需求分析介绍选修课选课系统需求分析方法手段。2、 详细设计(1)项目总体工程描述介绍一个完整的React工程由哪些部分组成。(2)登录控制页面设计以代码示例形式介绍登录页面的设计方法。(3)主页面设计以代码示例形式介绍主页面的设计方法。(4)选课页面设计以代码示例形式介绍选课页面的设计方法“教学方式：配合代码示例，讲解一个完成的React应用开发全流程及所需工具集。题目（教学章、节或主题）：15ReaCt相关资源教学目标（分掌握、熟悉、了解三个层次）1、了解ReaCt常用组件库和常用资源教学内容：1、 U1.组件库介绍3种组件库适用场景和资源获取方式。2、 其他资源介绍React常用资源的访问目录。教学方式：简单介绍，了解即可。教学媒介：课程PPT讲义教学重难点：无O讨论、思考题、作业：无。介绍在Redux中如何触发一个动作(连接函数封装后的视图组件通过dispatch函数来触发)；介绍状态仓库的创建和常用函数.(5)常用AP1.介绍4个常用API的使用方法和作用。2、 高级特性(1) Thunk介绍如何利用Thunk中间件实现异步动作的触发.(2) RedIJX中间件介绍Redux中间件机制实现方法和作用教学方式：配合代码示例.讲解Redux工作原理和过程教学媒介：课程PPT讲义教学重难点：1、连接函数和归纳函数工作机理2、RedUX工作原理3、RedUX中间件开发(了解内容)讨论、思考题、作业：1、Redux的基本思想是什么？适用于哪些场景？2、使用RedUX实现一个计数器应用，同样提供重置和计数功能.参考书目：本书以及Redux源码todos示例(httpsgi1.hrcduxjsre<Juxtrccmastcrcxa111.cs(1.os)介绍动态路由的用法与多级嵌套方法。3、 各种路由器(1)常用Web路由器组件介绍VBrOWSerROUter和VHaShROUter路由器组件路由方式和主要属性。(2) ReaCtNatiVe路由器组件介绍VMemoryRouter和NatveRouter路由器组件路由方式和主要属性。(3)后端渲染路由器组件介绍SmicRmncr路由器组件路由方式和主要属性。4、 ReaCt-RoUter特性(1)路由瞥示组件Prompt介绍组件属性、用法和适用场景(2)高阶组件WithROUter介绍该高阶组件的用法和作用。(3)重定向组件Redirect介绍组件的作用、使用方法和主要属性。教学方式：配合代码示例.讲解React路由器的工作原理和配置使用方法教学媒介：课程PPT济义教学重难点：1、路由组件的几种不同演染方法课时安排：2学时教学课型：专业课题目(教学章、节或主题)：13React单元测试教学目标(分掌握、熟悉、了解三个层次)1、 掌握Jest环境搭建和基本工具使用方法；2、 熟悉DOM测试工具作用和使用方法；教学内容：1、Jest:React官方测试工具(1)JeSt测试环境搭建介绍Jest测试环境的两种搭建方式：一是使用create-react-app工具创建.二是手动创建。(2)匹配器方法以代码示例形式介绍等值匹配器等6类匹配器的使用方法(3)模拟函数以代码示例形式介绍如何使用JeSt对函数返回值、函数体、函数名和模块创造相应的模拟器，(4)异步代码测试介绍了对异步代码的两种测试方法：回调函数法和直接返回PromiSe对象法。(5)两组钩子：beforeEach/afterEach和beforeAII/afterAII4.自己从零开始搭建一个JeSt测试环境.要求包含EnZyme测试工具。用搭建好的测试环境分别进行浅渲染、全DOM渲染和静态渲染的测试。参考书目：本书以及本章随书示例课时安排：1学时教学课型：专业课题目(教学章、节或主题)：14选修课选课系统工程实例教学目标(分掌握、熟悉、了解三个层次)4、 掌握React应用开发基本流程和方法；5、 掌握React工具隹的搭配和组装；6、 了解需求分析方法教学内容：3、 基本需求分析介绍选修课选课系统需求分析方法手段。4、 详细设计(5)项目总体工程描述介绍一个完整的React工程由哪些部分组成。(6)登录控制页面设计以代码示例形式介绍登录页面的设计方法。(7)主页面设计以代码示例形式介绍主页面的设计方法。(8)选课页面设计以代码示例形式介绍选课页面的设计方法。教学方式：配合代码示例.讲解一个完成的React应用开发全流程及所需工具集。教学媒介：课程PPT讲义教学重难点：2、系统整体框架分析与设计讨论、思考题、作业：1 .结合路由策略，实现页面的统一错误处理。包括非法路由的页面显示,以及远程请求出错时的错误弹窗等。2 .目前的示例实际上并没有对组件的权限进行控制，请按照工程的需求，按登录用户角色的不同.结合路由拦敌.对组件是否显示进行控制。参考书目：本书以及本章随书示例课时安排：1学时教学课型：专业课题目（教学章、节或主题）：15ReaCt相关资源教学目标（分掌握、熟悉、了解三个层次）3、了解ReaCt常用组件库和常用资源教学内容：5、 U1.组件库介绍3种组件库适用场景和资源获取方式。6、 其他资源介绍Reaet常用资源的访问目录。教学方式：简单介绍，了解即可。教学媒介：课程PPT讲义教学重难点：无。讨论、思考题、作业：无O