为什么JSX很重要?

JSX 是 JavaScript 的语法扩展，可让你在 JavaScript 文件中编写类似 HTML 的标记。大多数 React 开发者更喜欢 JSX 的简洁性，并且大多数代码库都使用它。所以在React生态中，JSX生万物，弄清楚JSX才能更方便我们学习react。

为什么 React 要使用JSX?

传统的页面HTML,CSS,Javascript各司其职，但是随着Web的发展，现代web变得更具交互性，逻辑越来越决定内容。所以react 渲染逻辑和标记一起存在于同一个地方 - 组件。将组件的渲染逻辑和标记放在一起可确保它们在每次编辑时都保持同步。

每个React组件就代表一个Javascript函数。React 组件使用称为 JSX 的语法扩展来表示该标记。JSX 看起来很像 HTML，但更严格一些，并且可以显示动态信息。

React和JSX是相互配合独立的，JSX 是一个语法扩展，而 React 是一个 JavaScript 库。

JSX和HTML

虽然HTML和JSX很像，但是直接复制和使用html在JSX中是会报错的，还是使用官网推荐的更为专业的转换器，来配合使用最佳。

JSX规则

1.返回单个根元素

要从组件返回多个元素，请使用单个父标签封装它们。原理是因为JSX 看起来像 HTML，但在底层它被转换为普通的 JavaScript 对象。如果不将它们封装到数组中，则不能从函数返回两个对象。这解释了为什么你也不能返回两个 JSX 标签而不将它们封装到另一个标签或片段中。

2.闭合所有标签，驼峰式命名

JSX也是要求闭合标签。标签的属性大多是驼峰式命名。由于历史原因，aria-* 和 data-* 属性在 HTML 中用破折号书写

JSX 中使用大括号的 JavaScript

JSX将组件的渲染逻辑和标记放在一起可确保它们在每次编辑时都保持同步。而我们常常需要标记内添加一些 JavaScript 逻辑或引用动态属性。

1.变量：当你想将一个字符串属性传递给 JSX 时，你可以将它放在单引号或双引号中；

2.对象：使用 “双大括号”：JSX 中的 CSS 和其他对象（内联 style 属性以驼峰式书写）；

3.函数：当然javascript中函数也属于对象；

export default function Avatar() {

const avatar = '<https://xxx/xxx.jpg>';

const description = 'react 保温杯';

const renderFoot=()=> <div> i am foot</div>

return ( 
     { /* 字符串类型 */ } 
    <img style={{ marginTop:'100px' }} class="avatar" src="{avatar}" 
    alt="{description}建议直接上传图片文件">

    { /* 数组节点类型 */ } 
    
    { /* 三元运算 */ } 
    
    { /* 函数执行 */ }
    { renderFoot }

);

}

学习react第二天-JSX基础(一)