React: desenvolvendo componentes customizados e acessíveis com Emotion

Do Figma para o React - Apresentação

Boas-vindas a mais um curso de React! Me chamo Vinicios Neves e serei o seu instrutor nesse curso.

Vinicios Neves é um homem branco de pele clara com rosto oval. Tem olhos castanho escuro, sobrancelhas grossas, nariz comprido e boca larga. Seu cabelo é preto, e está usando um chapéu boina. Uma barba cheia e um bigode contornam seu rosto. Ele usa um par de óculos pretos com armação quadrada de lentes transparentes, e veste um moletom amarelo com capuz. Está sentado em uma cadeira cinza. Atrás dele, uma parede lisa é iluminada em tons gradientes de azul e roxo.

Neste curso, vamos pegar um projeto no Figma e trabalharemos em cima dela para construirmos uma aplicação React. Desde iniciar a aplicação com create react app, que vai subir aquela aplicação que fica com o logo do React rodando. E transformaremos isso na seguinte página:

Vamos aprender a usar os emoticons para aplicar estilos, a parte de CSS dos componentes, vamos trabalhar com o React Grid (para fazer o layout da página), e faremos isso com as nossas tarefas no Trello.

Dentro do card no Trello, teremos o checklist com a lista de tarefas que precisamos concuir.

Pré-requisitos

Para começar, é necessário ter o .Node instalado, criar a aplicação, e estamos prontos!

Espero que tenha gostado, te espero na primeira aula do curso para começarmos a prototipação da nossa startup chamada de Freelando.

Vamos lá?

Do Figma para o React - Iniciando o projeto

Agora iniciaremos a manipulação das nossas tarefas, começaremos a construção da nossa startup Freelando.

No Trello, temos as seguintes colunas da esquerda para a direita: "Tarefas a fazer", "Fazendo" e "Pronto" (desenvolvimento finalizado). Na coluna "Tarefas a fazer", temos:

• Iniciar o projeto com o create react app
• Aplicar estilos globais para font-family
• Criar componente Card
• Preparar o primeiro tema
• Consumir o tema
• Criar componente Header
• Criar componente Tipografia
• Criar componente input
• Criar componente Footer

Selecionaremos o primeiro card "iniciar o projeto com o create react app" e o arrastaremos para a segunda coluna chamada de "Fazendo". Selecionando o card, temos o checklist:

Checklist do card "Iniciar o projeto com o create react app"

• Criar repositório do GitHub
• Enviar projeto base para o GitHub

Vamos fazer isso de forma invertida, primeiro criaremos o projeto. Para isso, abriremos o terminal da nossa máquina e nele vamos navegar até a pasta que desejamos criar o projeto usando o comando cd Desktop/.

cd Desktop/

Dentro da pasta Desktop, vamos rodar o comando npx create-react-app para criarmos o projeto base passando o nome freelando.

npx create-react-app freelando

Esse comando cria a base necessária que precisamos para uma aplicação React. Há outras formas como usar o Vite ou criar esse projeto React de forma manual. Porém, há algumas vantagens ao usarmos o comando create-react-app.

Enquanto o comando roda, vamos ao GitHub criar um novo projeto. Para isso, clicamos no canto superior direito no botão de "+", e escolhemos a opção "New repository". Seremos redirecionados para uma página intitulada "Create a new repository", onde em "Repository name" escrevemos "freelando".

Repository name: freelando

Observe que fizemos um match (em português, "corresponder") com o nome do projeto que estamos criando com o repositório do GitHub. Pode ser diferente, mas para ficar mais intuitivo colocamos o mesmo nome.

Vamos preencher somente o nome, as demais informações não alteramos em nada; vamos deixar o "Public" selecionado e, em seguida, clicamos no botão verde "Create repository" (em português, "Criar repositório").

Após aguardar alguns segundos, o repositório é criado.

No caso do instrutor, o link do GitHub é: github.com/viniciosneves/freelando

Abaixo, temos três seções abaixo com algumas instruções para iniciarmos o projeto que não possui arquivo nenhum, ainda.

… or create a new repository on the command line

• echo "# freelando" >> README.md
• git init
• git add README.md

… or push an existing repository from the command line

• git remote add origin git@github.com:viniciosneves/freelando.git
• git branch -M main
• git push -u origin main

… or import code from another repository

• You can initialize this repository with code from a Subversion, Mercurial, or TFS project.

E um botão "import code", no canto inferior esquerdo.

Voltando ao terminal, temos a mensagem informando que foi criado com sucesso, e que para testarmos tudo o que fizemos é necessário entrarmos dentro da pasta freelando e rodarmos o comando npm start.

Retorno, em inglês, do console:

cd freelando

npm start

Para navegarmos para a pasta freelando, rodamos cd freelando e dentro dessa pasta, executamos:

Observe que no meu caso, do lado esquerdo da linha informa em qual diretório estou; no caso o freelando.

npm start

