React - Por que aprender? Quais as vantagens? Quais as oportunidades?

Fala, Dev. Hoje, trago a tecnologia React com uma abordagem diferente.

Se você já encontrou este nome nas vagas de front-end, ou back-end, saiba que o potencial dela é alto.

Quando estamos trilhando a carreira como front-end, passamos pelas tecnologias: html, css e logo surge o nome JavaScript. Aprendemos a criar páginas estruturadas, utilizando as tags html. Depois, aprendemos a utilizar as técnicas de seo com html5, aplicando semântica.

Logo, chegamos no css, estilizando nossas páginas feitas em html/html5, e com o tempo, aprendemos o css3, aplicando responsividade, pré-processadores, media queries, flexbox, grids e mais.

O JavaScript surge com seu poder para deixar as páginas dinâmicas, manipular dados de formulários, adicionar animações, solicitar dados do servidor, e assim, damos vida a nossa página pela possibilidade de aumentar o nível de interação do usuário, assim como, melhorar a experiência.

O React aparece para por ordem em tudo, ou seja, você tem muito código nos sites que cria com html, css, javascript, e tudo pode ficar complexo. Quando falo de complexo, digo, uma alteração que você desejar fazer pode dar um trabalho enorme, por ter que fazer as alterações em vários arquivos de código.

Logo, a produtividade cai, a medida que o site cresce. Isso deixa tudo difícil de manter e gerenciar. Devido a isso, como opinião pessoal, deixo a visão. Quer criar sites simples e pequenos? Pode utilizar html, css e javascript, puros, ou seja, sem frameworks ou bibliotecas.

Quer criar algo grande, uma aplicação, que é acessado por vários usuários, possui muitas interações, deixar tudo dinâmico, fácil de atualizar ou adicionar novas funcionalidades... Então, você precisará de uma tecnologia como React.

A diferença na hora de hospedar é a seguinte: Utilizando html e css, qualquer site de hospedagem dá conta. Mas, se você quiser usar JavaScript, nem todo servidor de hospedagem, dá suporte a esta tecnologia, a nível de gerenciar uma aplicação.

Logo, para se trabalhar com React, que usa JavaScript, você precisará de contratar ou até utilizar um serviço gratuito chamado de PasS, ou seja, plataforma como serviço. Isso, nada mais é do que um servidor que possui as tecnologias que você precisa, tal como, java, javascript, react, php, django, que dão a possibilidade de ter o front-end e o back-end no mesmo ambiente, e ainda poder escalar recursos a medida que o nível de acesso a sua aplicação cresce (espaço de armazenamento por exemplo).

O React tem por padrão a criação de componentes com funcionalidade única, que pode ser reutilizado em outras partes do código, apenas informando seu nome e importando o arquivo.

A visão é: Com html e css, javascript, se você precisasse criar um botão com o nome cadastrar, você chamaria a tag button e a adicionaria. Se outras páginas do seu site precisassem de mais botões com esse padrão, você precisaria reescrever o mesmo código em cada página. Caso você precisasse alterar a cor deste botão, você precisaria ter o cuidado de nomear todos com a mesma classe, para que o css atingisse todos. Caso contrário, você perderia a estilização.

Pensando dessa forma, temos que o botão que falo acima é independente em cada página, mas, tentamos manter o mesmo padrão de estilização via css.

Quando olhamos para o React, podemos pensar que na hora de criar um botão, ele será um arquivo específico, ou seja, um componente escrito em JavaScript. Este componente, terá propriedades específicas dele e comportamentos específicos. No momento da criação, o foco é no componente da vez. Terminou a escrita do componente, basta importá-lo onde deseja utilizar, seja em uma única página, ou em 100 páginas diferentes, pois o comportamento e as propriedades dele serão as mesmas.

Quer escrever um botão diferente, um botão de nome cancelar, você pode criar um outro componente para isso, ou utilizar uma coisa chamada de props, que pode ser vista como sendo uma função que altera uma propriedade do componente que você deseja. Logo, você pode criar um componente botão, que receberá uma props, e a depender do valor dela, o nome do botão poderá ser cadastrar ou cancelar.

A alteração que você fizer no componente botão, será atualizada em todos os outros arquivos da sua aplicação que tiverem este componente importado. Logo, a preocupação em perder tempo atualizando arquivo por arquivo, testando para verificar se você atualizou todos os arquivos, cai por terra.

Além disso, temos a presença dos hooks, que permitem que o usuário interaja com o site/aplicação, alterando elementos da página de forma dinâmica, sem precisa realizar uma nova solicitação, aplicando estruturas condicionais, estruturas de repetição, de forma bem mais simples, do que utilizando o JavaScript puro com Dom.

