尚硅谷react课程-day01

1、初识react

注意:

1、引入库的顺序要先引入react核心库在引入react-dom库，最后引入babel库

 

2、script标签嵌套的JS代码的开始标签中要添加type="text/babel"确保配置js代码能转换为jax

3、使用reactdom虚拟dom方法时要确保正常使用ReactDOM.render方法ReactDOM.render(虚拟dom,容器），其容器的标签的获取必须用JS原生方法，jQuery行不通

4、虚拟dom语句的赋值标签语句不用标签包含

2、两种创建虚拟dom方法

A：利用虚拟dom语句的赋值标签语句（这种为jsx标准写法）

const VDOM = <h1>Hello,React</h1> 

B：就使用JS方法但调用react库，利用react.createElement(标签名，标签属性，标签内容)方法创建虚拟dom

 

结论：使用第二种方法对于标签嵌套写起来就特别麻烦，利用jsx可解决此弊端，利用jsx方法写会利用babel库转换为JS代码

总结：关于虚拟DOM：

1.本质是Object类型的对象（一般对象）

2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。

3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

3、jsx语法规则：

1.定义虚拟DOM时，不要写引号;

2.标签中混入JS表达式时要用{};

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

4.内联样式，要用style={{key:value}}的形式去写。

5.只有一个根标签;

6.标签必须闭合;

7.标签首字母

(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

\

 

4、一定注意区分：【js语句(代码)】与【js表达式】

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

下面这些都是表达式：

(1). a；

(2). a+b；

(3). demo(1)；

(4). arr.map() ；

(5). function test () {}

2.语句(代码)：

(1).if(){}；

(2).for(){}；

(3).switch(){case:xxxx}

react只支持利用表达式创建虚拟dom

5、测试，利用for循环表达式生成虚拟dom标签