Após teclarmos "Enter", seremos redirecionados para uma nova aba que terá o ícone do React rodando com a URL: localhost:3000.

localhost:3000

Abaixo do ícone, temos a mensagem "Edit src/App.js and save to reload" (em português, "Edite src/App.js e salve para recarregar") pedindo para editarmos o App.js e salvar para começarmos a visualizar o funcionamento.

Porém, esse já é o nosso projeto base, o que precisamos fazer agora é finalizar o envio para o nosso repositório no GitHub; vamos vincular o repositório local com o repositório no GitHub.

Voltando ao GitHub, seguiremos o passo a passo. No nosso caso, desejamos enviar um repositório que já existe. Por que esse repositório já existe? No terminal, vamos parar o comando npm start com o comando ^C.

Logo após, rodamos o comando git status para visualizarmos se é um repositório git.

git status

Como retorno, obtemos:

On branch main

nothing to commit, working tree clean

Isso significa que não temos nada para fazer o commit nesse momento. Abriremos o VS Code executando code ..

code .

O projeto será aberto do Visual Studio Code, do lado esquerdo temos a seguinte estrutura de arquivos:

• FREELANDO
  • node_modules
  • public
  • src
  • .gitignore
  • package-lock.json
  • package.json
  • README.md

Observe que não temos nada relacionado ao git, para termos precisamos voltamos ao terminal, e rodamos git init para ele iniciar o projeto.

git init

Como retorno, obtemos:

Reinitialized existing Git repository in /Users/vinny/Desktop/freelando/.git/

A mensagem informa que ele inicializou o repositório do Git existente com sucesso, dentro da pasta freelando. Logo após, executamos git add ..

git add .

Essa instrução serve para adicionarmos todas as alterações necessárias que tiver que acrescentar, depois realizamos o commit usando o seguinte comando:

git commit -am 'iniciando o projeto'

Como não temos nada para comitar, obtemos:

On branch main

nothing to commit, working tree clean

Agora, enviaremos isso para o GitHub. Vamos voltar às instruções que o GitHub nos fornece:

… or push an existing repository from the command line

• git remote add origin git@github.com:viniciosneves/freelando.git
• git branch -M main
• git push -u origin main

Para subirmos um repositório existente, precisamos rodar esses três comandos. O primeiro comando é para adicionarmos a origem, sendo justamente o endereço no GitHub. Podemos copiar o comando, colar e rodar no terminal.

O seu comando estará com um endereço diferente!

git remote add origin git@github.com:viniciosneves/freelando.git

Não temos retorno nenhum, normal. Prosseguindo, o próximo comando é para trocarmos para a branch Main. Novamente, copiamos o comando e rodamos no terminal.

git branch -M main

Em seguida, rodamos o push para essa branch que acabamos de criar:

git push -u origin main

Como retorno, obtemos:

branch 'main' set up to track 'origin/main'.

Foi enviado!

Voltando ao GitHub e atualizando a página, somos redirecionados para a página do projeto inicial.

Link do GitHub do instrutor: github.com/viniciosneves/freelando

Temos uma estrutura de arquivos no projeto:

• public
• src
• .gitignore
• README.md
• package-lock.json
• package.json

Esses são os arquivos padrão de uma aplicação iniciada com o comando create react app. Caso não possua conhecimento sobre o GitHub, não se preocupe que deixaremos uma atividade para você entender melhor sobre os comandos, como o git add, o git commit, entre outros comandos. Em suma, o GitHub versiona o nosso código.

Após isso, voltamos ao Trello e clicamos no card "Iniciar o projeto com o create-react-app. Depois, selecionamos para marcar as tarefas que fizemos do lado esquerdo de cada uma dentro do checklist.

Checklist do card "Iniciar o projeto com o create react app"

• √ Criar repositório do GitHub
• √ Enviar projeto base para o GitHub

Após selecionarmos, podemos passar o card para a coluna "Pronto". Agora, a nossa próxima tarefa será o próximo card: Aplicar estilos globais para font-family.

Vamos lá? Te espero no próximo vídeo.

Do Figma para o React - Preparando o Emotion

Seguindo com as nossas tarefas no Trello, a próxima será o card "Aplicar estilos globais para font-family" que arrastaremos da coluna "Tarefas a fazer" para "Fazendo". Selecionando o card, temos a seção "Checklist".

Checklist

• Importar fonte do Google Fonts
• Adicionar o Emoticon ao projeto
• Remover conteúdo padrão do create-react-app
• Criar e importar componente de estilos globais

Para sabermos qual a família da fonte, vamos na fonte de estilos do projeto. Para isso, vamos ao Figma e selecionamos o texto abaixo do título "Crie seu cadastro" para pegarmos a fonte.

Com o texto selecionado, do lado direito clicamos na aba "Inspect" na parte superior para pedir para o Figma inspecionar, obtemos a família da fonte. Ao clicarmos em "Inspect", temos as propriedades da fonte, como o tamanho, a altura e o posicionamento. Descendo um pouco a aba, em "Typography", temos a fonte como sendo a "Montserrat".