O nível de desenvolvimento cresce, pois o foco é no componente, e você constrói tudo de forma isolada e vai juntando feito um brinquedo de lego. É uma nova forma de escrever códigos, de forma segura, escalável, aplicando reuso, aumentando o poder de gerência e recursos.

Com o gerenciador de pacotes NodeJs, você escreve uma linha de comando, tal como, npx create-react app nomeDoAplicativo, e pronto, o projeto em React já é criado com toda a estrutura, de forma identica ao gerenciador de dependências do Java, o Maven.

Ao criar um projeto desta forma, você já ganha os arquivos de estilização, o arquivo da aplicação, as pastas, e um padrão a ser seguido, podendo apenas adicionar mais elementos, remover o que não precisar, ou só atualizar o que achar melhor.

Com um único comando, tal como, npm start, o NodeJS já abre seu projeto no navegador, na porta 3000, simulando um servidor real, no qual, cada modificação realizada no código, já é exibida na aplicação.

Além disso, tudo que você adicionar ao arquivo do componente que você não usar, o NodeJS reclamará, logo, é quase impossível criar algo que você não vá usar e deixar lá consumindo memória e recursos desnecessariamente.

Outro ponto, é que qualquer erro, logo é apresentado, pois ele poderá comprometer toda a aplicação. Essa gerencia, no momento de desenvolvimento, possibilita criar códigos mais limpos, seguros e otimizados. Ela evita erros comuns e você ganha segurança no desenvolvimento da sua aplicação.

Você poderá utilizar o React para alterar o css da página geral, ou apenas dos componentes que desejar, assim como, manipular o html, seja de conteúdo normal, formulários, adicioná-los e removê-los, como se você estivesse criando o código no navegador web do usuário final, no computador do cliente.

Você aprenderá com React a gerenciar rotas, fazer requisições http de uma forma mais elegante e produtiva. Além de poder consumir uma API se desejar.

Isso me lembra o Spring Boot, do Java, que dá um monte de recursos de produtividade semelhantes, para o desenvolvedor Back-end. Assim, não é comum ver vagas de back-end que pede uma tecnologia de front-end, tal como, React ou Angular.

Há muitas vagas para desenvolvedores React no mercado de trabalho, mas é uma tecnologia que precisa de dedicação e tempo para se adaptar ao novo padrão, assim como, qualquer outra tecnologia.

A curva de aprendizado dela é interessante, pois se você já souber html, css e javascript, isso facilitará seu aprendizado. Caso não saiba, poderá perder algum tempo para se adaptar, mas, nada o impede de aprender React de cara... algumas pessoas fazem isso, mas não recomendo.

Particularmente, se eu fosse começar a estudar hoje, gastaria um mês ou dois, buscando aprender o máximo que desse de html, css e javascript, para depois, ingressar no React.

Quando temos um projeto pronto, a depender da plataforma como serviço que você utilize para subir a sua aplicação, você só precisará subir a pasta do projeto, como deploy, sem precisa saber de containers, ftp, ou temas relacionados a infraestrutura do projeto... ou seja, seu foco é só criar a aplicação. Mas, depende da plataforma.

Deixo como sugestão o vídeo do Diego Pinho, para você notar como é fácil subir uma aplicação estática, numa plataforma como serviço, tal com, a Netifly: https://youtu.be/gbHUjHxUNDE

Alguns Devs recomendam o Heroku, mas ouvi boatos que a plataforma será paga em breve. Por isso, deixo a opção acima com sugestão gratuita, além de ter outras abordagens, tal como, o Railway que é apresentado neste vídeo: https://www.youtube.com/watch?v=yntgB-9iNdA&feature=youtu.be

Para fechar, deixo a sugestão de trabalhos como Freelancer, após aprender tecnologia com este poder que o React dá. Seja em plataformas como a Workana, 99Jobs, GetNinjas, ou, procurando por clientes nas redes sociais, ou ainda, gerando networking nos ambientes que passar.

O objetivo deste artigo é te dar uma visão melhor desta tecnologia, caso já tenha ouvido falar, ou não tenha interagido com ela. Falo isso, pois demorei mais do que o necessário para ter o primeiro contato e começar a usufruir dos recursos e oportunidades.

Deixo abaixo, minhas redes sociais:

- LinkedIn: https://www.linkedin.com/in/olivalpaulino/

- Instagram: https://www.instagram.com/olivalpaulino/

- Quer aprender JavaScript? Acesse: https://www.youtube.com/playlist?list=PLf-aKpXauSaZVETUNFk1sG7tjFcwPnULr