Professional Documents
Culture Documents
Você ouve falar frequentemente sobre o React mas sabe pouco sobre ele?
Você já até estudou um pouco sobre a biblioteca desenvolvida pelo Facebook mas quer consolidar os
seus conhecimentos?
O porquê do React
Introdução
https://tableless.com.br/guia-completo-react-ecossistema/ 1/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
Para começar precisamos saber o que é o React. Para isso, nada melhor do que utilizar a de nição de
''
quem o criou, o próprio Facebook, que o de ne assim:
Essas duas informações juntas criam a primeira grande confusão para quem está começando: se o
React é apenas uma biblioteca e só serve para criar UI, como posso criar aplicações completas com
ele?
E para resolver essa questão precisamos entender que quando a comunidade se refere ao React, o
que na verdade ela está querendo dizer é o React e o seu ecossistema.
E esse ecossistema é formado por:
React
JSX Feedback
ES2015
Webpack
Flux/Redux
axios/fetch
Jest/Mocha
E com todos esses itens, que fazem parte do ecossistema do React, conseguimos a rmar que é
possível sim criar aplicações completas usando o React.
https://tableless.com.br/guia-completo-react-ecossistema/ 2/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
JSX
Explicando de forma rápida, o JSX é uma extensão de sintaxe do JavaScript (daí o nome, JavaScript
Syntax eXtension) que nos permite escrever HTML dentro do JavaScript.
Nos primórdios, o JSX era um dos grandes motivos das críticas e piadas em relação ao React. Em
teoria estávamos voltamos no tempo ao misturar HTML com JavaScript.
Os críticos mais ferrenhos a rmavam que o JSX quebra um dos princípios básicos do
desenvolvimento de software, que é o Separation of Concerns.
Na minha opinião, essa visão é errada por dois motivos:
2. E mesmo que o JSX violasse esse princípio, a área de tecnologia evolui (e muito)
com o tempo. Se um dos princípios que nós sempre demos como verdade não
zer mais sentido para um determinado cenário, deveremos nos forçar a seguir
esse princípio mesmo assim?
Independente das minhas opiniões pessoais, com o tempo a comunidade percebeu que o JSX foi
uma decisão acertada e que acabou se tornando um dos grandes alicerces do sucesso do React.
Componentes Feedback
Como foi dito anteriormente, o React tem como função principal auxiliar na criação da UI. Só deixei
um detalhe importante de fora: o React usa componentes, e apenas componentes, para que que seja
Para exempli car, vamos ver um pouco de código para entender como é um componente React:
2
3 export default function Button() {
4 return (
5 <button
7 >Click me</button>
https://tableless.com.br/guia-completo-react-ecossistema/ 3/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
8 );
9 }
A função acima (sim, componentes React podem ser simplesmente funções em JavaScript) gera um
botão que mostra um alert para o usuário ao ser clicado.
Se precisarmos de outro botão como esse, basta reaproveitá-lo sem a necessidade de adicionar mais
código na aplicação. Lembrando que mais código é sinônimo de mais trabalho, mais testes unitários
e mais potenciais bugs inseridos.
E se a necessidade for um botão parecido com esse, basta editarmos passando alguns parâmetros
(vamos falar mais sobre eles na próxima seção) e transformá-lo no que precisamos.
Se houver algum bug no comportamento, ou mesmo no layout do botão, sabemos exatamente onde
devemos mexer no código para fazer o conserto rápido.
Em resumo, os componentes em React nos deixam mais produtivos. Com eles temos um
reaproveitamento de código maior e uma menor probabilidade de novos bugs serem introduzidos na
aplicação.
Props
Em todos os tipos de paradigmas no desenvolvimento de software, passar parâmetros é
extremamente comum. Com os componentes do React isso não poderia ser diferente. A diferença é
Feedback
que no React, usamos os props (abreviação para properties).
A ideia é simples.
2
3 export default function HelloWorld() {
4 return (
5 <h1>Hello World</h1>
6 );
7 }
https://tableless.com.br/guia-completo-react-ecossistema/ 4/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
Imaginando que precisamos mudar a mensagem ‘World’ para alguma outra que for enviada
dinamicamente, podemos reescrever esse componente usando as props dessa forma:
2
3 export default function HelloWithProps(props) {
4 return (
5 <h1>Hello {props.name}</h1>
6 );
7 }
E com isso feito, podemos chamar esse componente dentro de outros assim:
2
3 import HelloWithProps from './hello-with-props';
4
5 export default function App() {
6 return (
7 <div>
10 </div>
11 );
12 }
Feedback
app.js hosted with ❤ by GitHub view raw
Além disso, podemos fazer uma validação das props que são passadas no componente para evitar
bugs desnecessários e facilitar no desenvolvimento da aplicação usando os PropTypes:
3
4 export default function HelloWithProps(props) {
5 return (
6 <h1>Hello {props.name}</h1>
7 );
8 }
9
https://tableless.com.br/guia-completo-react-ecossistema/ 5/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
10 HelloWithProps.propTypes = {
11 name: PropTypes.string.isRequired,
12 };
Agora, informamos explicitamente ao React para apenas aceitar a prop quando ela for uma string. Se
qualquer outra coisa for passada para esse componente, a aplicação irá falhar e receberemos uma
mensagem de erro nos avisando o porquê.
Para ler mais sobre os PropTypes, entre na documentação completa na própria página do React.
State
O estado (ou state) da sua aplicação, pode ser de nido como: o lugar onde os dados vem e se
transformam ao longo do tempo.
Dito isso, os componentes React podem ser divididos em duas categorias: Presentational e
Container. Outra nomenclatura usada na comunidade para esses dois é: Stateless (sem estado) e
Stateful (com estado).
2
3 export default function Presentational() {
4 return (
5 <h1>Hello World</h1>
6 );
7 }
O ideal é escrever o máximo possível de componentes dessa categoria. Eles são mais fáceis de
desenvolver, manter e testar.
https://tableless.com.br/guia-completo-react-ecossistema/ 6/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
Já os componentes do tipo Container, além da apresentação dos dados, tem que lidar também com
algum tipo de lógica, ou transformação de dados. Por isso necessitam de estado (stateful).
Esses componentes não podem ser escritos como uma função, eles obrigatoriamente devem ser
uma classe:
4 constructor(props) {
5 super(props);
7 }
8
9 render() {
10 return (
11 <h1>Hello {this.state.name}</h1>
12 );
13 }
14 }
Os dois exemplos mostrados acima tem exatamente o mesmo resultado nal. A única diferença é
que o primeiro deles não usa o state do React, enquanto que o segundo usa.
Podemos ainda complicar um pouco mais o segundo exemplo, para demonstrar como é possível
alterar o estado do seu componente React:
4 constructor(props) {
5 super(props);
7 }
8
9 change(event) {
11 }
12
13 render() {
14 return (
15 <div>
17 <p>Hello {this.state.name}!</p>
18 </div>
19 );
20 }
21 }
Em cada mudança que ocorrer no input (linha 16), um evento é disparado na função change. A função
change por sua vez altera o estado do componente, usando a função setState, que é nativa do React.
Toda vez que o estado for alterado, o React automaticamente invoca de novo a função render, que irá
renderizar a UI com os novos dados inputados pelo usuário.
O Angular.js ganhou bastantes usuários, principalmente entre 2012 e 2015, e um dos principais
motivos para isso, era justamente o two-way data binding.
Feedback
https://tableless.com.br/guia-completo-react-ecossistema/ 8/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
O *two-way data binding *funciona assim: se uma mudança acontece na view, ela é re etida
automaticamente no model, e vice-versa.
No começo, o two-way data binding parecia uma excelente ideia. Com o tempo, após inúmeros
projetos construídos usando essa tecnologia, ela se mostrou extremamente nociva principalmente
por dois motivos:
Feedback
1. Performance
A própria equipe do Angular resolveu limitar essa funcionalidade nas novas versões do* framework*.
O React porém, percebeu essa falha desde o início e estimula apenas o uso do one-way data binding.
Não existe um mecanismo no React que permita com que o HTML altere os dados do componente. E
nem vice-versa. Essa mudança é sempre feita de forma explícita pelo desenvolvedor. Lembrando que
explícito é muito melhor, em termos de desenvolvimento, manutenção e testes, do que implícito.
https://tableless.com.br/guia-completo-react-ecossistema/ 9/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
Um exemplo simples de one-way data binding em ação no React pode ser visto no componente
abaixo:
2
3 export default class App extends React.Component {
4 constructor(props) {
5 super(props);
6 this.state = { count: 0 };
7 }
8
9 increment() {
11 }
12
13 render() {
14 return (
15 <div>
16 <h1>{this.state.count}</h1>
17 <button onClick={this.increment.bind(this)}>+</button>
18 </div>
19 );
20 }
21 }
Lifecycle
Para que seja possível o desenvolvimento de componentes mais complexos, alguns métodos foram
adicionados na API dos componentes React.
Eles fazem parte do Component Lifecycle (ciclo de vida dos componentes).
https://tableless.com.br/guia-completo-react-ecossistema/ 10/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
Com esses métodos, os desenvolvedores podem saber, por exemplo, quando um componente vai ser
criado, destruído, atualizado, etc.
Um exemplo simples de uso dos métodos de lifecycle, seria o contador de segundos abaixo:
2
3 export default class Timer extends React.Component {
4 constructor(props) {
5 super(props);
6 this.state = { elapsed: 0 };
7 this.tick = this.tick.bind(this);
8 }
9
10 componentDidMount() {
12 }
13
14 componentWillUnmount() {
15 clearInterval(this.timer);
16 }
17
18 tick() {
19 this.setState({ elapsed: this.state.elapsed + 1 });
20 }
21
22 render() {
24 }
25 }
Feedback
timer.js hosted with ❤ by GitHub view raw
Assim que o componente é montado (componentDidMount), nós iniciamos o setInterval que a cada
1000ms invoca a função tick. E quando o componente for destruído (componentWillUnmount)
removemos o setInterval para que a função tick não continue sendo chamada desnecessariamente.
Virtual DOM
A manipulação do DOM está no centro do desenvolvimento front-end moderno. Fazemos isso
basicamente todos os dias.
Só tem dois problemas com isso:
https://tableless.com.br/guia-completo-react-ecossistema/ 12/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
1. Essa manipulação direta do DOM é mais lenta do que a maioria das operações
feitas pelo JavaScript
2. A maioria dos frameworks JavaScript alteram muito mais o DOM do que deveriam
Esse é um dos principais motivos para os benchmarks de performance excelentes que o React tem.
Feedback
Agora que já entendemos as partes fundamentais do React, precisamos entender também o seu
ecossistema.
create-react-app
https://tableless.com.br/guia-completo-react-ecossistema/ 13/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
Nos primeiros anos do React, uma das principais críticas era de que iniciar uma aplicação era muito
mais complicado do que deveria ser, o que acabava excluindo diversos iniciantes.
Hoje isso não é mais um problema, a equipe do Facebook vem trabalhando diariamente no projeto
create-react-app.
Agora, com apenas 4 simples comandos, sem ter que criar e editar nenhuma con guração, temos um
arcabouço completo para começar a desenvolver aplicações em React:
CSS-in-JS
Todas as boas práticas ao se escrever CSS apontavam para um mesmo caminho por anos: escrever
CSS o mais desacoplado possível do JavaScript e do HTML, usando nomes bem descritivos para as
classes.
O problema dessa abordagem é que ela não resolve o maior defeito do CSS: tudo o que você cria é
global. Cada vez que você cria uma nova classe CSS ela é, por de nição, global. Isso gera diversos
problemas na manutenção, principalmente em aplicações maiores. Feedback
Com o grande sucesso da componentização no React, a forma de se escrever CSS vem mudando
drasticamente.
2
3 import styles from './styles.css';
4
5 const Main = () => (
6 <button
7 onClick={() => alert('Clicked')}
8 className={styles.button}
https://tableless.com.br/guia-completo-react-ecossistema/ 14/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
9 >Click me</button>
10 );
11
12 export default Main;
A ideia é simples: escrever o mesmo CSS de sempre, só com uma diferença: esse CSS só vai valer
para aquele componente. Ou seja, será um módulo (daí o nome, CSS Modules).
1 .button {
2 background-color: blue;
3 border: none;
4 color: white;
5 padding: 5px 10px;
6 }
Nesse, o próprio componente já teria seus estilos escritos em JavaScript, sem que nenhum arquivo
CSS seja sequer criado.
Uma das vantagens do styled-components, é que o code-splitting ca muito mais fácil de ser feito, e
Feedback
assim como o CSS Modules, não existe CSS global. A desvantagem é que você não escreve o CSS
padrão que muitos já estão acostumados, o que pode não ser muito intuitivo.
Um exemplo simples:
4 padding: 0.5rem 0;
5 margin: 0.5rem 1rem;
6 width: 11rem;
7 background: transparent;
8 color: white;
9 border: 2px solid white;
https://tableless.com.br/guia-completo-react-ecossistema/ 15/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
10
11 ${props => props.primary && css`
12 background: white;
13 color: palevioletred;
14 `}
15 `
Bundlers
Resolver dependências no front-end, apesar de ser uma questão comum, sempre foi extremamente
problemático.
Na maioria dos projetos temos que lidar, no mínimo, com essas questões:
Inclusão de Imagens
Adição de Fontes
Dessa necessidade frequente das aplicações* front-end*, surgiram os module bundlers. E no mundo
React, o bundler mais usado pela comunidade é o Webpack.
Feedback
https://tableless.com.br/guia-completo-react-ecossistema/ 16/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
Caching
Hot Module Replacement (após salvar o código novo, ele já aparece no browser em
ambiente de desenvolvimento sem a necessidade de refresh)
State containers
Para aplicações mais complexas usar apenas o setState nativo do React pode não ser o su ciente
para controlar toda a lógica da aplicação.
Existem diversos gerenciadores de estado feitos exclusivamente para lidar com esse problema,
dentre eles: Flux, MobX, Re ux e o mais famoso deles, o Redux.
Feedback
https://tableless.com.br/guia-completo-react-ecossistema/ 17/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
Feedback
Dito isso, **toda vez que tivermos que tomar uma decisão de se adicionar uma nova biblioteca no
projeto, temos que pesar o custo/benefício dessa decisão. **E para a grande maioria das aplicações,
que não são complexas o bastante, nenhuma das opções acima (inclusive o Redux) são necessárias.
Me preocupa ver na comunidade, diversos iniciantes começando a aprender o Redux antes mesmo
de entender bem o próprio React. Ou mesmo criando projetos já com o Redux, sem antes ter visto se
há de fato uma necessidade.
Dan Abramov
@dan_abramov
https://tableless.com.br/guia-completo-react-ecossistema/ 18/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
Testes
Outro ponto crucial para o desenvolvimento de aplicações web é o uso de testes unitários. As
garantias de que os testes nos dão são consideráveis. Podemos refatorar, encontrar e evitar novos
bugs, e até mesmo para escrever código a partir dos testes (TDD).
No mundo React, a principal ferramenta para escrever testes unitários é o Jest, que é mais um open
source do Facebook.
Feedback
2. Ele vem com tudo o que você precisa para testar: o runner, as assertions, o report
de coverage, etc. Não é mais necessário instalar diversas bibliotecas diferentes
https://tableless.com.br/guia-completo-react-ecossistema/ 19/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
3. Snapshots
Esse último é tão interessante que vale a pena se aprofundar um pouco mais.
A ideia das Snapshots é simples: o Jest tira uma “foto” do seu componente, e se algo mudar o seu
teste vai quebrar e te avisar dessa mudança, mostrando exatamente como o componente era e como
ele cou.
8 ).toJSON();
9 expect(tree).toMatchSnapshot();
10 });
Conclusão
E pra recapitular, nesse post aprendemos as partes mais centrais do React como: JSX, Virtual DOM, Feedback
E além disso, conhecemos também os principais atores que fazem parte do ecossistema do React,
dentre eles: Webpack, create-react-app, Jest, CSS Modules, etc.
Mas se mesmo assim cou alguma dúvida, basta adicionar a pergunta nos comentários abaixo :)
**Se você gostou do post não se esqueça de dar um ❤ aqui embaixo!E se quiser receber de antemão
mais posts como esse, assine nossa newsletter.**
https://tableless.com.br/guia-completo-react-ecossistema/ 20/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
Feedback
JSCasts
É difícil encontrar conteúdo bom e atualizado em português. Com isso em mente criamos o JSCasts,
onde você vai se manter em dia com o JavaScript e todo o seu ecossistema de forma fácil e
interativa.
https://tableless.com.br/guia-completo-react-ecossistema/ 21/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
Feedback
Cursos:
Como evitar que seu app React com Redux vire um ninho de rato
Feedback
https://tableless.com.br/guia-completo-react-ecossistema/ 23/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
7 Comentários Tableless
1 Entrar
Participe da discussão...
Nome
Últimos posts
React: o que é e como funciona essa
ferramenta?
Feedback
Categorias
tecnologia-e-tendências (318)
geral (307)
artigos (300)
técnicas-e-práticas (274)
javascript (245)
código (218)
https://tableless.com.br/guia-completo-react-ecossistema/ 25/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
browsers (209)
SOBRE
SOBRE O TABLELESS
CONTATO
ANUNCIE
SEJA UM AUTOR
Feedback
FAZEMOS CÓDIGO FRONT-END
ACOMPANHE
WEBINARS
FÓRUM
CANAL NO MEDIUM
CANAL NO TELEGRAM
COMUNIDADE
UDACITY | CURSO DE REACT
https://tableless.com.br/guia-completo-react-ecossistema/ 26/27
15/09/2018 O Guia Completo do React e o seu Ecossistema - Artigos sobre HTML, JavaScript, CSS e desenvolvimento web
FEMUG
MEETUPCSS
PODCAST ZOFE
BRAZILJS
DEVNAESTRADA
FRONT-END BRASIL
Feedback
https://tableless.com.br/guia-completo-react-ecossistema/ 27/27