虽然平凡，但时时想着超越平凡

React JSX

1. JSX

1、JavaScript XML：一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖

2、作用: 用来简化创建虚拟DOM

3、写法：var ele =

Hello JSX!

注意1：它不是字符串, 也不是HTML/XML标签

注意2：它最终产生的就是一个JS对象

4、标签名任意: HTML标签或其它标签

5、标签属性任意: HTML标签属性或其它

6.基本语法规则

1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
	(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
	(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

7、babel.js的作用

1) 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

2) 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

2. 渲染虚拟DOM(元素)

1、 语法: ReactDOM.render(virtualDOM, containerDOM)

2、作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

3、参数说明

1) 参数一: 纯js或jsx创建的虚拟dom对象

2) 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个p)

1. 案例

动态展示如下列表

【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笔记`，可以获得全套笔记