4.0 KiB
4.0 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036170 | Create a Stateful Component | 6 | false | Criar um componente com estado |
Description
state
. O estado consiste em todos os dados que seu aplicativo precisa conhecer, que podem mudar com o tempo. Você quer que seus aplicativos respondam a mudanças de estado e apresentem uma interface atualizada quando necessário. O React oferece uma boa solução para o gerenciamento de estado de aplicativos da Web modernos. Você cria o estado em um componente React declarando uma propriedade de state
na classe do componente em seu constructor
. Isso inicializa o componente com o state
quando ele é criado. A propriedade state
deve ser configurada para um object
JavaScript. Declarar isso é assim: this.state = {
// descreva seu estado aqui
} Você tem acesso ao objeto destate
durante a vida útil do seu componente. Você pode atualizá-lo, renderizá-lo em sua interface do usuário e passá-lo como props para componentes filhos. O objeto destate
pode ser tão complexo ou simples quanto você precisar. Observe que você deve criar um componente de classe estendendoReact.Component
para criar umstate
como este.
Instructions
name
de seu state
. No entanto, não há state
definido. Inicialize o componente com state
no constructor
e atribua seu nome a uma propriedade de name
. Tests
tests:
- text: <code>StatefulComponent</code> deve existir e renderizar.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("StatefulComponent").length === 1; })(), "<code>StatefulComponent</code> should exist and render.");'
- text: <code>StatefulComponent</code> deve renderizar um <code>div</code> e um elemento <code>h1</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find("div").length === 1 && mockedComponent.find("h1").length === 1; })(), "<code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.");'
- text: O estado de <code>StatefulComponent</code> deve ser inicializado com um <code>name</code> propriedade definido como uma string.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === "object" && typeof initialState.name === "string"); })(), "The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.");'
- text: O <code>name</code> propriedade no estado de <code>StatefulComponent</code> deve ser renderizado no elemento <code>h1</code> .
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find("h1").text() === initialState.name; })(), "The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.");'
Challenge Seed
class StatefulComponent extends React.Component {
constructor(props) {
super(props);
// initialize state here
}
render() {
return (
<div>
<h1>{this.state.name}</h1>
</div>
);
}
};
After Test
console.info('after the test');
Solution
// solution required