ReactJS é a tecnologia mais usada por pessoas desenvolvedoras experientes e também por pessoas que estão aprendendo a programar, de acordo com a pesquisa do StackOverflow com mais de 70mil pessoas da comunidade tech lançada em maio de 2022.
Imagina você aprendendo os passos iniciais de como as grandes plataformas web são criadas nos dias de hoje. Plataformas como Facebook, Instagram, Twitter, TikTok, Netflix, AirBnB, Notion e muitas outras.
Isso te abre possibilidades de conseguir sua vaga como dev front-end jr., num dos mercados que mais cresce no Brasil e no mundo, com salários e benefícios atrativos até mesmo para pessoas iniciantes ou estagiárias.
Mas nem tudo são flores e iniciar os estudos de uma nova tecnologia é um processo que demanda energia, comprometimento e esforço. Por isso, nesse texto eu vou te contar 5 desafios que devs iniciantes enfrentam quando estão dando os primeiros com ReactJS. Vai que você se identifica e tira daqui algum aprendizado! Vamos lá?
1- Não ter o costume de usar o terminal
Quando a gente está estudando front-end, geralmente, inicia com lógica de programação, html, css e javascript com manipulação do DOM.
Aí a gente começa a criar alguns projetinhos pra treinar: todo list, formulários, sites e por aí vai. Mas a gente tá fazendo tudo isso sem encarar o terminal.
Quando muito usa o terminal, é pra subir algum projeto no github usando o git, mas também existem formas de fugir disso e a gente foge. O fato é que não deveríamos.
Pois ter o costume de usar o terminal faz muita falta quando estamos aprendendo ReactJS. Pois usamos com muito mais frequência o terminal para:
- criar um projeto
- rodar um projeto
- instalar dependências
- e mais
É muito importante saber o básico de comandos do terminal, e navegar pelas pastas se prova um desafio e tanto.
Inúmeras vezes eu esquecia de entrar na pasta do projeto e não percebia de cara, daí meu projeto não rodava de jeito nenhum, e só quando já tava perdendo as esperanças eu percebia: “não vai rodar, se não entrar na pasta do projeto, né”. 😳
Não fuja do terminal, ele é legal, rs!
2- Não saber como rodar o projeto no navegador
Outro choque de realidade é que abrir o html para ver o projeto ReactJS no navegador, não será mais usando o live server ou clicando pra abrir o html.
É preciso rodar um script pra o projeto iniciar um localhost, que no contexto de redes nada mais é do que o nosso próprio computador, e acaba sendo uma forma de mascarar um endereço de IP.
No ReactJS, se você usou um gerador de projeto como vite ou create-react-app, o processo de ver e testar seu site no localhost enquanto desenvolve já está todo criado.
Além disso, temos também a forma como o conteúdo aparece na tela, se não escrevemos no HTML como o conteúdo vai parar na tela?
Tudo acontece devido ao arquivo main ou index que captura. a tag com id root e com o metodo render coloca todo o conteúdo que está no App na tela. Entender esse caminho é super importante.
Logo, se precisamos mudar o conteúdo que aparece na tela isso deve ser feito no App, ou deve ser importado no App.
Fluxo para entender como o conteúdo chega na tela:
Mesmo fluxo para entender como o conteúdo chega na tela, mas dessa vez demonstrando quando tenho componentes e preciso importar no App.
3- Não ter uma base boa de Javascript e HTML
Quando a gente tá começando a estudar ReactJS não faz ideia que se a gente dominar os fundamentos de html e javascript pode voar nos estudos da ferramenta.
Essa base é importantíssima, pois vai te preparar para tudo que esperam de você enquanto pessoa desenvolvedora front-end.
E mesmo quando você vai aprendendo como resolver problemas mais complexos, volta e meia você vai precisar revisitar esses conceitos e fundamentos.
Afinal de contas, React é uma biblioteca javascript, então a gente vai estar escrevendo JS com uma forte pitada de html. 😂
Nesse momento do estudo, vai ser super importante também ter uma visão de como funciona a web e seus protocolos, principalmente o protocolo http. É importante também saber sobre Javascript assíncrono, promises e métodos de iteração de array.
Saber isso vai te livrar de muitos sufocos.
4- Não saber como escrever em ReactJS
Eu sempre repito nos meus conteúdos que sintaxe de uma linguagem a gente vai pegando a prática com o dia a dia e não precisamos decorar. Mas entender que JSX é a forma que a gente escreve HTML dentro do Javascript vai ser muito importante pra seus estudos de ReactJs.
Além disso, a gente vai acabar descobrindo que saber usar o import/export de arquivos também vai ser um super desafio. A gente vai errar o caminho dos arquivos, vai esquecer de colocar a palavra reservada from, vai se confundir no uso de exports nomeados e padrão e por aí vai.
Confere aqui a diferença entre named export e default export:
As exportações sem
default
são exportações nomeadas. E não podemos alterar seu nome quando estamos importando como no exemplo aqui embaixo:import { Title } from './Title'As exportações com
default
são exportações padrão e podem ser renomeadas a qualquer momento. Tipo aqui no exemplo:import MyTitleModified from './Title'O React é um ótimo exemplo de biblioteca que exporta componentes padrão e nomeados.
import React, { useState, useEffect } from 'react'
Mas treinando a gente consegue aprender a ter mais atenção ao jeitinho React de programar.
5- Não saber como procurar conteúdos para dar os primeiros passos
Há 3 anos e meio, eu estava me sentindo exatamente assim, eu não sabia quais conteúdos de ReactJs estudar e me aprofundar pra me tornar uma dev front-end.
E não era a falta de opções que me deixava perdida, era justamente o oposto, eram muitas opções, muitos conteúdos e isso tudo me deixava sem saber qual caminho seria mais efetivo.
Por isso decidi colocar aqui embaixo alguns materiais que produzi de ReactJS, pra te contar o meu caminho das pedras, o meu roadmap. Esses foram os passos que me ajudaram a criar uma trilha de estudos que fez sentido pra minha jornada.
E mesmo sabendo que o meu caminho talvez não se encaixe perfeitamente com o que você deseja, talvez seja um incentivo ou um direcionamento. Vem conferir esses materiais que podem te ajudar nos estudos de ReactJS!
Um episódio no podcast quero ser dev:
Um texto aqui no blog te ensinando a criar seu primeiro projeto ReactJS:
- 👩🏾💻🚀 Aulas de ReactJS que gravei em novembro de 2021: https://queroserdev.com/event
Roadmap
: trilha ReactJSIniciar nos testes unitários
: React Testing LibraryReactJS para iniciantes
: Minha palestra no FrontIn Elas ProgramamSlides da palestra
: Slides da palestra5 Projetinhos para estudar
: Projetos sugeridos na palestra
Conclusão
Todos esses tópicos formam um pouquinho dos desafios que vivi na quando estava dando os primeiros passos com ReactJS.
Eu espero que tenha te ajudado. Me conta nos comentários se você vive ou viveu alguns deles. Ou também se você aponta outros desafios que não citei aqui!
Não esquece também de compartilhar, vai que ajuda alguém. Até o próximo texto!