Componentes React: React JS é uma biblioteca JavaScript para construção de interfaces de usuário, mantida pelo Facebook e uma comunidade de desenvolvedores individuais e empresas.
React permite que os desenvolvedores criem grandes aplicações web que podem alterar dados, sem recarregar a página. Um dos principais conceitos em React é o de componentes. Neste artigo, vamos explorar os componentes em React JS.
O que são Componentes?
Componentes são os blocos de construção em React. Um componente em React é como uma função JavaScript que aceita entradas arbitrárias (chamadas “props”) e retorna elementos React que descrevem o que deve aparecer na tela.
Componentes Funcionais
Os componentes funcionais são basicamente funções JavaScript que retornam JSX. Eles são simples de escrever e entender.
function BemVindo(props) {
return <h1>Olá, {props.nome}</h1>;
}
Componentes de Classe
Os componentes de classe são mais complexos que os componentes funcionais. Eles são necessários sempre que seu componente precisa manter um estado.
class BemVindo extends React.Component {
render() {
return <h1>Olá, {this.props.nome}</h1>;
}
}
Props
Props (abreviação de propriedades) são como parâmetros para funções. Eles são passados para o componente filho do componente pai.
function BemVindo(props) {
return <h1>Olá, {props.nome}</h1>;
}
const elemento = <BemVindo nome="Sara" />;
ReactDOM.render(elemento, document.getElementById('root'));
Estado
O estado é semelhante às props, mas é privado e totalmente controlado pelo componente. O estado de um componente é um objeto JavaScript que contém informações que podem mudar ao longo da vida do componente.
class Relogio extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Olá, mundo!</h1>
<h2>Agora são {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
Conclusão
Os componentes são a principal unidade de código em React. Eles dividem a interface do usuário em peças independentes, reutilizáveis e pensam em cada peça isoladamente.
Compreender os componentes e como eles funcionam é fundamental para entender o React. Pratique e experimente esses conceitos por conta própria para obter uma compreensão mais profunda de como eles funcionam.
E para você validar seus códigos, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem de sites com potência de verdade!!!