Aprenda a dar os primeiros passos com React

React é sem dúvidas é uma das bibliotecas mais usual entre os desenvolvedores front-end, que inclusive, é um dos maiores requisitos para quem procura algum trabalho nessa área. Com ela é possível criar incríveis projetos utilizado o Javascript enquanto podemos reaproveitar tudo o que já foi criado de forma muito mais eficiente.

É imprescindível que você conheça o Javascript, sem isso não é possível aprender o React, visto que vamos usar o JS o tempo todo.

Se você está aqui, então provavelmente já ouviu falar em React, mas de qualquer forma, vamos ver uma breve definição dos próprios mantenedores.

O React é uma biblioteca JavaScript de código aberto com foco em criar interfaces de usuário em páginas web. É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de desenvolvedores individuais. Fonte: Wikipedia

Sempre que a gente programar nossos scripts, será necessário compila-los para assim ter um projeto que é possível rodar no lado do cliente.

Okay, agora a gente já sabe que se trata de uma biblioteca Javascript que serve para criar as interfaces com o usuário, mas ainda existe uma pergunta que não se quer calar.

Por que devo utilizar React?

Bem, essa pergunta quem deve ter a resposta é única e exclusivamente você! Mas de qualquer forma, não estude algo por que alguém te indicou, por modinha ou algo do tipo se não pretende de fato torna-la parte do seu dia a dia ou dos seus projetos.

Espero que ao termino desse artigo você possa refletir sobre a pergunta e que você tenha uma resposta mais otimista, mas de qualquer forma, vamos ver alguns motivos para estudar React.

Primeiramente temos muitas vagas de trabalho com essa biblioteca, o que nos garante estar atuando com algo que é bem remunerado e que tem uma alta procura por profissionais.

Tirando a remuneração de lado que é algo bom, vamos olhar agora para os benefícios de criar um projeto, seja um pessoal, para estudos ou usar em alguma empresa. Quando utilizamos o HTML, CSS e Javascript puro, é muito difícil a gente criar um componente, manter uma boa estrutura dos scripts JS e CSS, manter uma harmonia entre tudo o que é criado e mais algumas coisas.

Para ficar mais claro a explicação acima, para que a gente possa criar uma simples página que lista alguns produtos, é necessário ter um arquivo Javascript, arquivo CSS e todo nosso HTML. Cada pequena parte dessa página de produtos fica junto, se você pretende levar algum elemento para outra página, certamente irá fazer referência ao arquivo de estilo/javascript utilizado ou ter que duplicar o código, não é mesmo?

Com o React podemos criar um arquivo contendo todo o seu Javascript com HTML, importar apenas um trecho de CSS e chamar ele onde a gente quiser, sem precisar se preocupar com a duplicidade, já que uma vez que alteramos arquivo único e original, todas as partes que os chamam também serão afetados.

Ainda mantendo a estrutura de componentização, podemos remover um componente ou fazer a substituição de forma rápida e quase que instantânea.

Outro ponto muito importante é que vamos manter nosso código dentro de uma estrutura já existente, evitando gambiarras, modificando a estrutura do projeto, entre outras má práticas. Assim qualquer programador pode modificar o projeto sem maiores problemas.

Para fechar com cereja esse tópico, ainda com o React é possível instalar através do NPM vários pacotes, como o Axios, garantindo que a gente só faz a sua referência e começa a fazer requisições de dentro da aplicação.

O que são componentes?

Se você ainda não está habituado com o conceito de componentes, então vamos ver uma definição.

React e Componentes Web são construídos para resolver problemas diferentes. Componentes Web fornecem forte encapsulamento para componentes reutilizáveis. Enquanto que o React fornece uma biblioteca declarativa que mantém o DOM em sincronia com os seus dados. Fonte: React

Observe a imagem abaixo, ela pode facilmente ser transformada em um componente. Note que temos três principais elementos, sendo:

Imagem do usuário;
Nome do usuário;
Alguma descrição, comentário ou texto feito pelo usuário.

