Componentes React

Índice

• Parte 1 - Introdução ao React
• Parte 2 - Elementos React
• Parte 3 - JSX
• Parte 4 - Componentes React
• Parte 5 - Props
• Parte 6 - State
• Parte 7 - Criando interfaces declarativas
• Parte 8 - Criando um pequeno projeto

Conteúdo

Componentes
Criando componentes
Finalizando

Componentes

Uma das características mais famosas do React é que ele é Component Based, mas o que isso quer dizer? Isso quer dizer que ele trabalha com componentes, mas o que quer dizer componentes?

Componentes são o sonho de qualquer um que já trabalhou com interfaces antes, basicamente são pedaços de interface reutilizáveis, vamos ver seu uso no React.

Criando componentes

Para criar um componente no React, precisamos criar uma classe que herda da classe React.Component, vamos criar um:

class Titulo extends React.Component {
    render() {
        return (
            <div>
                <h1>Oilá</h1>
            </div>
        )
    }
}

E para o usar basta:

ReactDOM.render(
    <Titulo />,
    document.querySelector("#app")
)

Todo componente precisa ter o método render() que retorna um elemento React. Não se pode retornar mais de um elemento, por exemplo:

class TituloErrado extends React.Component {
    render() {
        return (
            <h1>Oilá</h1>, 
            <h2>Outro oilá</h2> //Isso não funciona e dará um erro
        )
    }
}

Isso pode parecer bastante trabalho, entretanto isso nos facilmente reutilizar código dentro de outros lugares ou e componentes permitem uma organização de código muito melhor, especialmente o deixando mais legível. E é claro, podemos usar um componente dentro de outro:

class Titulo extends React.Component {
    render() {
        return (
            <div>
                <Oila />
            </div>
        )
    }
}

class Oila extends React.Component {
    render() {
        return (
            <h1>Oilá</h1>                
        )
    }
}