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.
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.
MyComponent
.
testString: getUserInput => assert(getUserInput('index').replace(/\s/g, '').includes('classMyComponentextendsReact.Component{'), 'There should be a React component called MyComponent
.');
- text: MyComponent
should contain an h1
tag with text My First React Component!
Case and punctuation matter.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('h1').text() === 'My First React Component!'; })(), 'MyComponent
should contain an h1
tag with text My First React Component!
Case and punctuation matter.');
- text: MyComponent
should render to the DOM.
testString: assert(document.getElementById('challenge-node').childNodes.length === 1, 'MyComponent
should render to the DOM.');
```