[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.

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

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

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.

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.

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

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.