React基础教程教学教案.docxVIP

《React基础教程》教案

课时安排：2.5学时

教学课型：专业课

题目（教学章、节或主题）：

React基础

教学目标（分掌握、熟悉、了解三个层次）

了解React的诞生和优缺点；

掌握React基本结构；

掌握如何编写第一个React程序；

掌握React的DOM更新机制；

掌握JSX;

了解React开发中的约定。

教学内容：

React概述（10分钟）：

介绍React的诞生、定位和意义。

介绍React的优点和缺点，为后续更深入了解其特点和内涵打下基础。

React基本结构（25分钟）：

虚拟DOM

介绍浏览器DOM是什么，通过对比引导介绍虚拟DOM及其作用，让学生初步了解虚拟DOM的含义和重要性。

组件

介绍React开发中最基本的功能单元——组件，及其开发的3个过程。让学生通过程序员最热爱的”HelloWorld”实例认识最基础的React组件。

ReactElement（React元素）

对ReactElement的要素、创建以及属性进行简单介绍，并以此为实例培养学生对ReactElement的概念和使用有初步了解。

React中的渲染

介绍React是如何调用函数将虚拟DOM渲染转换成浏览器DOM。

第一个React程序（15分钟）：

介绍React的基本运行环境，包括基础环境和引入文件。

手把手引导学生参考实例写出第一个”HelloWorld”程序，感受面向组件的编程思想。

React的DOM更新机制（25分钟）：

介绍浏览器DOM的渲染方法及其缺点，引导讲解虚拟DOM和虚拟DOM的局部渲染。

差异比较算法

介绍React的局部更新算法，也就是差异比较算法。重点讲解如何进行节点和子节点列表的差异比较。

ReactFiber架构

重点讲解Reactv16版本中使用的新底层核心架构——Fiber架构更新过程的两个阶段，比较阶段和提交阶段。

JSX（20分钟）：

讲解基于模板的前端组件化，通过实例让学生了解其特点。

JSX介绍

通过实例介绍JSX的含义、特点和属性等。特别是让学生了解到JSX不是一种新的语言，而是基于JavaScript的一种扩展特性。

JSX使用方法

重点通过实例让学生掌握JSX的使用方法，包括表达式、条件渲染、列表渲染，以及DOM属性、延展属性和注释的使用方法。

JSX转义工具

介绍了JSX的转义过程和工具。

React开发中的约定（15分钟）：

通过实例讲解React开发中的一些特殊用法约定，比如单一根节点、组件名约定、class和for的保留字、行内样式、HTML转译等，并让学生尝试使用，加深印象。

教学方式：

根据学生实际，注重引导自学，注重启发思维

教学媒介：

课程PPT讲义

教学重难点：

1、React的基本结构

2、熟练掌握React的DOM更新机制以及JSX的使用方法

讨论、思考题、作业：

1、虚拟DOM中ReactNode有哪几种类型，哪种是最常见的?

2、请构建一个包含3个子组件的组件，组件可以是任意形式。

3、请将1.2.4节中每秒更新显示时间的例子实现并运行，通过浏览器的调试工具观察浏览器

DOM的变化情况，理解虚拟DOM的更新机制。

4、下面这段JSX语句是否正确，如不正确，有哪些问题?

class={if(!ps.login)returnhide}

5、JSX和JavaScript是什么关系，它们是如何转换的?6.使用JSX实现显示一个整数数组中大于10的数字。

参考书目：

深入React技术栈，陈屹，人民邮电出版社

React+Node.js开发实战：从入门到项目上线，袁林，尹皓，陈宁，机械工业出版社

深入浅出React和Redux，程墨，机械工业出版社

《React基础教程》教案

课时安排：1.5学时

教学课型：专业课

题目（教学章、节或主题）：

React组件

教学目标（分掌握、熟悉、了解三个层次）

掌握组件的定义；

熟悉有状态组件与无状态组件；

掌握refs引用；

了解props属性验证；

了解组件的其他成员。

教学内容：

组件的定义（15分钟）：

介绍组件在React开发中的重要性以及React组件的定义。

介绍React组件中的props属性集合、state状态集合和render()核心函数，并通过实例加深学生的印象。

有状态组件与无状态组件（15分钟）：

有状态组件与无状态组件

介绍有状态组件与无状态组件的定义，并通过实例讲解其特点。

设