Tempo de leitura: 7 minutos

É 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

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

The post Obtendo experiência em React: um ponto de vista pessoal appeared first on Eu Sou Dev.