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:
