react-day2

一：holle react

<div id="text"></div>


<script type="text/babel">
        // 1:创建一个虚拟DOM
        const VDOM = <h1>holle,react</h1> ;
        // 2:渲染虚拟dom到页面
        ReactDOM.render(VDOM,document.querySelector('#text'))
</script>

注意：创建一个虚拟容器不需要加引号，因为这个不是js，是jsx

渲染语法：ReactDOM.render( 虚拟dom ，容器 )

1：为什么要用 jsx 而不用 js

js创建虚拟dom繁琐

jsp创建虚拟dom

 js创建虚拟dom

 

2：虚拟DOM是什么

虚拟DOM就是一个普普通通的对象

 

 二：jsx语法规则

1：定义虚拟DOM时不要写引号

 2：标签中混入js表达式时要用{}

{}中写的是表达式，不是js语句

什么是表达式：一个表达式可以产生一个值

1：a

2：a+b

3：demo(1)

4：arr.map()

5：function test(){}

什么是语句（代码）：

1：if(){}

2：for(){}

3：switch(){case： }

等等

 3：样式的类名指定不要用class，用className

 4：定义内联样式用{{}}

 5：只能有一个根标签

 

 6：标签必须闭合

 

7：标首字母

        ：若小写首字母开头，则将标签转为html中同名的元素，若没有同名元素则报错

        ：若大写首字母开头，代表定义的组件

8：如何在jsx中进行标签循环

 三：模块与组件，模块化与组件化的理解

1：模块

理解：向外提供固定功能的js程序，一般来说就是一个js文件。

为什么要拆成模块：随着业务逻辑的增加，代码愈来愈多且复杂

作用：复用js，简化js的编写，提高js运行

2：组件

理解：实现局部功能效果的代码和资源的集合html、css、js、images。。。

为什么：一个界面功能更复杂

作用：复用代码，简化项目编码，提高运行效率

3：模块化

当应用的js都以模块来编写，这个应用就是一个模块化应用

4：组件化

当应用是以多组件的方式实现的，这个应用就是组件化应用