DEV Community

David Simões
David Simões

Posted on

Crie um modelo de interface Login / Sign Up (UI) em React utilizando Bootstrap 5

interface login - sign up image
Introdução:
Olá Família Devs.
Neste tutorial vamos aprender a criar do zero uma interface de Login / Sign Up utilizando React e Bootstrap 5 .

Acredito que o entendimento inicial deste simples modelo irá ajudar a compreender alguns rudimentos que poderão te levar a escalar projetos acrescidos com backend, onde vc poderá se conectar por exemplo a BD´s SQL (Oracle, MySQL, Microsoft SQL Server, PostgreSQL) ou NoSQL (MongoDB, Amazon DynamoDB , entre outros.)

Em breve estaremos publicando um tutorial a respeito da parte de backend em que iremos adicionar neste projeto.

Porém por agora, para facilitar a fixação de todas as etapas de construção do sistema, vamos focar apenas no FrontEnd.

Então chega de conversa e mão na massa...

Índice:
1) Pré-requistos;
2) Configuração da biblioteca React;
3) Instalação e configuração do framework Bootstrap;
4) Criação dos componentes Login e Signup;
5) Ativação do Routing no React;
6) Criar modelo de interface de usuário (UI Template) de login, utilizando o Bootstrap;
7) Criação do modelo de UI de cadastro React com Bootstrap;
8) Criação do React Sign Up UI Template com Bootstrap
9) Adicionar estilos aos componentes de autenticação;
10) Palavras finais.

1) Pré-requistos:

Para começarmos precisamos compreender os pré requisitos para essa construção:

  • Para um melhor entendimento é importante ter conhecimentos básicos de HTML, CSS, JavaScript, React e uma pitada de ES6.
  • Verifique se você possui o Node configurado em sua máquina;

2) Configuração da biblioteca React

Execute o comando abaixo para instalar o projeto React e construir o modelo de UI do React Login-Sign Up usando create-react-app

Image description

Entre no projeto login-signup-ui

cd login-signin

Obs: Para aqueles que estão começando, recomendo NÃO copiarem e colarem os códigos, mas visualizarem todas as imagens dos códigos que serão anexadas e busquem reproduzir as linhas de código, digitando-as. Isso forçará a se lembrarem das linhas, nomes e sintaxes necessárias na hora de digitarem.

3) Instalação e configuração do framework Bootstrap

Em seguida, abra o seu painel e instale a estrutura de UI Bootstrap este fornece ótimos componentes de UI que iremos utilizar.

bootstrap install

Em seguida, importe bootstrap.min.css de node_modules dentro do arquivo src/App.js

Image description

4) Criação dos componentes Login e Signup

Agora é hora de criar os componentes Login e Sign up no React App;
Primeiro crie um diretório components na pasta src. E dentro deste crie os arquivos login.js e signup.js

src - components

Adicione o seguinte código no arquivo login.js.

login component

Agora adicione o seguinte código no arquivo signup.js

signup-component

5) Ativação do Routing no React

Execute o comando no terminal para instalar o módulo react-router-dom e habiliatr o serviço Router no React.

react router

Em seguida, vá para o arquivo src/index.js e insira o seguinte código no arquivo conforme abaixo.

Imagem do arquivo src/index.js

src-index.js

Em seguida, importe BrowserRouter as Router, Routes, Route, Link React para habilitar os routers.

Agora entre em src/App.js e inclua o seguinte código nele:

react router

7) Crie um modelo de UI para cadastro React com Bootstrap

A seguir, adicionaremos o seguinte código dentro do arquivo components/login.js para construir login form template

loginjs

A seguir a saída para o form da UI de registro no React.

interface login - sign up image

8) Criação do React Sign Up UI Template com Bootstrap

A seguir, iremos inserir o seguinte código dentro do arquivo components/signup.js para construir Sign up form template UI

signup-component

Essa será a saída para o registration UI form no React.

Image description

9) Adicionar estilos aos componentes de autenticação

Nesta etapa, adicionaremos estilo ao nosso aplicativo de UI de login React para torná-lo mais atraente.

Vá para o arquivo src/index.css e adicione o código fornecido abaixo.

index-css

Você deve iniciar o aplicativo React usando o comando abaixo:

npm start

10) Palavras finais.

Por fim, construímos o modelo React Login & Sign Up UI usando a estrutura Bootstrap UI.

Espero de verdade que este humilde tutorial te ajude a entender em como usar os componentes da UI do Bootstrap para criar belos componentes no React.

Por favor, considere compartilhar com outras pessoas.

Este projeto se encontra em meu Repositório no GitHub

Top comments (0)