Como aprender React em 1 dia!

Vamos agora adicionar o React ao nosso código.

Importe os dois pacotes de desenvolvimento do React no seu arquivo index.html.

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:

ReactDOM.render( 'Olá, Alline!', document.getElementById('root'));

E então teste o seu primeiro código React:

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:

Adicione também o atributo type=“text/babel” na tag script (linha 10) que importa o arquivo index.js.

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:

const tituloPagina = <h1>Olá, Alline!</h1>;

ReactDOM.render(

      tituloPagina,

      document.getElementById('root'));

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:

http://localhost:3000

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:

let meuNome = 'Fulana';

const tituloPagina = <h1>Olá, meu nome é {meuNome}!</h1>;

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.

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.

Atualize sua página no navegador para testar o resultado.

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”>

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!

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.

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.

Você pode acessar todo o código fonte desse tutorial no Github através da URL abaixo:

https://github.com/allineo/reactbasicao

Crie sua conta no Github.com se ainda não tiver.

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:

http://localhost:3000/

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

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:

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.

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.

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!