2018-10-10 22:03:03 +00:00
---
id: 587d7dbc367417b2b2512bb1
challengeType: 6
2020-09-17 16:13:42 +00:00
forumTopicId: 301390
2020-10-01 15:54:21 +00:00
title: 创建一个简单的 JSX 元素
2018-10-10 22:03:03 +00:00
---
## Description
2020-09-17 16:13:42 +00:00
< section id = 'description' >
< strong > 简介:< / strong > React 是由 Facebook 创建和维护的开源视图库。它是渲染当代 Web 应用程序用户界面( UI) 的绝佳工具。
React 使用名为 JSX 的 JavaScript 语法扩展,允许你直接在 JavaScript 中编写 HTML。这有几个好处。它允许你在 HTML 中使用 JavaScript 的完整程序功能, 并有助于保持代码的可读性。在大多数情况下, JSX 类似于你已经学过的 HTML, 但是在这些挑战中将会涉及一些关键差异。
例如,因为 JSX 是 JavaScript 的语法扩展,所以你实际上可以直接在 JSX 中编写 JavaScript。要做到这一点, 你只需在花括号中包含你希望被视为 JavaScript 的代码:< code > {“这被视为 JavaScript 代码”}< / code > 。请牢记这个写法,你将会在接下来的挑战中使用。
但是,由于浏览器不能解析 JSX, 因此必须将 JSX 代码编译为 JavaScript。在这个过程中, 转换器 Babel 是一个很受欢迎的工具。后续挑战已经在后台引入了 Babel, 你可以直接写 JSX 代码。如果你的代码不符合 JSX 语法,那么挑战中的第一个测试就不会通过。
值得注意的是,这些挑战在底层调用< code > ReactDOM.render(JSX, document.getElementById('root'))< / code > 。这个函数调用是将你的 JSX 置于 React 自己的轻量级 DOM 中。然后, React 使用自己的 DOM 快照来优化更新实际 DOM 的特定部分。
< / section >
2018-10-10 22:03:03 +00:00
## Instructions
2020-09-17 16:13:42 +00:00
< section id = 'instructions' >
< strong > 说明:< / strong > 当前代码使用 JSX 将< code > div< / code > 元素赋值给常量< code > JSX< / code > 。将< code > div< / code > 替换为< code > h1< / code > 元素,并在其中添加文本< code > Hello JSX!< / code > 。
< / section >
2018-10-10 22:03:03 +00:00
## Tests
< section id = 'tests' >
```yml
tests:
- text: 常量< code > JSX</ code > 应该返回一个< code > h1</ code > 元素。
2020-02-17 16:40:55 +00:00
testString: assert(JSX.type === 'h1');
2020-09-17 16:13:42 +00:00
- text: < code > h1</ code > 标签应该包含文本< code > Hello JSX!</ code > 。
2020-02-17 16:40:55 +00:00
testString: assert(Enzyme.shallow(JSX).contains('Hello JSX!'));
2018-10-10 22:03:03 +00:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'jsx-seed' >
```jsx
2020-09-17 16:13:42 +00:00
2018-10-10 22:03:03 +00:00
const JSX = < div > < / div > ;
```
< / div >
### After Test
< div id = 'jsx-teardown' >
```js
2020-09-17 16:13:42 +00:00
ReactDOM.render(JSX, document.getElementById('root'))
2018-10-10 22:03:03 +00:00
```
< / div >
< / section >
## Solution
< section id = 'solution' >
2020-09-17 16:13:42 +00:00
2018-10-10 22:03:03 +00:00
```js
2020-09-17 16:13:42 +00:00
const JSX = < h1 > Hello JSX!< / h1 > ;
2018-10-10 22:03:03 +00:00
```
2020-08-13 15:24:35 +00:00
2020-09-17 16:13:42 +00:00
< / section >