O que é componente no React?


Neste tutorial será dado a continuidade a série sobre React. Esse tutorial é a continuação do anterior O que é React? Como instalar e usar o React?

Neste tutorial será apresentado o que é componente no React, como usar vários componentes em uma página. Primeiro será apresentado como criar um componente no React usando classe. Em seguida como incluir vários componentes em um componente. Para finalizar será apresentado como criar esse novos componentes que serão utilizados pelo componente principal.

Download do código fonte desenvolvido na aula: DOWNLOAD


Vamos para explicação textual o que é implementado nesse tutorial.

O que é componente no React? 

Componentes permitem você dividir a UI em partes independentes, reutilizáveis, ou seja, trata cada parte da aplicação como um bloco isolado, livre de outras dependências externas. Componentes são como funções JavaScript. Eles aceitam entradas e retornam elementos React que descrevem o que deve aparecer na tela.

Vamos colocar mão na massa. 

Primeiro será utilizado com base o código fonte do tutorial anterior O que é React? Como instalar e usar o React?

Em seguida no diretório "src", será criado os arquivos Headers.js, Article.js e Footer.js, em cada arquivo será criado o classe. 

Primeiro será implementado o arquivo Headers.js, com as instruções descritas abaixo.

//Importar o React
import React from 'react';

//Criar a classe com o nome Headers
class Headers extends React.Component{
    render(){
        return(
            <h2>Cabeçalho</h2>
        );
    }
}

//Exportar o componente
export default Headers;

Em seguida será criado o arquivo Article.js, com as instruções descritas abaixo.

//Importar o React
import React from 'react';

//Criar a classe com o nome Headers
class Article extends React.Component {
    render() {
        return (
            <div>
                <h3>Titulo do artigo</h3>
                <p>Conteúdo do artigo</p>
            </div>
        );
    }
}

//Exportar o componente
export default Article;

Em seguida será criado o arquivo Footer.js, com as instruções descritas abaixo.

//Importar o React
import React from 'react';

//Criar a classe com o nome Headers
class Footer extends React.Component{
    render(){
        return(
            <div>
            <h4 style={{color: "green"}}>Rodapé 1</h4>
            <h4 style={{color: "#0000FF"}}>Rodapé 2</h4>
            </div>
        );
    }
}

//Exportar o componente
export default Footer;

Com os componentes criado precisa incluir na página principal, sendo o arquivo "App.js". Para incluir somente utilizo o nome da classe.

<Headers />
<Article />
<Footer />

Abaixo está o código fonte completo da página "App.js".

//Incluir o React
import React from 'react';

//Incluir os arquivos que possuem os componentes
import Headers from './Headers';
import Article from './Article';
import Footer from './Footer';

//Criar a classe e incluir os componentes Headers, Article, Footer
class App extends React.Component{
  render(){
    return (
      <div>
		<Headers />
		<Article />
		<Footer />
      </div>
    );
  }
}

//Exportar o componente sendo a página inicial
export default App;

Para baixar o código fonte do projeto implementado até esse tutorial "DOWNLOAD", após baixar executar o comando "npm install" para instalar todas as dependências e o comando "npm start" para rodar o servidor. 

Portanto, nesse tutorial foi abordado o que é componente e usar mais de um componente em um componente. Para ver todas as aulas de React acesse a PlayList.