Executando verificação de segurança...
3

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!

Carregando publicação patrocinada...
2

Muito massa amigo, quando estava no meio da leitura, pensei: "Mas e o Vite!?", ai você foi e falou. Sua postagem ficou incrível, parabéns!!! Vou lá no YT conhecer seu trabalho! TMJ

1

Valeu João! Estou no começo da jornada, em transição de carreira, tentando evoluir. Criei o canal pra reforçar as coisas que venho estudando e também tentar ajudar a galera que está iniciando...

1

Show demaaaais! Somos dois, estou aprendendo react até hoje, a cada dia que passa aprendo algo novo KKKKK Muito massa! Bem vindo a carreira de Dev! Tamo junto nessa nova jornada amigo!

2
2

Parabéns pelo tutorial introdutório, ficou #delicinha!
Eu já sou programador, porém comecei a pouco tempo no ReactJs através do curso da Rocketseat, e lá ele ensinou a criar o projeto usando o Vite.
Na minha realidade, estou conseguindo absorver super bem, de forma tranquila o React. O que vejo que preciso estudar mais é CSS, o qual sou 0%.
Mas só manter a consistência que logo todos nós vamos estar craque, criando aplicações tops!!

2

Valeu mano!! Hoje em dia o Vite está sendo bastante utilizado, tem alguns pontos positivos que deixam ele a frente do CRA. Tem varias formas de você trabalhar o CSS no React, uma que estou utilizando bastante é a ideia do CSS in JS. Nos meus projetos estou usando muito o Tailwind, facilita bastante no desenvolvimento.

1
1

blz, tenho até um vídeo introdutório sobre o assunto no Youtube, se quiser dar uma olhadinha lá. Não sou dos melhores ensinando kkkk, mas acho que ajuda a ter uma noção e lá explico como configura com React.