[ReactJS] #1 Criando uma tela simples de login com Firebase / Tailwindcss

Fala pessoal! 😀

Meu primeiro compartilhamento de conhecimento por aqui.

Eu não sei muito, pois sou novo em ReactJS, porém sou generalista e sei um pouco de outras linguagens.

Quero compartilhar com vocês o processo que utilizei para criar uma tela de cadastro e login para um projeto pessoal que criei para estudo da API Openai apara criação de uma aplicação para criação de Copywrite.

Hoje vou começar apenas com o processo de login e cadastro se vocês quiserem e derem um bom feedback posso continuar com os processos seguintes aqui no fórum fica a critério de vocês.


  • Vou estar utilizando o Vite para criação do ambiente de desenvolvimento em ReactJS

Bibliotecas utilizadas

  1. firebase
  2. react-firebase-hooks
  3. react-router-dom
  4. tailwindcss

Começando o projeto React

Já estou partindo do principio que você já tenha o nodejs e o npm instalado em sua máquina.

⚠️ Atenção - O tutorial será feito em um sistema Linux ⚠️

Criando aplicação 🚀


Vamos criar nossa aplicação em React com o comando abaixo e com esse comando caso você não tenha o vite em sua maquina ele ira baixa-lo antes de criar o projeto.

npm create vite@latest app-firebase -- --template react

Após ter rodado o comando npm acima seu projeto já está criado e agora é só acessar o diretório/pasta com o mesmo nome que foi dado para a sua aplicação que no meu caso foi app-firebase.

cd app-firebase

Após entrar em app-firebase você irá ver os seguintes arquivos e pastas.

Untitled

Instalando pacotes do ReacJS 📥


Vamos rodar o comando abaixo para installar as bibliotecas necessárias para o funcionamento do React:

npm install

Rodando a Aplicação 🌐


Após baixar as bibliotecas necessárias vamos rodar o projeto para ter certeza que está tudo rodando perfeitamente com o comando abaixo:

npm run dev

Segue o print da tela do servidor rodando no localhost na porta 5173

Agora é só abrir o navegador com a url http://localhost:5173

Untitled

Segue a página web com a página padrão do vite isso é sinal que nossa aplicação está rodando perfeitamente.

Untitled

Instalando Pacotes do Projeto


Volte para o terminal e com as seguintes teclas Ctrl + c e pare a aplicação e logo depois cole o comando abaixo para instalar os pacotes descritos a baixo que serão usados por nossa aplicação para acessar o firebase e estilizar a nossa pagina como criar rotas:

npm i firebase react-firebase-hooks react-router-dom tailwindcss

Instalando o tailwindcss separado para que ele seja usado apenas em desenvolvimento junto com alguns pacotes que auxiliam no uso da mesma como o postcss e autoprefixer

npm install -D tailwindcss postcss autoprefixer

Após terminar o download dos pacotes abra o seu package.json e ele tem que estar assim com os pacotes já incorporados ao nosso projeto.

Untitled

Configurando tailwindcss


Iniciando o tailwindcss com o comando abaixo ele ira gerar esses dois arquivos: tailwind.config.cjs e postcss.config.cjs

npx tailwindcss init -p

Abra o arquivo tailwind.config.cjs e cole a seguinte configuração abaixo ou copie a diferença entre o meu arquivo e o seu.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

O próximo passo é criar o nosso arquivo de estilo e por padrão ao criar o projeto ele nos traz uns estilos já por padrão de uma olhada.

Untitled

E mude para o padrão seguinte deletando todos os arquivos de estilos e criando a pasta estilo com o arquivo global.css como mostra a imagem a baixo

Untitled

Haaa! E não esqueça de apagar os imports dos arquivos que acabamos de excluir que estão em App.jsx e main.jsx

Agora vamos abrir o arquivo global.css que acabamos de criar logo acima e cole o código abaixo

@tailwind base;
@tailwind components;
@tailwind utilities;

E por fim, se você usa o vscode recomendo baixar as seguintes extenções para auxiliar na formação dos códigos do tailwindcss para que o editor não fique mostrando erros na tela.

  1. PostCss
  2. Tailwindcss

Estilizando a pagina de login


1 . Em primeiro lugar vá até o arquivo de estilização que criamos global.css e cole a seguinte estilização, coloquei um estilo básico, pois não é o foco aqui. ⚠️ Atenção - Eu apenas coloquei o css em um arquivo separado para uma melhor visualização, mas utilize o estilo direto na propriedade className do componente React ⚠️

