Componentes de reação
Componentes são como funções que retornam elementos HTML.
Componentes de reação
Os componentes são bits de código independentes e reutilizáveis. Eles servem ao mesmo propósito que as funções JavaScript, mas funcionam isoladamente e retornam HTML.
Os componentes vêm em dois tipos, componentes de classe e componentes de função, neste tutorial vamos nos concentrar nos componentes de função.
Em bases de código React mais antigas, você pode encontrar componentes Class usados principalmente. Agora é sugerido usar componentes Function junto com Hooks, que foram adicionados no React 16.8. Há uma seção opcional sobre componentes de classe para sua referência.
Crie seu primeiro componente
Ao criar um componente React, o nome do componente DEVE começar com uma letra maiúscula.
Componente de classe
Um componente de classe deve incluir a extends React.Componentinstrução. Essa instrução cria uma herança para React.Component e dá ao seu componente acesso às funções do React.Component.
O componente também requer um render()método, este método retorna HTML.
Exemplo
Crie um componente de classe chamado Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Componente de função
Aqui está o mesmo exemplo acima, mas criado usando um componente Function.
Um componente Function também retorna HTML e se comporta da mesma maneira que um componente Class, mas os componentes Function podem ser escritos usando muito menos código, são mais fáceis de entender e serão preferidos neste tutorial.
Exemplo
Crie um componente Function chamadoCar
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
Obter certificação!
$ 95 INSCRIÇÃO
Renderizando um componente
Agora sua aplicação React tem um componente chamado Car, que retorna um
<h2>elemento.
Para usar este componente em seu aplicativo, use uma sintaxe semelhante ao HTML normal:
<Car />
Exemplo
Exiba o Carcomponente no elemento "raiz":
ReactDOM.render(<Car />, document.getElementById('root'));
Adereços
Os componentes podem ser passados como props, que significa propriedades.
Props são como argumentos de função, e você os envia para o componente como atributos.
Você aprenderá mais sobre propsno próximo capítulo.
Exemplo
Use um atributo para passar uma cor para o componente Car e use-o na função render():
function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
Componentes em Componentes
Podemos nos referir a componentes dentro de outros componentes:
Exemplo
Use o componente Carro dentro do componente Garagem:
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Componentes em arquivos
React tem tudo a ver com a reutilização de código, e é recomendado dividir seus componentes em arquivos separados.
Para fazer isso, crie um novo arquivo com uma .js
extensão de arquivo e coloque o código dentro dele:
Observe que o nome do arquivo deve começar com um caractere maiúsculo.
Exemplo
Este é o novo arquivo, nós o chamamos de "Car.js":
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
export default Car;
Para poder usar o componente Carro, você deve importar o arquivo em seu aplicativo.
Exemplo
Agora importamos o arquivo "Car.js" na aplicação, e podemos usar o
Car
componente como se ele tivesse sido criado aqui.
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));