持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

这是React系列第二期。 第一期：juejin.cn/post/710282…

1. 什么是JSX？

JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构

我们能借助JSX在React中创建HTML结构（页面UI结构），实现声明式UI编程。

2. 在 JSX 中嵌入表达式

在下面的例子中，我们声明了一个名为 name 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：

不仅仅是变量，我们可以用大括号使用所有的JS表达式，以实现在声明式UI变成的过程中嵌入JS操作的效果。

3. JSX实现样式控制

JSX实现样式控制也是借助大括号来完成的。

const styleObj = {
    color:red
}

function App() {
  return (
    <div className="App">
      <div style={ styleObj }>this is a div</div>
    </div>
  )
}

export default App

同样也可以借助CSS选择器来完成样式控制，具体操作与JS中几乎一样，我们也推荐使用class的方式进行样式控制，饿哦们可以在app.css文件中写好css的格式，在需要的组建上声明出类信息，完成配置信息的复用以及一键式部署。

app.css

.title {
  font-size: 30px;
  color: blue;
}

import './app.css'
const showTitle = true
function App() {
  return (
    <div className="App">
      <div className='title'>this is a div</div>
    </div>
  )
}

4. JSX注意事项

1. JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代
2. 所有标签必须形成闭合，成对闭合或者自闭合都可以
3. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className for -> htmlFor
4. JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现