class
ES6. No exemplo a seguir, Kitten
estende React.Component
: classe Kitten estende React.Component {Isso cria uma classe ES6
construtor (props) {
super (adereços);
}
render () {
Retorna (
<h1> Hi </ h1>
);
}
}
Kitten
que estende a classe React.Component
. Portanto, a classe Kitten
agora tem acesso a muitos recursos úteis do React, como ganchos do estado local e do ciclo de vida. Não se preocupe se você ainda não estiver familiarizado com esses termos, eles serão abordados em maiores detalhes em desafios posteriores. Observe também que a classe Kitten
possui um constructor
definido dentro dela que chama super()
. Ele usa super()
para chamar o construtor da classe pai, neste caso, React.Component
. O construtor é um método especial usado durante a inicialização de objetos criados com a palavra-chave class
. É uma boa prática chamar o constructor
um componente com super
e passar props
para ambos. Isso garante que o componente seja inicializado corretamente. Por enquanto, saiba que é padrão para este código ser incluído. Logo você verá outros usos para o construtor, bem como props
. MyComponent
é definido no editor de código usando a sintaxe de classe. Termine de escrever o método de render
para que ele retorne um elemento div
que contenha um h1
com o texto Hello React!
. div
.
testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).type() === "div", "The React component should return a div
element.");'
- text: O div
retornado deve renderizar um cabeçalho h1
dentro dele.
testString: 'assert(/div
should render an h1
header within it.");'
- text: O cabeçalho h1
deve conter a string Hello React!
.
testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).html() === "h1
header should contain the string Hello React!
.");'
```
## Challenge Seed