ReactJS – Arranque
Hoy vamos a cree una fantástica plantilla de interfaz de usuario de inicio de sesión y registro de React usando Bootstrap 5. Esta plantilla de interfaz de usuario para iniciar sesión y registrarse seguramente lo ayudará a crear un sistema de autenticación de reacción simple.
El sistema de inicio de sesión generalmente nos permite a un individuo obtener acceso a cualquier sistema de software de forma segura. El registro es el proceso que permite a un usuario particular registrarse en cualquier aplicación web y móvil.
Este tutorial paso a paso le ayudará a aprender cómo puede crear una plantilla de inicio de sesión y registro de usuario llamativa para su próximo proyecto de React. Emplearemos el marco de interfaz de usuario Bootstrap para construir este sistema de inicio de sesión de reacción.
Configuraremos una aplicación React sencilla y comenzaremos a construirla desde cero e implementaremos un componente de interfaz de usuario de inicio de sesión y registro en ella.
Tabla de contenido
Requisito previoConfigurar la aplicación React 16+Instalar y configurar Bootstrap en ReactCrear componentes de inicio de sesión y registro de ReactHabilitar enrutamiento en ReactCrear plantilla de interfaz de usuario de formulario de inicio de sesión de React con BootstrapConstruir plantilla de interfaz de usuario de registro de React con BootstrapAgregar estilo a los componentes de autenticaciónPensamiento final
Para empezar, debes tener conocimientos básicos de HTML, CSS, React, JavaScript, TypeScript y un poco de ES6. Asegúrese de tener Node configurado en su máquina. Si no tiene un nodo en su máquina, descarguemos e instalemos en su sistema.
Ejecute el comando para instalar el proyecto React para crear la plantilla de interfaz de usuario de inicio de sesión y registro de React con Bootstrap usando crear-reaccionar-aplicación.
npx crear-reaccionar-aplicación reaccionar-iniciar-registro-plantilla-ui
Entra dentro del reaccionar-iniciar-registro-ui-plantilla proyecto.
cd reaccionar-inicio-de-registro-ui-plantilla
A continuación, instale y configure el marco de interfaz de usuario Bootstrap, que proporciona hermosos componentes de interfaz de usuario.
npm instala el arranque
Luego, importa arranque.min.css desde node_modules dentro src/App.js archivo.
importar Reaccionar desde 'reaccionar';
importar '../node_modules/bootstrap/dist/css/bootstrap.min.css';
importar './App.css';
función aplicación() {
devolver (
Crear una plantilla de interfaz de usuario para registrarse e iniciar sesión en React
);
}
exportar la aplicación predeterminada;
Ahora, crearemos un inicio de sesión y registraremos componentes en la aplicación React, crearemos un componentes directorio en la carpeta src. Y también crear login.component.js y registro.componente.js archivos dentro de él.
Agregue el siguiente código en login.component.js archivo.
importar React, {Componente} de “react”;
exportar clase predeterminada El inicio de sesión extiende el componente {
prestar() {
devolver (
Componente de inicio de sesión de React
);
}
}
Agregue el siguiente código en registro.componente.js archivo.
importar React, {Componente} de “react”;
exportar la clase predeterminada SignUp extiende el componente {
prestar() {
devolver (
Componente de registro de React
);
}
}
Ejecute el comando en la terminal para instalar el módulo reaccionar-router-dom para habilitar el servicio de enrutador en React.
npm instala reaccionar-router-dom
Luego ve a src/index.js archivo e inserte el siguiente código en el archivo como se indica a continuación.
importar reaccionar desde 'reaccionar'
importar ReactDOM desde 'react-dom/client'
importar './index.css'
importar aplicación desde './App'
importar reportWebVitals desde './reportWebVitals'
raíz constante = ReactDOM.createRoot(document.getElementById('raíz'))
raíz.render(
,
)
// Si quieres comenzar a medir el rendimiento de tu aplicación, pasa una función
// para registrar resultados (por ejemplo: reportWebVitals(console.log))
// o enviar a un punto final de análisis. Más información: https://bit.ly/CRA-vitals
informeWebVitals()
A continuación, importe BrowserRouter como enrutador, rutas, ruta, enlace Módulos de enrutador React para habilitar los enrutadores con sus componentes asociativos. Ir a src/App.js e incluya el siguiente código en él.
importar reaccionar desde 'reaccionar'
importar '../node_modules/bootstrap/dist/css/bootstrap.min.css'
importar './App.css'
importar {BrowserRouter como enrutador, rutas, ruta, enlace} desde 'react-router-dom'
importar inicio de sesión desde './components/login.component'
importar SignUp desde './components/signup.component'
función aplicación() {
devolver (
)
}
exportar aplicación predeterminada
A continuación, agregaremos el siguiente código dentro componentes/login.component.js archivo para crear la plantilla de formulario de inicio de sesión.
importar React, {Componente} de 'react'
exportar clase predeterminada El inicio de sesión extiende el componente {
prestar() {
devolver (
Iniciar sesión
className=”control-formulario”
marcador de posición=”Ingrese correo electrónico”
/>
className=”control-formulario”
marcador de posición = “Ingrese la contraseña”
/>
className=”entrada-de-control-personalizada”
id=”comprobaciónpersonalizada1″
/>
Entregar
¿Olvidaste tu contraseña?
)
}
}
El siguiente será el resultado:
A continuación, colocaremos el siguiente código dentro componentes/signup.component.js archivo para crear la plantilla de interfaz de usuario de la plantilla de autenticación del formulario de registro.
importar React, {Componente} de 'react'
exportar la clase predeterminada SignUp extiende el componente {
prestar() {
devolver (
Registrarse
className=”control-formulario”
marcador de posición = “Nombre”
/>
className=”control-formulario”
marcador de posición=”Ingrese correo electrónico”
/>
className=”control-formulario”
marcador de posición = “Ingrese la contraseña”
/>
Inscribirse
¿Ya estás registrado ¿iniciar sesión?
)
}
}
A continuación se muestra el resultado del formulario de interfaz de usuario de registro en React.
En el siguiente paso, agregaremos estilo a nuestra aplicación de interfaz de usuario de inicio de sesión de React para hacerla hermosa. Ir a src/index.css archivo y agregue el siguiente código.
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800');
* {
tamaño de caja: cuadro de borde;
}
cuerpo {
Antecedentes: #1C8EF9! Importante;
altura mínima: 100vh;
pantalla: flexible;
peso de fuente: 400;
familia de fuentes: 'Fira Sans', sans-serif;
}
h1,h2,h3,h4,h5,h6,etiqueta,intervalo {
peso de fuente: 500;
familia de fuentes: 'Fira Sans', sans-serif;
}
cuerpo, html, .App, #root, .auth-wrapper {
ancho: 100%;
altura: 100%;
}
.navbar-luz {
color de fondo: #ffffff;
sombra de cuadro: 0px 14px 80px rgba (34, 35, 58, 0.2);
}
.auth-wrapper {
pantalla: flexible;
justificar-contenido: centro;
dirección flexible: columna;
alineación de texto: izquierda;
}
.auth-interior {
ancho: 450 px;
margen: automático;
fondo: #ffffff;
sombra de cuadro: 0px 14px 80px rgba (34, 35, 58, 0.2);
relleno: 40px 55px 45px 55px;
radio del borde: 15px;
transición: todos los .3;
}
.auth-wrapper .form-control:enfoque {
color del borde: #167bff;
sombra de cuadro: ninguna;
}
.auth-wrapper h3 {
alineación de texto: centro;
margen: 0;
altura de línea: 1;
fondo de relleno: 20px;
}
.etiqueta-de-control-personalizada {
peso de fuente: 400;
}
.Has olvidado tu contraseña,
.olvidé mi contraseña a {
alineación de texto: derecha;
tamaño de fuente: 13px;
relleno superior: 10px;
color: #7f7d7d;
margen: 0;
}
.olvidé mi contraseña a {
color: #167bff;
}
Tienes que iniciar la aplicación React usando el comando dado:
inicio de npm
Finalmente, hemos creado la plantilla de interfaz de usuario de inicio de sesión y registro de React utilizando el marco de interfaz de usuario Bootstrap.