有了对React的初步了解之后，我们先暂停一下。先了解一下另外一个领域 JSX

什么是JSX

简单来所，JSX就是HTML + JavaScript的结合。它是一种JavaScript的扩展语法。JSX帮助我们一起编写 HTML和JavaScript代码。

 const name = <h2> I am JSX </h2>

上面的代码是用JSX编写的，我们声明一个变量并初始化它的值，

我们初始化的值并不是任何 字符串、整数或者布尔值，
我们是这里分配了一个完整的“HTML”标签，里面有一些文字。

如果现在用这段代码，这将会抛出一个错误，因为浏览器并不理解这个JSX。毕竟，它不是有效的JavaScript代码。

因此，我们必须将其转换为有效的JavaScript代码，以便浏览器可以理解该代码。

我们需要使用像 Babel（将JSX转换为JavaScript）这样的工具，它就是一个 JavaScript编译器。

在这里，我们有一个常量变量名称“show”，它有一些值，我们正在返回该变量，因此，当你鼠标悬停在“显示”上时，你可以看到它向你显示它是一个 JSX 元素。

所以，现在写JSX非常简单（只要你理解一些语法）

为什么我们需要JSX

从上面的介绍，我们可以很简单的将“HTML”和JavaScript一起编写，因此React引入了JSX编写代码的方式，使代码易于编写和理解。

JSX中的变量

在JavaScript中，你只需要键入变量名，即可使用变量，如下面代码

const name = "JSX"

console.log("My name is "+name)

// My name is JSX

使用JSX 变量方式，当我们使用这些变量时，使你更好的理解

import React from "react"

const name = "JSX"
const num = 67
const arr = ["Orange "," banana "," mango"]

function App() {
  return (
    <div className="App">
     <p>My name is {name}</p>
     <p>My age is {num} </p>
     <p>My favourite fruits are: {arr} </p>
    </div>
  )
}
export default App

在“JSX”中，当我们需要使用变量时，直接放在”{ }”内即可

JSX注释

注释在任何编程语言中都非常重要，
在JSX中，我们可以轻松地注释任何东西，只需要在”{}”内

function App() {
  return (
    <div>
     {/* 这是一行注释 */}
    </div>
  )
}

export default App

JSX中的布尔值

JSX中，不能简单的写入 ‘True’或者‘False’来使用布尔值

const name = "JSX"
const ready = true
function App() {
  return (
    <div className="App">
     <p>My name is {name} - {ready} </p>
    </div>
  )
}

export default App

页面输出

我们可以看到网页上的 true没有打印出来，

因为 ready不是任何字符串，它是一个布尔值，所以我们必须将它转化为字符串，才可以打印它。

const name = "JSX"
const ready = true
function App() {
  return (
    <div className="App">
     <p>My name is {name} - {String(ready)} </p>
    </div>
  )
}
export default App

页面输出

JSX中的条件

JSX中的，我们没有了 if else 的方法
但，我们可以使用三元运算

const name = "JSX"
function App() {
  return (
    <div className="App">
        <p>{name === "JSX" ? "Hello JSX" : "Hello Word"} </p>
    </div>
  )
}
export default App

或者

const data= [ ]
function App() {
  return (
    <div className="App">
        <h1>这是个例子</h1>
        { data.length && <div>{ data.map(e => e)}</div>}
    </div>
  )
}
export default App

页面输出

如果你使用`&&`的方法

那么要注意下面几点

左边永远是个 布尔值

data.length > 0 && jsx
!!data.length && jsx
Boolean(data.length) && jsx

注意优先级比如

data.a || data.b && <div className="error" />

这样的代码实际等于

data.a ||（ data.b && <div className="error" />）

正确的写法应该是

（data.a || data.b） && <div className="error" />

JSX中的数组

如果你想在JSX中使用数组取数，那么你就必须用 map

map()函数是什么

map() 函数用于遍历数组并操作或者更改数据项，在React中，map()函数最常用于将数据列表呈现到DOM

import React from 'react'
const data= [
  { id: 'a', value: 'a'},
  { id: 'b', value: 'b'},
  { id: 'c', value: 'c'}
]
function App() {
  return (
    <div className="App">
        <h1>这是个例子</h1>
        {data.map(item => <div key={item.id}>{item.value}</div>)}
    </div>
  )
}
export default App

页面输出

结论

在这篇文章中，我们看到了很多关于JSX的东西，你始终需要记住的一些要点

1、JSX变量（字符串、布尔值、数组、整数）将写在大括号内。
2、在React中，我们必须使用 className 而不是class来向HTML元素加类。
3、React中的每个属性名称都是用驼峰命名法编写的

JSX 完全指南

什么是JSX

为什么我们需要JSX

JSX中的变量

JSX注释

JSX中的布尔值

JSX中的条件

如果你使用&&的方法

JSX中的数组

map()函数是什么

结论

如果你使用`&&`的方法