React基础教程教学教案.pdf

《React基础教程》教案

课时安排：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个过程。让

学生通过程序员最热爱的“HelloWorld实例认识最基础的React组件。

(3)ReactElement(React元素)

对ReactElement的要素、创建以及属性进行简单介绍，并以此为实例培

养学生对ReactElement的概念和使用有初步了解。

(4)React中的渲染

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

3、第一个React程序(15分钟)：

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

(2)手把手引导学生参考实例写出第一个”HelloWorld程序，感受面向组

件的编程思想。

4、React的DOM更新机制(25分钟):

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

DOM的局部渲染。

(1)差异比较算法

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

点和子节点列表的差异比较。

(2)ReactFiber架构

重点讲解ReactV16版本中使用的新底核心架构一Fiber架构更新过程

的两个阶段，比较阶段和提交阶段。

5、JX(20分钟)：

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

(1)JX介绍

通过实例介绍JX的含义、特点和属性等。特别是让学生了解到JX不

是一种新的语言，而是基于Javachpt的一种扩展特性。

(2)JX使用方法

重点通过实例让学生掌握JX的使用方法，包括表达式、条件渲染、列表

渲染，以及DOM属性、延展属性和注释的使用方法。

(3)JX转义工具

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

6、React开发中的约定(15分钟)：

通过实例讲解React开发中的一些特殊用法约定，比如单一根节点、组件

名约定、class和for的保留字、行内样式、HTML转译等，并让学生尝试使

用，加深印象。

教学方式：

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

教学媒介：

课程PPT讲义

教学重难点：

1、React的基本结构

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

讨论、思考题、作业：

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

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