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
Entre no projeto login-signup-ui
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.
Em seguida, importe bootstrap.min.css de node_modules dentro do arquivo src/App.js
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
Adicione o seguinte código no arquivo login.js.
Agora adicione o seguinte código no arquivo signup.js
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.
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
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:
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
A seguir a saída para o form da UI de registro no React.
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
Essa será a saída para o registration UI form no React.
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.
Você deve iniciar o aplicativo React usando o comando abaixo:
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.
Top comments (0)