什么是react?

用于构建用户界面的JavaScript库。

什么是JSX？

React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

我们先看下以下代码：

const element =<h1>Hello, React!</h1>;

这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML，它被称为 JSX， 一种 JavaScript 的语法扩展。我们推荐在 React 中使用 JSX 来描述用户界面。JSX 是在 JavaScript 内部实现的。

我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。

说了这么多，接下来我们来具体地去使用JSX！

创建项目

第一步，通过脚手架的命令“npx create-react-app hello-jsx”来创建一个react项目。

第二步，进入“hello-jsx”文件夹执行“npm start”命令，启动项目，当浏览器出现以下界面说明我们创建成功了！

Hello，JSX

每学习一门技术，我们总是会习惯性地打印“Hello，World”，这次也不例外。首先我们在项目的src文件夹下找到index.js文件，把里面全部删掉，编写我们的代码。

1、导入react

import React from 'react'
import ReactDOM from 'react-dom'

2、使用JSX创建react元素

const title = (<h1  className="title">hello JSX</h1>)

3、渲染react元素

ReactDOM.render(title, document.getElementById('root'))

ok，编写完成，是不是比react写的代码简单得多了，完整代码如图所示

打开浏览器检验效果！

JavaScript表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。

1、我们创建一个变量name

const name  = 'JSX'

2、在创建react元素的时候，我们用花括号{}接收。

const title = (<h1  className="title">hello {name}</h1>)

完整代码如图所示。

条件渲染

我们可以使用if语句、三元运算表达式和“&&”用来做条件渲染，由于if和三元运算差不多，这里只写三元运算表达式和“&&”。

1、创建一个变量

const isLoading = true

2、创建一个函数

const loadData = () => {  return isLoading ? (<div>loading...</div>) : (<div>数据加载完成</div>)}

3、使用JSX创建react元素

const title = (<h1 className='title'>条件渲染：{loadData()}</h1>)

4、渲染react元素

ReactDOM.render(title, document.getElementById('root'))

完整代码如图所示。

“&&”也可以实现同样的效果，写法如下所示。

const loadData = () => {  return isLoading && (<div>loading...</div>) }

列表渲染

1、创建列表

 const plays = [
  {id: 1, name : "打球"},
  {id: 2, name : "跳舞"},
  {id: 3, name : "唱歌"},
 ]

2、使用JSX创建react元素

 const list =  (    <ul>      {plays.map(item => <li key={item.id}>{item.name}</li>)}    </ul> )

3、渲染react元素

ReactDOM.render(list, document.getElementById('root'))

完整代码如图所示。

设置样式

1、引入外部css文件

import './index.css'

2、创建react元素

const title = (<h1  className="title">hello JSX</h1>)

3、渲染react元素

ReactDOM.render(title, document.getElementById('root'))

完整代码如图所示。

ok，在本文我们学习了如何用JSX实现一些简单的应用，包括：

• javaScript表达式
• 条件渲染
• 列表渲染
• 设置样式

写在最后

好兄弟可以点赞并关注我的公众号“javaAnswer”，全部都是干货。