Share
En esta serie de tutoriales, verá cómo comenzar a crear una aplicación de blogging utilizando React. A lo largo del curso de esta serie de tutoriales, se centrará en cómo utilizar React para desarrollar la interfaz de usuario de la aplicación. Utilizará Node.js para el lado del servidor de la aplicación.
En este tutorial, verá cómo implementar la interfaz de usuario y el back-end para el registro y el inicio de sesión de usuarios..
Crear un directorio de proyecto llamado ReactNodeApp. Navegue al directorio del proyecto e inicie el proyecto del nodo.
npm init
Complete los detalles requeridos y usted debe tener la paquete.json archivo creado. Aquí está cómo se ve:
"name": "react-node-app", "version": "1.0.0", "description": "," main ":" index.js "," scripts ": " test ":" echo \ "Error: no hay prueba especificada \" && exit 1 "," autor ":" roy "," licencia ":" MIT "
Estarás usando el marco expreso para servir tu aplicación. Instale Express utilizando el siguiente comando:
npm install express --save
Usando el marco expreso, creemos nuestra aplicación escuchando en una dirección de puerto. Dentro del directorio del proyecto, cree un archivo llamado app.js. Requerir el módulo express dentro del app.js y crear una aplicación. Establezca la ruta estática de la aplicación donde pueda encontrar los archivos estáticos. Aquí está cómo se ve:
Accentsconagua
var express = require ("express"); var ruta = requiere ("ruta"); var app = express (); app.use (express.static (path.join (__ dirname, "/ html")));Asigne un número de puerto para que la aplicación escuche en un puerto. Agregue el siguiente código para crear un servidor:
app.listen (7777, function () console.log ("Comenzó a escuchar en el puerto", 7777);)Dentro del directorio del proyecto, cree una carpeta llamada html. Dentro de html carpeta, crea un archivo llamado index.html. Agregue el siguiente código a index.html:
Hola Mundo
Guarde los cambios anteriores e inicie el servidor con el siguiente comando:
nodo app.js
Dirija su navegador a http: // localhost: 7777 / index.html y debería poder ver el index.html página.
Estarás utilizando bootstrap para crear la interfaz de usuario. Descargar e incluir bootstrap en el index.html página.
Agregue las bibliotecas React requeridas en el index.html página.
Estarás creando la vista usando JSX. Si no está familiarizado con JSX, le recomiendo que lea un tutorial introductorio sobre React y JSX.
Para transformar el código JSX a JavaScript, necesitarás Babel, un compilador de JavaScript. Incluir babel en el index.html página.
Crear un archivo llamado main.jsx dentro de html carpeta. Este archivo contendrá los componentes React UI.
Vamos a crear un nuevo componente React llamado Registrarse dentro de main.jsx expediente.
clase Signin extiende React.Component
Agrega un método de render dentro de la Registrarse componente que mostrará la interfaz de usuario para nuestra Registrarse componente.
la clase Signin extiende React.Component render () return ()
En el código anterior, todo es HTML con una sola diferencia. los clase atributo ha sido modificado para nombre de la clase cuando se usa en JSX.
los Registrarse componente, cuando se muestra, mostrará el código HTML dentro de la hacer método.
Agrega un contenedor div en el index.html página donde renderizarás el Registrarse componente.
Renderizar Registrarse componente dentro del .envase div en el index.html.
ReactDOM.render ( < Signin / > , document.getElementById ('app'));Guarde los cambios anteriores y reinicie el servidor de nodo. Dirija su navegador a http: // localhost: 7777 / index.html y debería poder ver la pantalla de inicio de sesión.
Para implementar el proceso de inicio de sesión, debe manejar el texto de entrada onChange Evento y mantener los valores del cuadro de texto en una variable de estado. Cuando el usuario haga clic en el botón, utilizará las variables de estado para leer los valores del cuadro de texto de la dirección de correo electrónico y la contraseña. Entonces, vamos a añadir el onChange evento a los cuadros de texto:
Definir el onChange eventos en el Registrarse componente:
handleEmailChange (e) this.setState (email: e.target.value) handlePasswordChange (e) this.setState (password: e.target.value)
Enlazar los eventos definidos anteriormente y las variables de estado en el método del constructor de componentes:
constructor (props) super (props); this.handleEmailChange = this.handleEmailChange.bind (this); this.handlePasswordChange = this.handlePasswordChange.bind (this); this.state = email: ", contraseña:";
Definir un al hacer clic Método que invocarás al hacer clic en el botón..
signIn () alert ('La dirección de correo electrónico es' + this.state.email + 'La contraseña es' + this.state.password); Añade el Al hacer clic evento a la Registrarse botón.
Guarde los cambios anteriores y reinicie el servidor de nodo. Dirija su navegador a http: // localhost: 7777 / index.html. Introduzca la dirección de correo electrónico y la contraseña y haga clic en Registrarse y debería poder ver el mensaje emergente de correo electrónico y contraseña.
Una vez que tenga los datos en el lado del cliente, debe publicar esos datos en el método del servidor Node.js para validar el inicio de sesión del usuario. Para publicar los datos, harás uso de otro script llamado axios. Axios es un cliente HTTP basado en la promesa para el navegador y Node.js. Incluir axios en el index.html página.
Dentro de registrarse método en el main.jsx archivo, agregue la siguiente línea de código para hacer una solicitud de publicación.
axios.post ('/ signin', email: this.state.email, contraseña: this.state.password) .then (function (response) console.log (response);) .catch (function (error ) console.log (error););El código hace una solicitud posterior a la /registrarse Método con los parámetros mostrados. Una vez que la solicitud es exitosa, la promesa se resuelve en el entonces llamar de vuelta. En caso de error, la respuesta se registra en el captura llamar de vuelta.
Vamos a crear un registrarse Método en el lado Node.js para validar el proceso de inicio de sesión del usuario. En el app.js archivo, crea un método llamado registrarse.
app.post ('/ signin', function (req, res) )Estarás haciendo uso de la analizador corporal Módulo para analizar la solicitud publicada desde el lado del cliente React. Instala el analizador corporal módulo en el proyecto.
npm instalar body-parser --save
Requerir el analizador corporal módulo en el app.js expediente.
var bodyParser = require ("body-parser");Agregue la siguiente línea de código para habilitar JSON análisis.
app.use (bodyParser.json ());
Dentro de registrarse Método, puede analizar la solicitud como se muestra:
var user_name = req.body.email; var contraseña = req.body.password;
Modificar el registrarse Método como se muestra para validar el inicio de sesión del usuario..
app.post ('/ signin', function (req, res) var user_name = req.body.email; var password = req.body.password; if (user_name == 'admin' && password == 'admin') res.send ('éxito'); else res.send ('Failure');) Por el momento, las credenciales de usuario han sido codificadas. Puede reemplazarlo con el servicio apropiado según su preferencia.
Una vez que los parámetros se han analizado, se validan con las credenciales esperadas. Si es verdadero, se pasa un mensaje de éxito, de lo contrario se devuelve un mensaje de error.
Guarde los cambios anteriores y reinicie el servidor Node.js. Ingrese un nombre de usuario y contraseña válidos y haga clic en el método de inicio de sesión. Basado en las credenciales, devolverá un mensaje de éxito o falla, que se mostrará en la consola del navegador.
El proceso de creación de la vista de registro de usuario es bastante similar a cómo implementó el módulo de inicio de sesión de usuario. Empecemos por crear el Regístrate componente en el main.jsx expediente.
la clase Suscripción extiende React.Component render () return ()
Dado que el registro y el inicio de sesión son dos componentes diferentes, debe vincular los dos componentes. Con el propósito de enrutar, usted estará haciendo uso de enrutador de reacción. Si no está familiarizado con el enrutamiento en React, le recomendamos que lea el tutorial de enrutamiento de React..
Incluir enrutador de reacción en el index.html página.
Definir lo requerido. enrutador de reacción variables para crear enlaces en el main.jsx expediente.
var Router = window.ReactRouter.Router; var Route = window.ReactRouter.Route; var hashHistory = window.ReactRouter.hashHistory; var Link = window.ReactRouter.Link;
Defina las diferentes rutas de aplicación y la ruta predeterminada como se muestra a continuación:
ReactDOM.render (, document.getElementById ('app'));
Incluya un enlace al componente de inicio de sesión en el componente de registro y viceversa. Aquí está el Registrarse Método de renderización del componente con el enlace de registro:
render () return ()'Regístrate'
Guarde los cambios anteriores y reinicie el servidor Node.js. Dirija su navegador a http: // localhost: 7777 / index.html y debería poder ver la pantalla de inicio de sesión con el enlace de registro. Haga clic en el enlace de registro y debe navegar a la pantalla de registro.
La implementación del registro de usuarios es similar a la forma en que implementó el inicio de sesión de usuarios. Dejaré la implementación de registro de usuario como un ejercicio. Publicaré la implementación de registro de usuarios en la siguiente parte de esta serie de tutoriales..
En esta parte de la serie de tutoriales, creó e implementó la pantalla de inicio de sesión. También viste cómo usar enrutador de reacción Implementar enrutamiento en React. En la siguiente parte de este tutorial, verá cómo implementar la parte de registro y la página Agregar publicación.
El código fuente de este tutorial está disponible en GitHub.
Háganos saber sus pensamientos y sugerencias en los comentarios a continuación.
