2.8 KiB
2.8 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036168 | Write a React Component from Scratch | 6 | false |
Description
class
which extends React.Component
. It has a render method that returns HTML (from JSX) or null
. This is the basic form of a React component. Once you understand this well, you will be prepared to start building more complex React projects.
Instructions
MyComponent
that extends React.Component
. Its render method should return a div
that contains an h1
tag with the text: My First React Component!
in it. Use this text exactly, the case and punctuation matter. Make sure to call the constructor for your component, too.
Render this component to the DOM using ReactDOM.render()
. There is a div
with id='challenge-node'
available for you to use.
Tests
tests:
- text: There should be a React component called <code>MyComponent</code>.
testString: getUserInput => assert(getUserInput('index').replace(/\s/g, '').includes('classMyComponentextendsReact.Component{'), 'There should be a React component called <code>MyComponent</code>.');
- text: <code>MyComponent</code> should contain an <code>h1</code> tag with text <code>My First React Component!</code> Case and punctuation matter.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('h1').text() === 'My First React Component!'; })(), '<code>MyComponent</code> should contain an <code>h1</code> tag with text <code>My First React Component!</code> Case and punctuation matter.');
- text: <code>MyComponent</code> should render to the DOM.
testString: assert(document.getElementById('challenge-node').childNodes.length === 1, '<code>MyComponent</code> should render to the DOM.');
Challenge Seed
// change code below this line
Solution
// change code below this line
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>My First React Component!</h1>
</div>
);
}
};
ReactDOM.render(<MyComponent />, document.getElementById('challenge-node'));