内容目录
Toggle序言
React 由 Meta(前身为 Facebook)开发,它使开发人员能够创建可重复使用的组件来完成前端页面。
不过,需要注意的是,从技术上讲,React 并不是一个框架。这是因为它只负责呈现用户界面的组件。不过,React 提供了一种替代 Angular 和 Vue 等框架的解决方案,让我们可以使用它来完成复杂的前端页面功能。
本篇文章将介绍 React 中的一个重要语法--JSX。
JSX 也是编写 React 的常用方法之一,因此我们将在下一节中介绍。
- 什么是 JSX?
- JSX 语言方法
- 使用 JSX 构建 React 组件
什么是 JSX?
在讨论 JSX 之前,让我们回顾一下上一篇文章中讲解的 React DOM 语法。
const dish = React.createElement("h1", "Hello World") ReactDOM.render(dish, document.getElementById("root"))
上述 React 语法可转换为以下 HTML DOM。
Hello World
从上面的代码中可以想象到,JavaScript 中的 React 语法相对较难理解,如果是更复杂的 HTML 文件,有数千行,代码就会更加复杂和难以理解。
因此,Facebook 团队在开发 React 的同时,也针对这一缺陷添加了一种新的、更简洁的语法,用于构建前端网络组件:JSX。
JSX 是由 "JS"(JavaScript)和 "X"(XML)两个单词组成的缩写。JavaScript 和 "X "XML 两个单词组成的缩写。虽然 JSX 与 HTML 有些相似,但它本质上是通过 React 语法构建的组件,下面是一个简单的 JSX 示例。
import React from 'react'; import ReactDOM from 'react-dom/client'; const myElement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
您可以看到,中间部分与 HTML 语法几乎相同,但程序的开头和结尾部分使用的是 JavaScript 语法。
事实上,计算机会使用一些工具来翻译 JSX 语法,以生成纯 HTML,我们将在后面的文章中讨论这些工具。
JSX 语言方法
JSX 语法看起来像 HTML,但它实际上是 JavaScript 和 React 的语法,因此本文将解释 JSX 语法。
className
在一般的 HTML 语法中,如果我们想给一个标记添加一个类,可以这样写
Hello World
但是,在 JSX 语法中,要在标签中添加任何类,都要将其改为 className。
Hello World
嵌套元素
JSX 的语法与 HTML 相同,并支持嵌套格式。JSX 还可以创建自己的组件,并将其转化为嵌套格式。
<AnimalList> <Dog /> <Cat /> <Bird /> </AnimalList>
复合表达式
JSX 本身也是一种 JavaScript 语法,因此它完全支持我们之前讨论过的 JavaScript 语法,以及 ES6 中的语法,例如模板字面。
const fruits = ["Apples","Bananas","Cherries"] const myElement = (
- {fruits[0]}
- {fruits[1]}
- {fruits[2]}
`I Love ${fruits[0]}`
);
在 JSX 中,您可以用大括号将 JavaScript 变量包起来,也可以使用 Template Literals 语法将字符串与 JSX 结合起来。
JavaScript Map
由于我们可以使用 JavaScript 语法,因此还可以使用 Array 内置的 map 函数与 JSX 集成。
const fruits = ["Apples","Bananas","Cherries"] const myElement = ( <ul> {fruits.map(element=>{ <li>{element}</li> })} </ul> ) ;
使用地图功能还可以将多个 li 组合在一起。
使用 JSX 构建 React 组件
最后,我们将以最开始的代码为例,讲解如何构建组件。
import React from 'react'; import ReactDOM from 'react-dom/client'; const myElement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> < /ul> ); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
第一行和第二行用于调用 react 和 react-dom/client 编写的库,以及使用内置函数。
中间的 const 用于声明,JSX 语法可以放在里面,在里面可以写一些 HTML,写完后就会得到一个名为 myElement 的元素。
最后,我们使用 ReactDOM 中的 createRoot 函数创建一个带有 "id="root "的 DOM,然后将我们创建的 myElement 元素放入根中。
完成上述过程后,您就可以构建 React 组件了。
结论
本文介绍了一种非常重要的 React 语法--JSX,它也用于简化 React 组件的构建。本文还解释了 JSX 的原理、语法以及如何构建组件。
如果您有任何建议或问题,欢迎留言!
如果您喜欢这一系列文章,请不要犹豫,点击 "喜欢 "并分享,让更多人看到它!
引用
React 白話文運動系列
JavaScript 异步等待 - React 白话运动 03