Durante a quarentena eu fiz um post no meu Linkedin divulgando o "April Free Month" da Pluralsight. Eles ofereceram todos os cursos das plataforma de forma gratuita durante o mês de Abril.
Eu aproveitei a oportunidade para fazer a trilha de React. Sempre tive contatos básicos com React, fazendo pequenas alterações, mas nunca me aprofundei na arquitetura.
E digo com todas as letras que valeu muito a pena. Fiz 5 cursos de React do básico ao avançado, e todos muitos bons. (principalmente os do Cory House )
Desde então o que tenho feito para fixar o aprendizado: estou criando uma aplicação usando React no front (logo mais vou divulgar), e decidi criar conteúdo.
Portanto esse é o primeiro artigo sobre React que estou escrevendo.
Vamos lá!
Como dito, podemos criar os componentes de 4 diferente formas.
Para todos os exemplos, vamos fazer um botão que incremente o contador.
ES6 Class Component
Esse era o modo mais usado antes da versão 16.8 do React. Pois era o que melhor trabalhava com ciclos de vida do componente.
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
counter: this.state.counter + 1
});
}
render() {
return (
<>
<h1>{this.state.counter}</h1>
<button onClick={this.handleClick}>+1</button>
</>
);
}
}
ReactDOM.render(
<Counter />,
document.getElementById('app')
);
Um dos problemas deste formato era o problema de escopo, sempre que criamos uma função, temos que criar um bind
para esta função como ajuste de escopo. E além disso, tinha o uso constante da palavra-chave this
.
Você pode ver o exemplo neste link.
CreateReactClass Component
Este maneira está em desuso nos dias de hoje por conta da complexidade e quantidade de código que temos que escrever. Ela se assemelha à forma como criávamos objetos no ES5.
const Counter = createReactClass({
getDefaultProps: function() {
return { initialCount: 0 };
},
getInitialState: function() {
return { counter: this.props.initialCount };
},
handleClick: function() {
this.setState({
counter: this.state.counter + 1
});
},
render: function() {
return (
<>
<h1>{this.state.counter}</h1>
<button onClick={this.handleClick}>+1</button>
</>
);
}
});
ReactDOM.render(
<Counter />,
document.getElementById('app')
);
Neste formato também usamos a palavra-chave this
.
Você pode ver o exemplo neste link.
Functional Component
Este é o formato mais usado atualmente (após o lançamento da versão 16.8), pois é o que melhor trabalha com os Hooks, evitando o uso do ciclo de vida do componente, além de evitar a palavra-chave this
.
Além disso, existe a proposta que as classes do React deixem de existir em um futuro próximo.
function Counter() {
const [counter, setCounter] = React.useState(0);
function handleClick() {
setCounter(counter + 1);
}
return (
<>
<h1>{counter}</h1>
<button onClick={handleClick}>+1</button>
</>
);
}
ReactDOM.render(
<Counter />,
document.getElementById('app')
);
Neste exemplo é perceptível como tivemos que escrever menos código. Aqui, usamos o hook useState
que trabalha o controle de estado dos objetos.
Você pode ver o exemplo neste link.
Arrow Function Component
Este formato é bastante parecido com o anterior, e é bastante usado para criar componentes apenas com JSX. Por conta disso, alterei um pouco o exemplo, adicionando 2 componentes que renderizam os elementos HTML.
const Counter = () => {
const [counter, setCounter] = React.useState(0);
function handleClick() {
setCounter(counter + 1);
}
return (
<>
<Header label={counter} />
<Button
whenClicked={handleClick}
label="+1"
/>
</>
);
}
const Header = (props) => <h1>{props.label}</h1>;
const Button = (props) => (
<button onClick={props.whenClicked}>
{props.label}
</button>
);
ReactDOM.render(
<Counter />,
document.getElementById('app')
);
Você pode ver o exemplo neste link.
E aí, o que achou?
Qualquer sugestão e/ou feedback sempre serão muito bem-vindos.
Até o próximo artigo! :hand: