O que são React Components & Props

Componentes são como funções que retornam elementos HTML.

Os componentes são partes independentes e reutilizáveis de código. Eles possuem o mesmo propósito que as funções JavaScript, mas trabalham de forma isolada e retornam elementos HTML por uma função render.

Eles possuem dois tipos, chamados Componentes de Classes e Componentes de Funções.

Function Components

Um Function Component nada mais é do que uma função JavaScript que retorna um elemento JSX (leia este artigo se você não conhece JSX).

Por exemplo:

import React from 'react';

function ThisComponent(){
    const component = 'Olá Mundo! Eu sou um Componente!';
    return <h1>{component}</h1>;
}

export default ThisComponent;

Se você quer renderizar um React Component dentro de uma Function Component, você pode definir outro componente e renderizá-lo com HTML utilizando JSX:

import React from 'react';

function App(){
    return <ThisComponent />;
}

function ThisComponent(){
    const component = 'Olá Mundo! Eu sou um Componente!';
    return <h1>{component}</h1>;
}

export default App;

Deste modo, você tem um Componente Filho. Você consegue decidir como e onde renderizar um componente.

Class Component

Quando criamos um componente React, o nome do componente deve iniciar com uma letra maiúscula. Ao criar um Class Component, precisamos incluir o extends React.Component, pois este componente cria uma herança para o React.Component, criando um acesso às funções do React Component.

Criando um Class Component, precisamos do método render() para retornar HTML. Por exemplo:

class Pessoa extends React.Component {
    render(){
        return <h1>Olá, eu sou uma Pessoa!</h1>;
    }
}

Agora você tem um componente chamado Pessoa que retorna um elemento H1. Para usar este componente na aplicação, é só utilizar a sintaxe:

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

E esse componente será renderizado na sua página, no elemento root!

Component Constructor:

Se existe uma função construtora (constructor()) no seu componente, a função será chamada quando o componente for iniciado. O construtor será onde você irá iniciar as propriedades dos seus componentes.

No React, utilizamos um objeto chamado state para criar nossas propriedades de componentes. Utilize também o super() para utilizar os métodos herdados pela função construtora pai e também para obter acesso à todas as funções do método React.Component. Por exemplo, criaremos um componente Pessoa, com um estado de humor:

class Pessoa extends React.Component {
    constructor(){
        super();
        this.state = {humor: 'Bem humorada!'};
    }
    render(){
        return <h1>Olá, eu sou uma Pessoa {this.state.humor}</h1>;
    }
}

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

E temos a saída:

Olá, eu sou uma Pessoa Bem humorada!

Props:

Podemos também utilizar props para adicionar propriedades de componentes.

As props são como argumentos de funções, e você pode enviá-las para os componentes como atributos:

class Pessoa extends React.Component {
    render(){
        return <h1>Olá, eu sou uma Pessoa {this.props.humor}</h1>;
    }
}

ReactDOM.render(<Pessoa humor="Bem humorada!"/>, document.getElementById('root'));

E com isso, obtemos o nosso resultado:

Olá, eu sou uma Pessoa Bem humorada!

Gostou deste artigo? Comente abaixo!

Referências: