Obtendo experiência em React: um ponto de vista pessoal

Tempo de leitura: 7 minutos

Jimmy Andrade é Product Manager na Vulpi e, depois de utilizar o React, resolveu compartilhar sua jornada em busca de conhecimento e experimentações. Ele conta sobre suas dificuldades, expectativas e realizações.

Nas palavras do Jimmy…

É muito comum, para as pessoas que despertaram interesse pelo React, se sentirem perdidas quando querem começar a aprender.

Esse foi o meu caso. 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

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, se você perguntar, toda a comunidade dirá: 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.

O que é indispensável?

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.

A parte mais importante para mim foi a de Classes em JavaScript, 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

Após isso, mergulhei fundo na documentação oficial do React. 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, 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 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 é 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.

O início da Megan UI

Junto com o Paulo Melo, o “Panda”, Product Designer da Vulpi, começamos usando o Create React Library a desenvolver uma biblioteca de componentes de UI reutilizáveis, chamada Megan UI (disponível no GitHub e open-source).

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, 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. 

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.

Progressive Web Apps – Construa aplicações progressivas com React, 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:

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, 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

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.

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *