Crie um modelo de interface Login / Sign Up (UI) em React utilizando Bootstrap 5
Tags: beginners, tutorial, react, frontend
Published: 2023-09-02 01:54:59


![interface login - sign up image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yfgw751kb8ltfdndd1j.png)
**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](https://nodejs.org/en) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67khg2fwb8a70gnftnbh.png)





Entre no projeto **login-signup-ui**


![cd login-signin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22zedv7la1kxzxek8cx1.png)









_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](https://getbootstrap.com/) este fornece ótimos componentes de UI que iremos utilizar.

![bootstrap install](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lagw3nawmel63zwunysx.png)




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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsvgrkfi8dt69r5tmu2v.png)


**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ngzzbkgbynz67hq8a72.png)



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

![login component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmz1cz8oya1wmshlp5j0.png)

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



![signup-component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ht0nbi86h4ydgvbxgywg.png)











**5) Ativação do Routing no React**

Execute o comando no terminal para instalar o módulo [react-router-dom](https://www.npmjs.com/package/react-router-dom) e habiliatr o serviço Router no React.




![react router](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5vw6eenvvjk3i5nxlql.png)





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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c79zmfldv17om5ipsis.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpyje0opdcbbqlsh448j.png)




**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jwe5jwpkuk0832b52sz.png)



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

![interface login - sign up image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yfgw751kb8ltfdndd1j.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6gspx18ah5spswy0kui.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj6yuksoiwvxfijpxvu3.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tgtns6zeffmtaptwlxi.png)

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


![npm start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbjzig64drznaeo7us8w.png)



**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](https://github.com/DaveSimoes/login-signup-react-bootstrap/tree/main)