3.4 KiB
3.4 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036162 | Create a Stateless Functional Component | 6 | false |
Description
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' />
);
};
Instructions
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.
Tests
tests:
- text: <code>MyComponent</code> should return JSX.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })(), '<code>MyComponent</code> should return JSX.');
- text: <code>MyComponent</code> should return a <code>div</code> element.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === 'div' })(), '<code>MyComponent</code> should return a <code>div</code> element.');
- text: The <code>div</code> element should contain a string of text.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').text() !== ''; })(), 'The <code>div</code> element should contain a string of text.');
Challenge Seed
const MyComponent = function() {
// change code below this line
// change code above this line
}
After Test
ReactDOM.render(<MyComponent />, document.getElementById('root'))
Solution
const MyComponent = function() {
// change code below this line
return (
<div>
Demo Solution
</div>
);
// change code above this line
}