2.6 KiB
2.6 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
587d7dbc367417b2b2512bb1 | Create a Simple JSX Element | 6 | false | 创建一个简单的JSX元素 |
Description
{ 'this is treated as JavaScript code' }
: { 'this is treated as JavaScript code' }
。记住这一点,因为它用于未来的几个挑战。但是,由于JSX不是有效的JavaScript,因此必须将JSX代码编译为JavaScript。转换器Babel是这个过程的流行工具。为了您的方便,它已经在幕后为这些挑战添加。如果您碰巧编写语法无效的JSX,您将看到这些挑战中的第一个测试失败。值得注意的是,在引擎盖下,挑战是调用ReactDOM.render(JSX, document.getElementById('root'))
。这个函数调用是将JSX置于React自己的DOM轻量级表示中的原因。然后,React使用自己的DOM快照来优化仅更新实际DOM的特定部分。 Instructions
div
元素分配给常量JSX
。用h1
元素替换div
并添加文本Hello JSX!
在里面。 Tests
tests:
- text: 常量<code>JSX</code>应该返回一个<code>h1</code>元素。
testString: 'assert(JSX.type === "h1", "The constant <code>JSX</code> should return an <code>h1</code> element.");'
- text: <code>h1</code>标签应该包含文本<code>Hello JSX!</code>
testString: 'assert(Enzyme.shallow(JSX).contains("Hello JSX!"), "The <code>h1</code> tag should include the text <code>Hello JSX!</code>");'
Challenge Seed
const JSX = <div></div>;
After Test
console.info('after the test');
Solution
// solution required