Componentes React são pequenas peças reusáveis de código que retornam um elemento React para ser renderizado na página. A versão mais simples de um componente React é uma simples função JavaScript que retorna um elemento React:

function BemVindo(props) {

return <.h1>Olá, {props.nome}</.h1>;

}

Componentes também podem ser ES6 classes:

class BemVindo extends React.Component {

render() {

return <h1>Olá, {this.props.no# me}</h1>;

}

}

Componentes podem ser quebrados em peças distintas de funcionalidade e usados em outros componentes. Componentes podem retornar outros componentes, arrays, strings e números. Uma regra de ouro é que se parte da sua UI é usada várias vezes (Botão, Painel, Avatar), ou é complexa suficiente (App, FeedStory, Comment), é uma boa candidata para ser um componente reutilisável. Nomes de componentes devem também sempre começar com letra maiúscula ( ao invés de ). Veja esta documentação para mais informações sobre renderização de componentes.

Componentes:

-Permite dividir a aplicação em partes;

-Os componentes renderizam JSX, assim como App.js (que é um componente);

-Precisamos criar um arquivo de componente;

-E importá-lo onde precisamos utilizar;

-Normalmente ficam em uma pasta chamada components;

1-Dentro da pasta src, criar a pasta components. E dentro desta ultima pasta cria seu arquivo. Quando se trabalha com componentes assim, por convenção, a primeira letra é maiúscula e a próxima tbm, por exemplo: HelloWord.js.

-Criar uma função é declarar um componente, e geralmente é o mesmo nome do arquivo.

function HelloWord (){

}

export default HelloWord;

2- Na pasta App.js (a pasta que renderizará no navegador)

-Importar o HelloWord (import HelloWord from './Components/HelloWorld';)

-No return vc vai "chamar" o Helloword:

***A ideia principal do componente é reutilizar em quqlquer lugar da aplicação