Iniciando com React.JS

O que é React.JS?

Para começar nosso artigo vou respoder de forma rápida e simples a pergunta que muitos que não tiveram contato com o React ainda podem fazer: O que é React? Bem, como a própria documentação informa, React é “Uma biblioteca JavaScript para criar interfaces de usuário”. Isso mesmo, não é um framework, trata-se de uma poderosa biblioteca criada e mantida pelo time do Facebook para construção de interfaces do usuário no front-end através do JavaScript. Atualmente o React.JS está em alta e combinando com o mercado aquecido encontramos muitas vagas disponíveis para quem domina essa tecnologia.

Com o React desenvolvemos aplicações SPA (Single Page Application ou Aplicações de única página) que são aplicações carregadas uma única vez pelo lado do cliente (browser), melhorando significativamente a performance, simulando uma experiência próxima de uma app desktop, por exemplo, onde não temos o reload das páginas e uma navegação leve e sem muitos impactos visuais para o usuário. Toda a aplicação (HTML, CSS e JS) é carregada e enviada para o cliente apenas no momento em que o usuário realiza o primeiro acesso, em seguida, toda a navegação é realizada sem a necessidade de novas requisições para o servidor com o objetivo de carregar essas páginas, visto que o carregamento já foi feito 100% no primeiro acesso.

Criando uma aplicação React

A forma mais tradicional e conhecida até o momento para criar um projeto React é utilizando o CRA (Create React App), que é a maneira oficial. O CRA se responsabiliza por criar e configurar todas as ferramentas de compilação (ex: Webpack e Babel), deixando o desenvolvedor livre para focar no código.

Para iniciar um projeto com CRA precisamos ter o Node instalado na máquina em sua versão 14 ou superior. O comando para criar varia de acordo com o gerenciador de pacotes que você utiliza, segue abaixo as opções mais comuns: npx create-react-app nome-do-app ou npm init react-app nome-do-app ou yarn create react-app nome-do-app Após instalação, vamos abrir a pasta do projeto criado: cd nome-do-app E em seguida podemos abrir com a IDE de nossa preferência… Eu costumo utilizar o VSCode, e para abrir com ele podemos usar o comando: code . Para rodar o projeto vamos utilizar o comando: npm start ou yarn start A aplicação será rodada em desenvolvimento e você poderá visualizar em seu navegador abrindo o http://localhost:3000.

Recentemente uma outra forma de criar aplicações React.JS vem ganhando espaço e conquistando os desenvolvedores devido a sua velocidade na criação do projeto e também na compilação, outro motivo é o fato da aplicação ser criada de uma forma mais enxuta ao se comparar com o CRA, estamos falando do Vite (palavra que vem do Francês, traduzida para “rápido”).

Para iniciar um projeto com Vite precisamos ter o Node instalado na máquina em sua versão 12.2.0 ou superior. O comando para criar varia de acordo com o gerenciador de pacotes que você utiliza, segue abaixo as opções mais comuns: npm create vite@latest ou yarn create vite ou pnpm create vite Após isso, basta seguir as instruções do instalador. A primeira informação solicitada é o nome do projeto, vamos considerar o mesmo nome usado no exemplo anterior. Em seguida será apresentada uma lista de frameworks e bibliotecas para escolha do usuário. No nosso caso, basta escolhermos o React. A próxima etapa é a escolha da criação do projeto React com ou sem TypeScript (vamos falar sobre ele em outro artigo…). Por fim, a aplicação será criada de uma forma absurdamente rápida, basta navegar até a pasta e instalar as dependências com os comandos abaixo: cd nome-do-app npm install Abra o projeto com a IDE de sua preferência e seguida rode o comando abaixo para iniciar no servidor de desenvolvimento: npm run dev A aplicação será rodada em desenvolvimento e você poderá visualizar em seu navegador abrindo o http://localhost:3000. Nos nossos próximos artigos vamos abordar alguns fundamentos e principais funcionalidades dentro do React.JS, como o uso de componentes, propriedades, estados e efeitos. No meu canal do Youtube você já encontra alguns vídeos dedicados a esses temas. Um abraço a todos!