Obtendo experiência em React: um ponto de vista pessoal
Tags: react, help
Published: 2019-02-18 19:49:10

---
title: Obtendo experiência em React: um ponto de vista pessoal
published: true
tags: react, help
canonical_url: https://eusoudev.com.br/obtendo-experiencia-em-react-um-ponto-de-vista-pessoal/
---

Tempo de leitura:<small> 7 minutos</small>

 

![](https://www.eusoudev.com.br/wp-content/uploads/2019/01/fotis-fotopoulos-790373-unsplash-1024x683.jpg)É muito comum, para as pessoas que despertaram interesse pelo React, se sentirem perdidas quando querem começar a aprender. Esse foi o meu caso e, por mais que houvesse uma excelente documentação na _web_ a respeito disso, eu sentia falta de relatos pessoais. Fui buscar a minha maneira e resolvi compartilhar com a comunidade a minha experiência. 

## Vamos começar do começo

<iframe src="https://giphy.com/embed/WZ4M8M2VbauEo" width="480" height="274" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

 

Antes de tudo, é importante que você saiba inglês. Embora eu esteja escrevendo em português aqui, e parte do conteúdo que vou sugerir é na nossa língua. Mas você pode perguntar para a comunidade e a resposta será quase unânime: as melhores documentações estão em inglês. O nível de inglês precisa ser suficiente para você conseguir entender a documentação, portanto não é preciso saber falar ou ouvir: em vídeos, recorra às legendas.

A primeira _hard skill_ que você precisa ter: HTML e CSS. É sério.

E, em segundo lugar, JavaScript. E eu recomendo fortemente que você comece pela [documentação do Mozilla Developer Network](//developer.mozilla.org/pt-BR/docs/Web/JavaScript). A parte mais importante para mim foi a de [Classes em JavaScript](//developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Classes), _map_ e _arrow functions_. Ler a documentação com atenção me ajudou muito a entender como o JS usa esses recursos. Mesmo se você já tiver trabalhado com Angular, ainda assim, eu recomendo que você revise o conteúdo e abra sua mente para o que está por vir.

## Falando em leitura

## <iframe src="https://giphy.com/embed/WoWm8YzFQJg5i" width="480" height="351" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

 

Após isso, mergulhei fundo na [documentação oficial do React](//reactjs.org/docs/getting-started.html). Ainda sem desenvolver, tirei algumas horas dos meus dias para entender o que – e como – o React fazia. Ao mesmo tempo, comecei a explorar repositórios no GitHub com exemplos de código, para entender o reflexo das decisões de arquitetura e as técnicas utilizadas no código.

Aos poucos, fui absorvendo também o conceito de componentização, porque ele é essencial para o React.

Quando me senti seguro para colocar a mão na massa, recorri ao [Create React App](//github.com/facebook/create-react-app), do Facebook para começar minha primeira aplicação. O legal do Create React App (CRA, para os íntimos) é que você não precisa fazer quase nada. O que você precisa é [instalar o Node.js](//nodejs.org/en/) e verificar se o NPM foi instalado corretamente – para fazer sua primeira aplicação rodar. É estranho como, de repente, parecia fácil com o projeto instalado e rodando na minha máquina.

Então, eu escolhi uma ideia para aplicar: resolvi criar uma escala _likert._ Escalas _likert_ são aquelas escalas, geralmente, de 0 a 10, utilizadas em pesquisas de satisfação.

Escolhi desenvolver um componente pequeno, porque eu já sabia que iria dar trabalho. Afinal, era minha primeira experiência com React e eu não queria me arriscar. Precisei recorrer várias vezes à documentação do React, para entender principalmente propriedades e estado.

## Incorporando o máximo de informações possíveis

Por mais que pareça chato no início, estudar o [ciclo de vida dos componentes](//reactjs.org/docs/react-component.html#the-component-lifecycle) é essencial. Esses dias, por exemplo, usei o método _componentDidUpdate()_ para validar se o componente estava sendo exibido na tela (e presente na DOM). Se eu desconhecesse esse método, provavelmente estaria fazendo _bypass_ no React e usando a DOM. Isso traria problemas no futuro – dependendo da situação, é uma péssima prática.

Depois de “brincar” com esse projeto e entender bem a diferença entre componentes _stateless_ e _stateful_, me senti seguro em desenvolver componentes simples. Então, resolvi me arriscar em algo maior.

<iframe src="https://giphy.com/embed/zaezT79s3Ng7C" width="480" height="271" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

## O início da Megan UI

Junto com o Paulo Melo, o “Panda”, Product Designer da [Vulpi](//vulpi.com.br/), começamos – usando o [Create React Library](//www.npmjs.com/package/create-react-library) – a desenvolver uma biblioteca de componentes de UI reutilizáveis, chamada [Megan UI (disponível no GitHub e open-source)](//github.com/vulpi/meganui)

Quando chegamos a uma versão estável da biblioteca, comecei a participar da construção de um novo produto para a Vulpi. Basicamente, um _web app_ que utiliza diferentes serviços para autenticação e _login_ (não posso dar _spoilers_ por enquanto). Chegou o momento de provar que eu conseguiria aplicar tudo aquilo que havia aprendido. Foram menos de 2 meses entre os meus estudos iniciais e o momento em que entrei no projeto.

Nos momentos iniciais do projeto, eu utilizei a [Fetch, uma API nativa da web](//developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch), para realizar requisições e lidar com respostas HTTP. Existe uma documentação excelente no site do Mozilla Developer Network, em português. Fiquei feliz em saber que o Fetch funciona no Chrome, Firefox e Opera mas notei problemas de compatibilidade em relação ao Safari (navegador presente no iPhone, iPad e Macs).

## Resolvendo esse pequeno grande detalhe

Para solucionar, comecei a estudar sobre o Axios, que é baseado em Promises e pode ser utilizado em projetos que rodam tanto no navegador (_front-end_) quanto em node.js (_back-end_). Particularmente, gostei muito da forma como as requisições são feitas. A passagem de parâmetros de GET e POST, por exemplo, é mais “organizada”, além da possibilidade de interceptar as requisições para injetar cabeçalhos de autenticação, por exemplo.

Em tempo: quando você começa a lidar com requisições para hosts diferentes, é essencial que você entenda sobre [CORS](//developer.mozilla.org/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS). Um mecanismo de segurança usado pelos navegadores para garantir confiabilidade na comunicação entre origens (hosts) diferentes. A minha sorte é que eu já havia lidado com essa questão quando eu, lá em 2015, ainda desenvolvia usando Laravel (no back-end) e Angular (no front-end).

A partir do momento em que fui adquirindo confiança no que aprendi, comecei a avançar na aplicação das boas práticas do React, a conversa com as APIs, além das _refs_, por exemplo. Além disso, ter usado TypeScript desde o início me ajudou a escrever código organizado e confiável. Durante muito tempo, tentei fazer tudo sem utilizar o Redux, por exemplo, para que eu entendesse bem o conceito de estados, em vez de usar sem entender.

## Uma dica importante

Se você quer começar em React a partir de um curso e ainda não sente confiança em seu inglês, não tem problema. O [Progressive Web Apps – Construa aplicações progressivas com React](//www.casadocodigo.com.br/products/livro-pwa), da Casa do Código, é uma excelente alternativa. Se você estiver à procura de mais conteúdo, os canais mais populares para se aprender a tecnologia são: Alura, Devmedia, School of Net e Udemy costumam ser os mais buscados.

Em pouco tempo, é possível aprender React, desde que você seja _hands-on._ É importante conseguir associar o conteúdo das suas leituras, cursos e vídeos assistidos a uma experiência prática e, de preferência, que traga algo real.

O curso [Learn React by building and deploying production ready app](//www.udemy.com/learn-react-by-building-and-deploying-production-ready-app/), da Udemy, por exemplo, traz esse _mindset_ de que o aprendizado pode estar associado à construção de um produto. No final, se aprende mesmo é na prática.

## Se joga no React

<iframe src="https://giphy.com/embed/RrVzUOXldFe8M" width="480" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Desejo muita sorte na sua caminhada!

E claro, você pode ficar à vontade para conversar comigo e tirar suas dúvidas sobre React. É só deixar seu comentário aqui no blog. E, se você já tem experiência com as tecnologias citadas neste post e tem interesse em escrever sobre, vamos adorar publicar seu texto aqui no [Eu Sou Dev](//www.eusoudev.com.br/).

Agradecimentos especiais a Flávio Módolo, Fernando Alves, Charles Mendes, Marcelo Olate, Anderson Bellini, Leandro Dantas e Rodrigo Alves, membros do grupo React & Redux, que ajudaram a validar muitas das dicas presentes aqui.

[![mulheres desenvolvedoras](https://www.eusoudev.com.br/wp-content/uploads/2018/07/Te-ajudamos-a-encontrar-o-trabalho-perfeito-como-desenvolvedor-1024x256.jpg)](//app.vulpi.com.br/dev)

The post [Obtendo experiência em React: um ponto de vista pessoal](//eusoudev.com.br/obtendo-experiencia-em-react-um-ponto-de-vista-pessoal/) appeared first on [Eu Sou Dev](//eusoudev.com.br).