Criando primeiro componente

Nesta aula veremos como criar componentes React de uma maneira mais adequada.

Criando um componente React

Um componente no React nada mais é que uma função que retorna um JSX. Esses componentes podem receber parâmetros, chamados de propriedades.

Veja abaixo um exemplo:

function Welcome(props) {
  return <h1>Hello {props.name} </h1>
}

ReactDOM.render(
  <Welcome name="Paulo" />,
  document.getElementById('root')
);

Ao renderizar, será exibido em tela: "Hello Paulo".

Reutilização do componente

O intuito de criar um componente é poder reutilizá-lo. Porém, se tentarmos chamar essa mesma função novamente, mesmo que em formato de componente, nosso programa apresentará um erro.

Isso acontece porque o render espera um único componente. Para resolver isso, é criado um componente que reúne todos os outros.

Acompanhando a aula, crie o componente App e ao final seu o código deve ficar como abaixo:

import React from 'react';
import ReactDOM from 'react-dom';

function Welcome(props) {
  return <h1>Hello {props.name} </h1>
}

function App() {
  return (
    <div>
      <Welcome name="Paulo" />
      <Welcome name="Maria" />
    </div>
  );
}

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