freeCodeCamp

4.0 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036170	Create a Stateful Component	6	false		Criar um componente com estado

Description

Um dos tópicos mais importantes no React é o 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 de state 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 de state pode ser tão complexo ou simples quanto você precisar. Observe que você deve criar um componente de classe estendendo React.Component para criar um state como este.

Instructions

Há um componente no editor de código que está tentando processar uma propriedade de 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

4.0 KiB Raw Blame History