注：前半段为今天学习的Jsx文档，后半段就有一些稍杂一些的React官方文档(核心篇1-8总结)如有兴趣可以看看。

React JSX

jsx是一种javascript的语法扩展，jsx用来声明React当中的元素。Jsx对象表示:Babel会把Jsx转译为一个React.createElement()函数调用.例:

const element=(
    ①
    <h1 className="getting">Hello.world</h1>
    👇从①到②
    ②
    const element=React.createElement(
        'h1',
        {className='getting'},
        'hello.world'
    )
);
---------------------------------------------------------------------------------------
                                    分界线
---------------------------------------------------------------------------------------
const element=<h1>Hello World!</h1>
这个变量的声明

这种语法被称为JSX，是Javascript的一种扩展语法。我们推荐在React中使用JSX去编写我们的UI界面。也许你会觉得JSX很像是模板语言，但是它具有JavaScript的全部功能。

React信奉渲染逻辑与UI逻辑是天然耦合的：如何处理事件，状态如何随着时间变化以及数据如何显示在页面上。React用被称为“组件”的松散的耦合单元（同时包含标签代码与逻辑代码）来代替手动地将标签与代码逻辑分散在不懂的文件里。我们将会在接下来的介绍里介绍组件。 React不强制要求使用JSX，但是大部分开发者在开发时发现将UI标签放在JavaScript代码里对观察代码渲染十分有帮助。当然，使用JSX能在开发时向开发者显示更多游泳的错误和警告信息

JSX基本语法

定义标签哈斯，只允许被一个标签包裹
标签一定要闭合
如果使用数据形式，必须对数组中的每一个元素都要给一个唯一的key值
元素如果是小写首字母则是元素，如果是大写首字母则是组件元素
注释需要用{}包裹
我们也可以使用命名空间的方式以解决组件相同名称冲突的问题
JSX中，我们必须使用驼峰的形式来书写事件的属性名
属性值要使用表达式；只要将{}来替换“”
传入数据的展开性{…props}
for属性改成htmlFor
class属性改为className

在编译之后，jsx其实会被转化为普通的javascript对象。这也就意味着可以下if或者for语句里使用JSX，将它复制被变量当做参数传入，作为返回值都可以：

function getGreeting(user){
if(user){
    return  <h1>hello,{formatName(user)}</h1>;
}
return  <h1>hello,Stranger</h1>;
}

JSX属性

可以使用引号来定义以字符串为值的属性：const element=<div tabIndex='0'></div>;
也可以使用大括号来定义以javascript表达式为值得属性：const element=<img src={user.avatarUrl}></img>;
使用了大括号包裹的javascript表达式时就不要再到外面套引号了。JSX会将引号当中的内容识别为字符串而不是表达式。

JSX嵌套

如果Jsx标签是闭合式的，那么你需要在结尾处使用/>,就好像XML/HTML一样：const element = <img src={user.avatatUrl}/>

JSX标签同样可以相互嵌套：

const element = {
 <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
}
注意：JSX的特性更接近javascript而不是HTML，所以ReactDOM使用camelCase小驼峰命名来定义属性的名称，而不是使用HTML的属性名称。

记录：

组件名必须以大写字母开头/用户定义组件必须首字母大写

当元素类型以小写字母开头时，它表示一个内置的组件，如 <div> 或 <span>，将导致字符串 'div' 或 'span' 传递给 
React.createElement。 以大写字母开头的类型，如 <Foo /> 编译为 React.createElement(Foo)，
并且它正对应于你在 JavaScript 文件中定义或导入的组件。

所有React组件都必须像纯函数一样保护Props不被改

“纯函数” 不会尝试修改入参，多次调用结果仍不变。

※（老版本）React页面只要有参数值为“html”，如用户名为html则挂页

元素是构成React的最小砖块->与浏览器Dom不同，React元素是创建小开销的对象,React.Dom负责更新Dom与React元素保持一致

React文档笔记

React JSX

JSX基本语法

JSX属性

JSX嵌套