Com o modelo de componentização a gente simplesmente escreve um script que espera receber uma imagem, nome e descrição. Uma vez os dados recebidos pelo componente, o seu layout é renderizado e agora podemos levar esse mesmo componente para qualquer parte do sistema sem se preocupar em como ele deve ser construido, afinal, programamos uma única vez e usamos infinitas outras.

O que é necessário para rodar React?

Agora que a gente já entendeu mesmo que superficialmente o que é o React e a sua importância, precisamos criar nosso primeiro projeto, para isso, vamos precisar que o Node e o NPM esteja instalado em nosso computador.

Uma vez o Node instalado, o NPM já vai estar disponível, então só é necessário fazer uma única instalação.

Também vamos precisar de um editor de código, porém eles são como cadeiras de cinema, cada um escolhe a que melhor lhe convém. De qualquer forma, é muito comum ver desenvolvedores utilizando o Visual Studio Code, na qual também recomendo.

Acesse o site oficial do VS Code, faça o download e a instalação do editor. Não vamos abordar esse tema por aqui.

Instalando o Node.JS

Primeiramente acesse a página de download do Node.JS em https://nodejs.org/en/download, por fim, escolha a versão LTS (Long Term Support, suporte a longo prazo) compatível com seu sistema operacional. Note que no Linux é possível instalar via apt.

Abaixo o comando necessário para instalar no Linux Ubuntu, caso não seja seu caso, simplesmente ignore.

sudo apt install nodejs

No Windows, basta clicar no botão indicado para que um instalador comece a ser baixado. O processo de instalação é bem, mas caso você tenha dificuldade, recomendo acompanhar o artigo https://www.pluralsight.com/guides/getting-started-with-nodejs.

Uma vez que o Node esteja instalado, vamos precisar fazer a confirmação, para isso, abra o terminal de sua preferência, como CMD, Power Shell, Git Bash, ou qualquer outro. Caso você não saiba o que é isso, é muito importante que você de uma pausa e vá até o Google pesquisar por um desses terminais, vamos utiliza-los o tempo todo.

Com o terminal aberto, digite o comando abaixo para ver a versão do Node.

node -v

E o comando abaixo para ver a versão do NPM.

npm -v

Visualizando a versão do Node.JS e do NPM.

Para fazer as primeiras instalações do React, vamos utilizar o NPX ao invés do NPM, inclusive, você pode rodar o comando abaixo em seu terminal para garantir que ele esteja instalado e visualizar a sua última versão.

npx -v

Vou pular a explicação da diferença entre o NPM e NPX, mas nas referências desse artigo vou deixar um link muito importante que esclarece isso.

Criando o seu primeiro projeto em React

Okay, tudo o que a gente precisa já está instalado, agora finalmente vamos começar a criar nosso projeto para finalmente criar nosso Hello World.

Antes de mais nada, crie uma pasta no seu sistema, é dentro dela que nosso projeto será criado e que vai conter todos os nossos códigos.

Lembra que mais acima falei sobre os terminais? Pois bem, vamos utilizar ele daqui para frente. Nas referências vou deixar uma postagem que a SatellaSoft fez no Instagram sobre esse tema, então não deixe de conferir e seguir a gente lá.

No Windows 10, clique com o botão direito do mouse enquanto segura a tecla CTRL Left (CTRL da esquerda), por fim, abra o terminal de sua preferência, aqui vou clicar em Abrir janela do PowerShell aqui.

Como abrir o terminal PowerShell no Windows 10.

Agora que você está com um terminal aberto, rode o comando abaixo. Note que onde está escrito meu-projeto, você pode trocar para qualquer outro nome desde que não use espaços, caracteres acentuados nem na maiúscula. Vamos manter essa convenção desde já.

npx create-react-app meu-projeto

Enquanto o projeto está sendo criado e as dependências baixadas, você verá várias mensagens na tela. Espere o processo terminar.

Uma vez que a instalação esteja concluída, vamos agora acessar a pasta meu-projeto através do próprio terminal, para isso, insira o código abaixo. Note que CD significa Change Directory (mude de diretório)

cd meu-projeto

