2.7 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036163	Crie um Componente React	6	301386	create-a-react-component

--description--

A outra forma de definir um componente React é com a sintaxe class do ES6. No exemplo a seguir, Kitten extende React.Component:

class Kitten extends React.Component {
  constructor(props) {
    super(props);
  }

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

Isso cria a classe ES6 Kitten que extende a classe React.Component. Então a classe Kitten agora possui acesso a diversos recursos úteis do React, como local state e lifecycle hooks. Não se preocupe se você não estiver familiarizado com esses termos ainda, eles serão abordados em detalhes maiores nos desafios futuros. Também note que a classe Kitten possui um construtor definido dentro dele que chama super(). O construtor usa super() para chamar o construtor da classe pai, nesse caso React.Component. O construtor é um método especial usado durante a inicialização de objetos que são criados com a palavra-chave class. É uma boa prática chamar o constructor de um componente com super, e passar props para ambos. Isso garante que o componente é inicializado corretamente. Por agora, saiba que é padrão que esse código seja incluído. Em breve você verá outros usos para o construtor assim como para props.

--instructions--

MyComponent é definido no editor de código usando a sintaxe de classe. Termine de escrever o método render para que ele retorne um elemento div que contém um h1 com o texto Hello React!.

--hints--

O componente React deve retornar um elemento div.

assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');

A div retornada deve renderizar um título h1 dentro dele.

assert(
  /<div><h1>.*<\/h1><\/div>/.test(
    Enzyme.shallow(React.createElement(MyComponent)).html()
  )
);

O título h1 deve conter a string Hello React!.

assert(
  Enzyme.shallow(React.createElement(MyComponent)).html() ===
    '<div><h1>Hello React!</h1></div>'
);

--seed--

--after-user-code--

ReactDOM.render(<MyComponent />, document.getElementById('root'))

--seed-contents--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // Change code below this line



    // Change code above this line
  }
};

--solutions--

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // Change code below this line
    return (
      <div>
        <h1>Hello React!</h1>
      </div>
    );
    // Change code above this line
  }
};

2.7 KiB Raw Blame History