👇Um artigo objetivo sobre componentes em React👇
⚛️O que são React Components?
- Components são considerados os principais blocos de construção de um aplicativo em React;
Embora todos os componentes estejam no mesmo local da estrutura de pastas, eles operam de forma independente uns dos outros e se combinam em um componente pai para formar a interface final para o usuário.
⚛️Que problema resolveu?Anteriormente, a criação de uma página web simples requeria que os devs escrevessem centenas de linhas de código;
Na estrutura tradicional de DOM, simples mudanças podiam ser bastante desafiadoras;
Para resolver esses problemas, uma abordagem baseada em componentes independentes e reutilizáveis foi introduzida.
⚛️Como um componente se parece?Aqui, a raiz é o componente inicial e cada uma das outras peças se torna um ramo, os quais são subdivididos em sub-ramos.
⚛️Quais são os tipos de componentes?
📲Componentes Funcionais:
- É o primeiro tipo de componente e também o mais recomendado;
- Um functional component é uma função em JavaScript/ES6 que retorna um elemento do React (JSX);
- Ele sempre começa com uma letra maiúscula (convenção de nomes);
- Se necessário, aceita props como parâmetro;
- Por exemplo, você pode criar um componente funcional com sua definição por arrow function 👇
const Welcome = (props) => {
return <h1>Hello, {props.name}</h1>;
}
"Essa função é um componente do React válido, pois ele aceita um único argumento de objeto 'props' com dados e retorna um elemento do React." (reactjs.org)
Para utilizar um componente mais tarde, você precisa exportá-lo para, então, importá-lo em outro lugar.
🔃Componentes de Classe:Class Component é uma classe do ES6 que será um componente quando fizer o ‘extend’ de um componente (comportamento ou valor) do React;
Aceita props (no construtor), se necessário;
Deve ter um método de render() para retornar o JSX;
Abaixo vemos a mesma função Welcome anterior, porém retornada como um componente de classe:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
⚛️Conclusão
- Componentes são a melhor maneira de organizar seu aplicativo React e ajudam a escrever um código mais bem gerenciado;
- Ambos são bons, porém prefiro Funcional Components a Class Components. Obrigado se você acompanhou até aqui e espero que esse artigo o ajude na trajetória como dev.
Autor: Marcelo Schäffer Petry
https://linkedin.com/in/m-petry/
https://marcelopetry.com/
Top comments (0)