一、JSX

在介绍JSX之前，我们要引入React的两个核心库

react.js：React核心库
- unpkg.com/react@17/um…
react-dom.js：操作DOM
- unpkg.com/react-dom@1…

JSX和JS还是有区别的，浏览器只认识JavaScript，所以还需要引入babel来将JSX转成浏览器认识的JS

unpkg.com/babel-stand…

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

下面我们就先简单使用下JSX，页面上简单展示一个h1标签内容

使用react，要先定义一个容器

<div id="demo"></div>

script 标签类型要使用text/babel

<script type="text/babel">
    const VDom = (
        <h1>
            Hello React
        </h1>
    )
</script>

使用ReactDOM中render函数进行挂载到页面

 ReactDOM.render(VDom, document.getElementById('demo'))

JSX使用还是很简单的

JSX 全称是JavaScript XML
是react定义的一种类似于XML的JS扩展语法，作用: 用来简化创建虚拟DOM
JSX基本语法规则
- （1）遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- （2）遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
- （3）样式的类名指定不要用class，要用className，内联样式，要用style={{key:value}}的形式去写
- （4）标签中混入Js表达式时要用{}，只有一个根标签，标签必须闭合
- （5）标签首字母，若是小写字母开头，则将标签转为html中同名元素，若html中无该标签对应的同名元素，则报错；若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

对上面的代码进行修改，加上简单的样式看下

<script type="text/babel">
    const myData = 'hello react', myClass = 'test'
    const VDom = (
        <div>
          <h1 className={myClass}>
          <span style={{ color: 'white', fontSize: '30px' }}>
              {myData}
          </span>
          </h1>
        </div>
    )
</script>

<style>
  .test {
    background-color: #1b6d85;
    width: 200px;
  }
</style>

基本的使用规则弄清楚后，我们来做一个小案例，使用JSX在页面上展示一个有序列表

<script type="text/babel">
  const data = [ '科比', '乔丹', '邓肯', '约翰逊', '韦德']
  const VDom = (
      <div>
        <h1>NBA TOP5</h1>
        <ol>
          {
            data.map((item, index) => {
              return <li key={index}>{item}</li>
            })
          }
        </ol>
      </div>
  )
  ReactDOM.render(VDom, document.getElementById('demo'))
</script>

可以看见在遍历时我们使用的是map函数，为什么不使用for循环去遍历呢，因为在JSX中，使用JS只能使用表达式。什么是表达式，简单来说，就是有返回值的，用一个变量去接能获取到值的。

二、为什么使用 JSX？

我们先来看下官方是怎么来说的

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

React 并没有采用将标记与逻辑分离到不同文件这种人为的分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

总结就是编写代码时很方便，使代码更加清晰

02 - JSX? 是什么