freeCodeCamp

3.3 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036163	Create a React Component	6	false		Criar um componente React

Description

A outra maneira de definir um componente React é com a sintaxe da class ES6. No exemplo a seguir, Kitten estende React.Component :

classe Kitten estende React.Component {
construtor (props) {
super (adereços);
}

render () {
Retorna (
<h1> Hi </ h1>
);
}
}

Isso cria uma classe ES6 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 .

Instructions

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! .

Tests

tests:
  - text: O componente React deve retornar um elemento <code>div</code> .
    testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).type() === "div", "The React component should return a <code>div</code> element.");'
  - text: O <code>div</code> retornado deve renderizar um cabeçalho <code>h1</code> dentro dele.
    testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()), "The returned <code>div</code> should render an <code>h1</code> header within it.");'
  - text: O cabeçalho <code>h1</code> deve conter a string <code>Hello React!</code> .
    testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).html() === "<div><h1>Hello React!</h1></div>", "The <code>h1</code> header should contain the string <code>Hello React!</code>.");'

Challenge Seed

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // Mude o código depois dessa linha


    // Mude o código acima dessa linha
  }
};

After Test

console.info('after the test');

Solution

// solution required

3.3 KiB Raw Blame History