@tailwind base;
@tailwind components;
@tailwind utilities;

/* @layer base = Siginica que aqui eu quero editar as tags do proprio html por exemplo: body, h1, div */
@layer base {
  body {
    @apply bg-gray-100 w-screen h-screen;
  }
}

/* @layer = Aqui siginifica que eu quero criar minha propria classe para reutilizar em varios lugar ou arquivos distintos. */

@layer utilities {
  .container {
    @apply h-screen  w-screen flex items-center justify-center;
  }

  .box {
    @apply h-2/3 w-2/6 shadow-xl rounded-md flex justify-center items-center flex-col bg-white;
  }
  .header {
    @apply text-xl text-center my-2;
  }
  .btn {
    @apply bg-blue-400 text-white font-normal px-3 py-1 flex  items-center rounded-md;
  }
  .btn-icon {
    @apply h-5 w-5 m-1;
  }
}

Explicação do código tailwind


h-screen - Pega o tamanho total dá tela do dispositivo bg-gray-100 - Aqui significa que eu quero que a cor de fundo fique cinza com 100 de intensidade flex - Aqui eu quero que os elemento fiquem em linha um ao lado do outro flex-col - Aqui eu quero que os elementos fiquem em forma de coluna um a baixo do outro justify-center - Quero que os elementos centralize horizontalmente items-center - Quero que os elementos centralize verticalmente text-white - Cor do texto branco serve para várias cores rounded-md - Aqui eu quero que os cantos fiquem arrendodados com o tamanho pré definido sm ou pode ser números também **shadow-xl - **Quer que fique um sombra em volta do elemento dando a sensação do elemento flutuando h-5 - Quero que o tamanho do elemento fuique com o tamanho 5 que no tailwindcss signica que ele terá 20px w-5 - Quero que a largura do elemento fuique com o tamanho 5 que no tailwindcss signica que ele terá 20px my-2 - Quero que a margem no eixo y ou vertical tenha o espaçamento de 2 que signifa argin-dtop 8px margin-bottom 8px

Código React


/d

1 . Agora no arquivo App.jsx vamos criar a tela de autenticação o seguinte código:

import googleLogo from "./assets/google-logo.png";

function App() {
  return (
    <div className="container">
      <div className="box">
        <p className="header">Formulário de Autenticação</p>
        <button className="btn">
          <img className="btn-icon" src={googleLogo} alt="" />
          <p>Logar com google</p>
        </button>
      </div>
    </div>
  );
}

export default App;

Se reparar no código eu importei uma imagem chamada google-logo.png que pode ser baixada aqui **link** e após baixá-la é só colocar na pasta assets e nossa página irá ficar com o visual como na imagem a baixo.

A tela de login ficou estilizada como a imagem abaixo.

Untitled

Não faça componentes no CSS a não ser que esteja em html puro, o tailwind foi criado para não ter esse tipo de coisa, não tem abstrações a não ser que seja absolutamente necessário, sempre dê copy paste e use os recursos do editor para mudar alguma coisa, rapidamente vc percebe que isso escala, porque é muito facil mudar apenas aquilo que você quer. E tambem vc sempre ao maximo evitar usar o @apply, foi das piores coisas que ja adicionaram e o proprio desenvolvedor do tailwind se arrependeu, passou muito tempo corrigindo bug ate funcionar mas nao vale a pena. Se quiser fazer um componente, USE O FRAMEWORK, é muito melhor, pegue as classes e coloca num componente separado de botão com todos os estilos logica e etc, é desse jeito que a documentação diz pra fazer. Se vc pega e faz classes tipo btn, vc ta jogando todos os beneficios do tailwind no lixo.

Realmente eu não costumo criar componentes assim, até porque, se fosse o próposito criar estilo separado, como você mesmo falou seria mais fácil usar uma outra biblioteca para isso. Eu criei assim apenas para facilitar a visualização já que o código iria ficar muito poluido e prejudicar bastante o entendimento. Mas de qualquer forma eu nem estava sabendo sobre esse problema que você relatou vou deixar ume disclaimer na publicação.

as fotos aqui não funcionaram, será que vc copiou o artigo de outro site ?

As imagens estão no meu notion. Vou corrigir.