2.8 KiB
2.8 KiB
id | title | challengeType | isRequired |
---|---|---|---|
587d7dbc367417b2b2512bb1 | Create a Simple JSX Element | 6 | false |
Description
{ 'this is treated as JavaScript code' }
. Keep this in mind, since it's used in several future challenges.
However, because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. The transpiler Babel is a popular tool for this process. For your convenience, it's already added behind the scenes for these challenges. If you happen to write syntactically invalid JSX, you will see the first test in these challenges fail.
It's worth noting that under the hood the challenges are calling ReactDOM.render(JSX, document.getElementById('root'))
. This function call is what places your JSX into React's own lightweight representation of the DOM. React then uses snapshots of its own DOM to optimize updating only specific parts of the actual DOM.
Instructions
div
element to the constant JSX
. Replace the div
with an h1
element and add the text Hello JSX!
inside it.
Tests
tests:
- text: The constant <code>JSX</code> should return an <code>h1</code> element.
testString: assert(JSX.type === 'h1', 'The constant <code>JSX</code> should return an <code>h1</code> element.');
- text: The <code>h1</code> tag should include the text <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
ReactDOM.render(JSX, document.getElementById('root'))
Solution
const JSX = <h1>Hello JSX!</h1>;