学习react（一）

1、创建虚拟dom并上树的两种方式

//js方式
const vNode = React.createElement('h1', {id:'title'}, 'Hello, world!');
ReactDOM.render(vNode, document.getElementById('test'));

//jsx方式
const vNode = <h1 id="title">Hello, world!</h1>;
ReactDOM.render(vNode, document.getElementById('test'));

2、jsx语法

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

  2、标签中混用js表达式时需要用{}

    注意区分【js语句】和【js代码】

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

         a；a+b；function(arg);arr.map();function test(){}

      「2」语句：

         if语句；for循环；switch语句

  3、样式的类名指定不要用class，需要用className(因为class是ES6内类的关键词)

  4、 内联样式要用style={{key:value}}的形式去写，且属性名要使用小驼峰

　　5、虚拟dom必须只有一个根标签

　　6、标签必须闭合

  7、标签首字母

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

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