JSX的基本使用笔记

JSX的基本使用：
React元素的属性名字使用驼峰命名法
特殊属性名 ：class >> className.  for >> htmlFor. tabindex >>tabIndex.
如果没有子节点的元素 可以直接 /> 结束
推荐使用小括号包裹JSX 从而避免JS中的自动插入分号陷阱。

JSX嵌入JS表达式：
数据存储在js中
语法：{JavaScript表达式} 
注意：语法中是单大括号，不是双大括号（和vue不同）
单大括号中可以使用任意的JavaScript表达式 例如简单数据类型，三元表达式 简单运算 函数调用表达式
js自身也是js表达式
注意：js中的对象是一个例外，一般只会出现在style属性中
注意：不能在{}中出现语句（比如：if/for等）

JSX的条件渲染：
根据条件渲染特定的JSX结构

jsx的列表渲染
如果要渲染一组数据，应该使用数组的map（）方法
注意要渲染列表时应该添加key属性，key属性的值要保证唯一
原则：map（）遍历谁，就给谁添加key属性
注意：尽量避免使用索引号作为key

JSX的样式处理：
行内样式 --- style 
<h1 style={ { color:'red',hight:'100px'} }>
JSX的样式处理
</h1>
类名  --- className （推荐）
同html一样

总结：
1.JSX是React的核心内容
2.JSX表示在JS代码中写入HTML结构，是React声明式的结构
3.使用JSX配合嵌入的JS表达式，条件渲染，列表渲染，可以描述任意UI结构
4.推荐使用className的方式给JSX添加样式
5.React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能