null
. One important thing to note is that React requires your function name to begin with a capital letter. Here's an example of a stateless functional component that assigns an HTML class in JSX:
// After being transpiled, the <div> will have a CSS class of 'customClass'Because a JSX component represents HTML, you could put several components together to create a more complex HTML page. This is one of the key advantages of the component architecture React provides. It allows you to compose your UI from many separate, isolated components. This makes it easier to build and maintain complex user interfaces.
const DemoComponent = function() {
return (
<div className='customClass' />
);
};
MyComponent
. Complete this function so it returns a single div
element which contains some string of text.
Note: The text is considered a child of the div
element, so you will not be able to use a self-closing tag.
MyComponent
should return JSX.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })(), 'MyComponent
should return JSX.');
- text: MyComponent
should return a div
element.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === 'div' })(), 'MyComponent
should return a div
element.');
- text: The div
element should contain a string of text.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').text() !== ''; })(), 'The div
element should contain a string of text.');
```