Agora estamos dentro da pasta na qual o projeto foi criado, sendo assim, execute o comando abaixo para rodar o projeto em React e abrir o navegador de Internet.

npm start

No nosso caso foi aberto a URL localhost rodando na porta 3000, conforme mostra a seguir http://localhost:3000.

Programando em React

Dando continuidade, uma vez que você criou o projeto, abra a sua pasta no Visual Studio Code, para isso, com o VS Code aberto clique em File no canto superior esquerdo, em seguida clique em Open Folder. Agora selecione a pasta e clique em Selecionar Pasta.

Ainda no VS Code é possível utilizar o terminal integrado, mas vamos pular esse assunto por enquanto.

Estrutura de pastas e arquivos do React.

Como já discutido logo no inicio, o React tem sua própria estrutura e a prova disso, é que ele é muito organizado a ponto de nos trazer o .gitignore com exclusões de arquivos e pastas que não devem ser versionadas, como a node_modules, por exemplo.

Versionamento é um assunto que não vamos abordar aqui, mas é bom que você estude sobre Git e Github.

A pasta node_modules é gigante, é nela que está todos os pacotes que a gente vai utilizar e também o React para compilar nossa build final.

No Visual Studio Code, de um duplo clique no arquivo App.js. Note que logo no inicio é feito a importação de um arquivo de logo e outro de estilo, ambos estão dentro da pasta /src.

Arquivo App.js no React com as importações.

Para o nosso primeiro contato, não vamos fazer nada mirabolante, então, de um duplo clique no arquivo App.css, apague todo seu conteúdo e inclua o código abaixo.

h1{
  color: #3d65ac;
  padding:5px 10px;
}

h1 span{
  color: #ef3e39;
}

Nosso código basicamente coloca o elemento h1 na cor azul e seu filho span na cor vermelho.

Agora de um duplo clique no arquivo App.js, apague a primeira linha de importação da logo. Apague também todo o conteúdo da div que contenha o atributo className App.

Vamos incluir um elemento h1 e um span, deixando nosso código como mostrado abaixo.

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Olá, <span>mundo!</span></h1>
    </div>
  );
}

export default App;

Se até aqui você executou tudo corretamente, ao abrir a página do projeto no navegador, vamos ver algo como mostra a figura a seguir.

Rodando uma aplicação React em maquina local.

Finalizamos nosso primeiro contato por aqui, mas ainda tem algo muito importante que precisa ser entendido.

O que é o JSX?

Você certamente deve ter estranhado o fato de inserir HTML dentro de uma função Javascript, mas acredite, aquilo não era HTML e sim JSX. Existe algumas regras que veremos nos próximos artigos.

Primeiramente vamos a uma breve definição do que é JSX.

JSX é uma extensão da sintaxe da linguagem JavaScript que fornece uma maneira de estruturar a renderização de componentes usando uma sintaxe familiar para muitos desenvolvedores. É semelhante ao HTML. Fonte: Wikipedia

JSX significa JavaScript XML e nos permite incluir códigos Javascript muito próximo do HTML, mantendo assim tudo muito mais organizado e fácil de entender. Com esse recurso a gente não precisa criar elementos (createElement).
O interessante é que ao invés de usar o atributo class para inserir um estilo a um elemento, devemos usar className, que é a forma como o próprio Javascript faz essa atribuição. Veja um exemplo no código abaixo.

<div className="App">

No final do túnel, existe algum pré-processador, como Babel, por exemplo, que lê todas as nossas instruções JSX e cria os códigos Javascript puro para gerar nossos elementos do DOM.

Conclusão

Bem, finalizamos por aqui nosso guia básico de como dar os primeiros passos com React. Embora a gente tenha feito um mínimo esforço por parte de codificar em React, saiba que tudo o que foi discutido, instalado e configurado, é de suma importância para que você possa seguir com nossos próximos artigos e conteúdos sobre o tema.

Não deixe de conferir abaixo a seção de referência, deixei alguns links muito importantes para você e que vai agregar muito no seu conhecimento. Não se esqueça de comentar abaixo o que achou, isso nos ajuda na produção de mais materiais como esse.