Para colocarmos a fonte Montserrat no projeto, vamos ao Google Fonts que nos disponibiliza ela de forma gratuita. Descendo a página, ele nos mostra várias opções de peso (quanto mais leve o peso, mais fina a fonte), podemos selecionar as opções que desejarmos.

No meu caso, todas já estão selecionadas, mas você pode ir selecionando uma a uma do lado direito no botão de "+". Após selecionar todas as opções, do lado direito temos a opção de importar essa fonte através da tag link e realizando download para ela ficar disponível.

Logo, copiaremos todo código:

Link

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">

Usamos o link porque desejamos que o HTML com o navegador se ajuste para baixar a fonte. Ou seja, não vamos solicitar a instrução de baixar fonte via CSS.

Para inserirmos isso no React, vamos ao VS Code e clicamos em "public > index.html". Este arquivo é o container da nossa aplicação, sendo a nossa página HTML onde o React coloca todos os nossos componentes.

Na linha 12, temos:

index

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

Esse é o link do logo do React, na linha seguinte vamos colar tudo o que copiamos do Google Fonts.

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prata&display=swap"
    rel="stylesheet">

Clicamos com o botão direito do mouse e escolhemos a opção "Format Document" para o VS Code formatar. Com isso, da linha 11 até a linha 15 temos as informações sobre a fonte Montserrat.

Com a fonte disponível, vamos partir para o código CSS.

No início, já podíamos ter pensando em abrir o arquivo index.css em src, onde já inclui um font-family, podemos alterar para "Monteserrat".

index.css

body {
    margin: 0;
    font-family: 'Monteserrat';
    -webkit-font-smooting: antialiased;
    -moz-osx-font-smoothing: grayscale;

/ trecho de código suprimido

}

Porém, nesse momento, não desejamos depender de arquivo CSS. E na tarefa do Trello, temos indicado o que usaremos para trabalhar com estilos. Então voltando ao card "Aplicar estilos globais para font-family" do Trello, temos na nossa checklist o "Adicionar o Emotion ao projeto".

O que é o Emotion? Na Documentação , temos informando que o Emotion nos ajuda a lidar com CSS e estilos sem precisar manipular e importando arquivos CSS.

Para colocarmos o Emotion dentro do projeto, na página de introdução da documentação temos explicado o que precisamos fazer para instalar em um projeto JavaScript; e descendo um pouco a página, temos a seção "React".

Ou seja, temos uma versão da biblioteca específica para aplicações React, onde temos o seguinte comando (retirado da documentação mencionada acima):

npm i @emotion/styled @emotion/react

Sendo a letra i de install, e o nome das duas bibliotecas que precisamos: @emotion/styled e @emotion/react. Logo, podemos copiar esse comando e colar (Ctrl + V) no terminal para rodar, dentro da pasta freelando.

Após instalarmos as bibliotecas, precisamos cuidar desses estilos globais. Para isso, voltamos ao VS Code e dentro da pasta src vamos no arquivo index.js. Nele, vamos remover a linha 3 referente ao import './index.css';; em seguida vamos remover o arquivo index.css.

Na pasta src, clicamos no arquivo App.js e removeremos da linha 6 até 20 (toda parte do header). Sendo toco o código necessário para gerar a página inicial do React, que fica com a logo girando.

Assim, o código ficará:

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
        <h1>Freelando</h1>
    </div>
  );
}

export default App;

Dentro do div, colocamos <h1>Freelando</h1> e depois removemos className="App" e os imports acima.

App.js

function App() {
  return (
    <div>
        <h1>Freelando</h1>
    </div>
  );
}

export default App;

Em seguida, salvamos o arquivo. Como alteramos várias coisas no código, não sabemos se a nossa aplicação está rodando ou não. Vamos subir-lá e analisar o que vai acontecer.

No terminal, rodamos npm start e seremos redirecionados para o logo do React rodando que significa que a nossa aplicação está carregando na porta 3000.

localhost:3000

Como retorno no navegador, obtemos:

Freelando

Para concluirmos, voltamos ao Trello para marcar como foi feita cada atividade que realizamos nesta aula.

Checklist

• √ Importar fonte do Google Fonts
• √ Adicionar o Emoticon ao projeto
• √ Remover conteúdo padrão do create-react-app
• Criar e importar componente de estilos globais

Ficou pendente somente essa última tarefa, de criar e importar componentes de estilos globais.

Sobre o curso React: desenvolvendo componentes customizados e acessíveis com Emotion

O curso React: desenvolvendo componentes customizados e acessíveis com Emotion possui 170 minutos de vídeos, em um total de 56 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Do Figma para o React
• Trabalhando com temas
• Tipografando a aplicação
• Um Grid para a todos governar
• Componentizando o Select