Como aprender React em 1 dia!
React é uma das adições à linguagem Javascript mais utilizadas por programadores no momento. E Javascript, por sua vez, também é a linguagem de desenvolvimento de código mais utilizada pelos sites da Web hoje em dia.
Você pode tentar fazer esse tutorial mesmo sem saber programar. Mas se quiser começar aprendendo Javascript, faça o tutorial da W3Schools e aprenda um pouco mais sobre a escrita HTML aqui.
Ou ainda melhor, faça o nosso tutorial: Como aprender a programar em 1 dia!
DICA: Traduza o tutorial da W3Schools para Português clicando no ícone do globo (Terra redonda), no canto superior direito das páginas.
A biblioteca React (React.js ou ReactJS) foi desenvolvida pelo Facebook, e utiliza-se das ferramentas do Node.js para funcionar. Node também é mais uma linguagem de código baseada em Javascript que também é muito utilizada pelos programadores em todo o mundo.
NodeJS
A primeira coisa necessária para se programar em React é baixar e instalar a linguagem Node em seu computador.
Verifique se a instalação está ok testando as linhas abaixo na janela de comandos de seu computador:
node --version
npm --version
npx --version
Npm é o programa que faz as instalações de componentes para o Node. E o npx executa essas instalações.
Editor de código
Código de programação são arquivos de texto com informações compreensíveis por um computador. Ou seja, para programar você precisa de um editor de texto específico para desenvolvimento chamado de Editor de Código.
Aqui nesse tutorial vamos utilizar o Visual Studio Code para criar nossos arquivos de código. Mas fique a vontade para usar qualquer outro editor de sua preferência.
Baixe e instale o VSCode no link abaixo:
HTML
Vamos começar a programação criando um primeiro código HTML bem simples.
Crie um novo arquivo no seu VSCode (Menu Arquivo>Novo Arquivo, ou pressione a tecla Control + a tecla N). Salve o arquivo como index.html e cole o seguinte código dentro dele:
Observe a utilização das tags:
<html></html> - tag raíz de inicialização de uma arquivo (documento) HTML
<body></body> - tag para demarcação do corpo do documento HTML
<h1></h1> - tag para formatação de Títulos nos textos HTML
Navegador
Agora abra um navegador web (pode ser o Google Chrome por exemplo) e cole na barra de endereços o caminho completo do seu arquivo index.html.
Para copiar a localização completa do seu arquivo de código no VSCode, clique com o botão direito do mouse em cima do título do arquivo e depois clique no menu “Copiar o Caminho”, como na figura abaixo:
Cole então o caminho do seu código fonte na barra de endereços do seu navegador, como na figura abaixo:
Observe que as tags HTML são interpretadas pelo navegador e seu site é exibido na tela formatado da maneira que foi codificado em seu arquivo index.html.
Javascript
Além de formatação, vamos adicionar agora um pouco de inteligência (lógica) ao seu código HTML, utilizando a linguagem Javascript.
Adicione um elemento <div> para criar uma seção no corpo do seu código HTML e identifique a tag <div> com o atributo id igual a “root” (raiz em inglês), por exemplo:
<div id=”root”></div>
Então adicione a tag de lógica <script> que irá preencher essa tag <div> com conteúdos de texto. Dentro da lógica <script> utilize o comando getElementById() para inserir conteúdo dentro da div “root”.
Na prática, copie o código abaixo e cole-o no seu arquivo index.html:
Volte ao seu navegador e clique no ícone de “Recarregar a página”, testando novamente o funcionamento do seu código para ter certeza que está tudo certo.
index.js
Agora vamos isolar a lógica Javascript do resto do código HTML criando um arquivo index.js à parte.
Crie um novo arquivo no VSCode, salve-o como index.js.
Mova o conteúdo da tag <script> para dentro desse arquivo index.js (ou seja, somente a linha 7 do seu arquivo HTML anterior). Como na figura abaixo:
Agora vá no arquivo index.html e importe o arquivo index.js utilizando a mesma tag <script> porém, para isso, adicionando o atributo src (de “source code”):
<script src=”index.js”></script>
Como no código abaixo:
O charset UTF-8 foi adicionado ao index.html na linha 2 através de uma metatag (<meta />) para que os caracteres especiais do Português, como acentos por exemplo, sejam renderizados corretamente pelos navegadores:
<meta charset=”UTF-8" />
Mais uma vez volte ao seu navegador e clique no ícone de “Recarregar a página”, testando novamente o funcionamento do seu código para ter certeza que está tudo certo até aqui.
react.development
Vamos agora adicionar o React ao nosso código.
Importe os dois pacotes de desenvolvimento do React no seu arquivo index.html, de acordo com a figura abaixo:
<script src=”https://unpkg.com/react@17/umd/react.development.js" ></script>
<script src=”https://unpkg.com/react-dom@17/umd/react-dom.development.js" ></script>
E então podemos começar a usar o React nos nossos arquivos Javascript. Copie o comando ReactDOM abaixo e substitua o conteúdo do arquivo index.js, como na figura:
E então teste o seu primeiro código React:
Dúvidas e Feedback
Tem alguma dúvida até aqui? Não se preocupe. Entre em nosso grupo do Telegram, tire suas dúvidas e deixe seu feedback!
Babel
Babel é uma ferramenta que ajuda o React a renderizar os códigos estendidos no Javascript (incluindo código JSX que veremos mais adiante). Utilizaremos Babel no ambiente de desenvolvimento desse tutorial.
Por exemplo, para renderizar um texto com tags HTML dentro do código React vamos importar a biblioteca do Babel em nosso arquivo index.html:
<script src=”https://unpkg.com/@babel/standalone/babel.min.js"></script>
Adicione também o atributo type=“text/babel” na tag <script> (linha 10) que importa o arquivo index.js. Como na figura abaixo:
<script src=”index.js” type=”text/babel”></script>
Agora pode adicionar tags HTML aos seus textos que o React conseguirá interpretar sua formatação.
Substitua então o código do arquivo index.js pelo código abaixo:
Servidor Web
O Babel não consegue funcionar em arquivos de código estáticos. É necessário rodar um Servidor Web em seu computador local (localhost) para que o Babel consiga executar.
Para esse tutorial vamos utilizar o Serve, um servidor web para Node super leve e simples. Instale o Serve em seu computador utilizando o instalador npm. Execute o código abaixo em sua janela de comando:
npm -g install serve
E então, dentro da pasta do seus arquivos index.html e index.js, inicie o servidor web digitando o comando abaixo:
serve
O seu código React será servido localmente pela URL abaixo. Digite-a no seu navegador para testar o React com Babel renderizando as tags HTML do seu código:
JSX
JSX é a extensão da linguagem Javascript utilizada para a programação em React. Fica mais prático adicionar lógica ao código com JSX do que com Javascript puro.
Por exemplo, vamos substituir o nome do usuário na variável tituloPagina, por outro nome qualquer de uma forma mais dinâmica.
Substitua o código abaixo no seu arquivo index.js:
Podemos trocar a variável meuNome por outros conteúdos e o tituloPagina irá se atualizar dinamicamente de acordo com o valor de meuNome.
Clique no botão de “Recarregar a página” do seu navegador e o Serve atualizará automaticamente o conteúdo do seu site.
Sua página pessoal
Vamos agora criar uma página web de verdade que conterá informações a seu respeito, como por exemplo, a sua página pessoal.
Primeiramente, copie e cole (ou clique e arraste) um arquivo com uma foto sua de perfil (jpg ou png ou gif) para dentro da mesma pasta do seu arquivos de código no VSCode. Renomeie o nome do arquivo dessa foto para ‘perfil.jpg’, por exemplo:
Depois adicione uma variável no seu arquivo index.js cujo valor seja o nome desse seu arquivo de foto (linha 2 do código abaixo).
let arquivoFoto = ‘perfil.jpg’;
E depois adicione uma variável que contenha o elemento <img> que exibirá a sua foto de perfil (linha 5).
const minhaFoto = <img src={arquivoFoto}></img>;
E então monte um elemento JSX que contenha as tags HTML para formatar um cabeçalho para a sua página pessoal, como nas linhas 6 a 10 abaixo:
Atualize sua página no navegador para testar o resultado:
CSS
Para adicionar estilo ao seu código React, crie um novo arquivo index.css na pasta de seu projeto de código.
No arquivo index.html, importe o link do seu arquivo CSS como na linha abaixo:
<link rel=”stylesheet” href=”index.css”>
Como exemplo, pode utilizar o código CSS abaixo. Ou crie o seu próprio estilo de acordo com sua criatividade:
No código React, adicione o atributo className às tags desejadas para associar o estilo criado. Exemplos nas linhas 5 e 9 do código abaixo:
<img src={arquivoFoto} className=”inline_img”></img>
Personalize a página de acordo com sua preferência, teste o resultado com o servidor Serve e envie um print para o nosso grupo no Telegram!
Function
Vamos componentizar a lógica criada para a sua página até agora em uma função separada.
Copie o código da function Perfil() em seu arquivo index.js:
Observe que a função Perfil() virou uma tag customizada dentro do React <Perfil />. Você pode agora utilizá-la e reutilizá-la em outras partes do seus arquivos de código. Como foi feito na linha 21.
A função Perfil() recebe a variável props como parâmetro. A variável props na verdade é um array que possui todos os atributos declarados na tag <Perfil/> como valores. Observe como esses valores são recuperados nas linhas 3 e 4 do código acima:
{props.meuNome} e {props.arquivoFoto}
Teste o resultado no seu navegador e assim continue criando conteúdos para sua página pessoal:
Github
Você pode acessar todo o código fonte desse tutorial no Github através da URL abaixo:
https://github.com/allineo/reactbasicao
Hospedagem
Agora vamos fazer com que a nossa página pessoal possa ser acessada por qualquer pessoa, em qualquer lugar.
Vamos fazer ela funcionar não somente em nossos computadores pessoais (localhost), mas em toda a Nuvem, ou seja, em uma hospedagem que possa ser acessada por qualquer outra pessoa através da Internet.
Vamos utilizar aqui o GitHub Pages como hospedeiro (host) para nossas páginas React.
Crie sua conta no Github.com e pressione o botão “New” para criar um novo repositório de código.
Use o seu nome de usuário do Github para nomear o seu novo repositório da seguinte maneira abaixo:
seunomedeusuario.github.io
(No meu caso: allineo.github.io)
Deixe o repositório como Public e clique no checkbox para adicionar o arquivo README.md, depois clique em “Create Repository”.
Agora selecione no botão ‘Add file’ a opção ‘Upload files’:
Arraste os arquivos de seu projeto para dentro da tela de upload e clique no botão verde “Commit changes”:
Com seu repositório criado, clique na aba ‘Settings’ e depois na opção de menu ‘Pages’.
Habilite o GitHub para criar seu domínio público na web e clique na URL gerada para o seu usuário (no meu caso: https://allineo.github.io)
Aguarde alguns minutos e acesse sua URL pública para visualizar seu novo site pessoal:
create-react-app
Agora vamos criar um projeto React para adicionar mais complexidade ao nosso aplicativo.
O React tem um comando que já cria toda a estrutura básica para um projeto de aplicativo. Digite a linha abaixo na janela de comandos do seu computador:
npx create-react-app nome_do_seu_aplicativo
Observe que o React cria uma nova pasta e uma série de subpastas e arquivos com a estrutura necessária para trabalhar, toda baseada em Node.js.
Adicione essa pasta de arquivos a sua workspace no Visual Studio Code:
Dentro da pasta public, observe o arquivo index.html gerado pelo React:
Agora dentro da pasta do seu projeto, inicie o seu aplicativo localmente digitando a linha abaixo na sua janela de comando:
npm start
O React vai abrir e renderizar automaticamente a página inicial da sua aplicação (index.html) no seu navegador, com essa configuração básica que foi gerada, na url abaixo:
App.js
Vamos fazer o que o React está mandando e vamos editar o arquivo App.js gerado, de acordo com a nossa aplicação criada anteriormente.
Vamos substituir o conteúdo retornado pela função App() pelo conteúdo da função Content() (linha 38) que criamos no arquivo index.js que codamos anteriormente:
https://github.com/allineo/allineo.github.io/blob/main/index.js
import
Agora vamos criar um arquivo novo para colocar as demais funções da nossa página de perfil. Vamos chamá-lo de perfil.js, dentro da pasta src.
E vamos copiar e colar as demais funções do nosso perfil criadas anteriormente no arquivo index.js. As funções Perfil(), Bio() e Linkedin():
Agora vamos adicionar o comando export para que essas funções possam ser acessadas de outros arquivos:
export {Perfil, Bio, LinkLinKedin};
Vamos importar esse arquivo dentro do App.js para que essas funções possam ser utilizadas.
import {Perfil, Bio, LinkLinKedin} from ‘./perfil.js’;
Por último copie e cole sua imagem de perfil dentro do diretório public e reutilize o arquivo index.css que já criamos acima:
Pronto, agora é só testar o funcionamento do aplicativo até aqui com o comando npm start:
Firebase Hosting
Um hospedeiro de sites na Nuvem muito bom e gratuito é o Firebase da Google.
Acesse firebase.google.com, crie sua conta e abra o console.
No console crie um novo projeto:
No menu esquerdo do seu novo projeto, clique na opção Hosting:
Clique no botão “Get started” para habilitar a hospedagem do Firebase no seu novo projeto:
Siga os passos de instalação do Firebase no seu computador.
Abra uma janela de comandos e digite:
npm install -g firebase-tools
Depois digite o comando abaixo e clique no link de autenticação:
firebase login
E então digite o comando de inicialização do Firebase:
firebase init
Siga as instruções. Com a tecla de seta para baixo, vá até a opção:
“Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys”
Para selecionar o hosting, pressione a tecla de espaço e então digite “Enter”:
No próximo passo, selecione a opção “Use an existing project”, descendo com a seta para baixo e pressionando “Enter”.
Seu novo projeto do Firebase aparecerá como opção. Selecione-o:
ATENÇÃO!
No próximo passo digite a palavra build como o diretório de deploy do seu projeto. Pressione “Enter”:
Aceite o Single-page app digitando “y” e pressionando “Enter”.
Não aceite builds automáticos do GitHub, digitanto “n” e pressionando “Enter”.
Pronto, o Firebase está criado, instalado e configurado em seu computador.
Build
Agora o React precisa gerar todos os arquivos públicos que serão enviados para o Host.
Na janela de comandos, digite:
npm run build
Observe que a pasta build foi criada automaticamente dentro dos arquivos de seu projeto.
Deploy no Firebase
Para fazer com que seu novo site React esteja disponível para acesso por qualquer pessoa em qualquer lugar, digite o comando abaixo.
Os arquivos da pasta build serão carregados para a nuvem do Firebase:
firebase deploy
Observe a URL pública criada automaticamente pelo Firebase para o seu projeto!
Digite essa URL gerada no seu navegador e aprecie o resultado!
Prontos para a próxima fase?!?!
Vá para o próximo tutorial:
