Spanish (Español) translation by Valentino (you can also view the original English article)
En esta serie de tutoriales, verás cómo comenzar a crear una aplicación de blogs usando React. A lo largo del curso de esta serie de tutoriales, te centrarás en cómo usar React para desarrollar la interfaz de usuario de la aplicación. Utilizarás Node.js para el lado del servidor de la aplicación.
En este tutorial, verás cómo implementar la interfaz de usuario y el back-end para el registro y el inicio de sesión del usuario.
Empezamos
Crea un directorio de proyecto llamado ReactNodeApp. Navega al directorio del proyecto e inicia el proyecto del nodo.
1 |
npm init |
Completa los detalles requeridos y deberías haber creado el archivo package.json. Así es como se ve:
1 |
{
|
2 |
"name": "react-node-app", |
3 |
"version": "1.0.0", |
4 |
"description": "", |
5 |
"main": "index.js", |
6 |
"scripts": { |
7 |
"test": "echo \"Error: no test specified\" && exit 1" |
8 |
},
|
9 |
"author": "roy", |
10 |
"license": "MIT" |
11 |
}
|
Utilizarás el marco expreso para servir tu aplicación. Instala express usando el siguiente comando:
1 |
npm install express --save |
Usando el marco expreso, creemos nuestra aplicación escuchando en una dirección de puerto. Dentro del directorio del proyecto, crea un archivo llamado app.js. Requiere el módulo express dentro de app.js y crea una aplicación. Establece la ruta estática de la aplicación donde puedes encontrar los archivos estáticos. Así es como se ve:
1 |
var express = require("express"); |
2 |
var path = require("path"); |
3 |
|
4 |
var app = express(); |
5 |
app.use(express.static(path.join(__dirname,"/html"))); |
Asigna un número de puerto para que la aplicación escuche en un puerto. Agrega el siguiente código para crear un servidor:
1 |
app.listen(7777,function(){ |
2 |
console.log("Started listening on port", 7777); |
3 |
})
|
Dentro del directorio del proyecto, crea una carpeta llamada html. Dentro de la carpeta html, crea un archivo llamado index.html. Agrega el siguiente código a index.html:
1 |
<html>
|
2 |
|
3 |
<head></head>
|
4 |
|
5 |
<body>
|
6 |
<div>
|
7 |
Hello World |
8 |
</div>
|
9 |
</body>
|
10 |
|
11 |
</html>
|
Guarda los cambios anteriores e inicia el servidor con el siguiente comando:
1 |
node app.js |
Apunta tu navegador a http: // localhost: 7777 / index.html y deberías poder ver la página index.html.
Creación de la vista de inicio de sesión
Utilizarás bootstrap para crear la interfaz de usuario. Descarga e incluye bootstrap en la página index.html.
1 |
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
Agrega las bibliotecas React requeridas en la página index.html.
1 |
<script src="https://fb.me/react-15.1.0.js"></script> |
2 |
<script src="https://fb.me/react-dom-15.1.0.js"></script> |
Crearás la vista usando JSX. Si no estás familiarizado con JSX, te recomendaría leer un tutorial introductorio sobre React y JSX.
Para transformar el código JSX en JavaScript, necesitarás babel, un compilador de JavaScript. Incluye babel en la página index.html.
1 |
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> |
Crea un archivo llamado main.jsx dentro de la carpeta html. Este archivo contendrá los componentes de la interfaz de usuario de React.
Creemos un nuevo componente de React llamado Signin dentro del archivo main.jsx.
1 |
class Signin extends React.Component { |
2 |
|
3 |
}
|
Agrega un método de representación dentro del componente Signin que mostrará la interfaz de usuario de nuestro componente Signin.
1 |
class Signin extends React.Component { |
2 |
render() { |
3 |
return ( |
4 |
<form className="form-signin"> |
5 |
<h2 className="form-signin-heading"> Please sign in </h2> |
6 |
<label for="inputEmail" className="sr-only"> Email address |
7 |
</label> |
8 |
<input type="email" id="inputEmail" className="form-control" placeholder="Email address" required autofocus /> |
9 |
<label for="inputPassword" className="sr-only"> Password</label> |
10 |
<input type="password" id="inputPassword" className="form-control" placeholder="Password" required /> |
11 |
<button className="btn btn-lg btn-primary btn-block" type="button"> Sign in |
12 |
</button> |
13 |
</form> |
14 |
)
|
15 |
}
|
16 |
}
|
En el código anterior, todo es HTML con una sola diferencia. El atributo de clase se ha modificado a className cuando se usa en JSX.
El componente Signin, cuando se muestra, mostrará el código HTML dentro del método de representación.
Agrega un div contenedor en la página index.html donde renderizarás el componente Signin.
1 |
<div id="app" class="container"> |
2 |
</div>
|
Renderica el componente Signin dentro del .container div en index.html.
1 |
ReactDOM.render( < |
2 |
Signin / > , |
3 |
document.getElementById('app') |
4 |
);
|
Guarda los cambios anteriores y reinicia el servidor de nodo. Apunta tu navegador a http: // localhost: 7777 / index.html y deberías poder ver la pantalla de inicio de sesión.
Implementación del inicio de sesión de usuario
Para implementar el proceso de inicio de sesión, debes manejar el evento onChange de texto de entrada y mantener los valores del cuadro de texto en una variable de estado. Cuando el usuario hace clic en el botón, utilizarás 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, agreguemos el evento onChange a los cuadros de texto:
1 |
<label for="inputEmail" className="sr-only">Email address</label> |
2 |
<input type="email" onChange={this.handleEmailChange} id="inputEmail" className="form-control" placeholder="Email address" required autofocus /> |
3 |
<label for="inputPassword" className="sr-only">Password</label> |
4 |
<input type="password" onChange={this.handlePasswordChange} id="inputPassword" className="form-control" placeholder="Password" required /> |
Define los eventos onChange en el componente Signin:
1 |
handleEmailChange(e){ |
2 |
this.setState({email:e.target.value}) |
3 |
}
|
4 |
handlePasswordChange(e){ |
5 |
this.setState({password:e.target.value}) |
6 |
}
|
Vincula los eventos definidos anteriormente y las variables de estado en el método constructor del componente:
1 |
constructor(props) { |
2 |
super(props); |
3 |
this.handleEmailChange = this.handleEmailChange.bind(this); |
4 |
this.handlePasswordChange = this.handlePasswordChange.bind(this); |
5 |
this.state = { |
6 |
email:'', |
7 |
password:'' |
8 |
};
|
9 |
}
|
Define un método onClick que invocarás al hacer clic en el botón.
1 |
signIn(){ |
2 |
alert('Email address is ' + this.state.email + ' Password is ' + this.state.password); |
3 |
}
|
Agrega el evento OnClick al botón Iniciar sesión.
1 |
<button className="btn btn-lg btn-primary btn-block" onClick={this.signIn} type="button">Sign in</button> |
Guarda los cambios anteriores y reinicia el servidor de nodo. Apunta tu navegador a http: // localhost: 7777 / index.html. Ingresa la dirección de correo electrónico y la contraseña y haz clic en el botón Iniciar sesión, y deberías poder ver aparecer el correo electrónico y la contraseña.
Publicar datos de React al servicio de nodo
Una vez que tengas los datos en el lado del cliente, debes publicar esos datos en el método del servidor Node.js para validar el inicio de sesión del usuario. Para publicar los datos, utilizarás otro script llamado axios. Axios es un cliente HTTP basado en promesas para el navegador y Node.js. Incluya axios en la página index.html.
1 |
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> |
Dentro del método de inicio de sesión en el archivo main.jsx, agrega la siguiente línea de código para realizar una solicitud de publicación.
1 |
axios.post('/signin', { |
2 |
email: this.state.email, |
3 |
password: this.state.password |
4 |
})
|
5 |
.then(function (response) { |
6 |
console.log(response); |
7 |
})
|
8 |
.catch(function (error) { |
9 |
console.log(error); |
10 |
});
|
El código realiza una solicitud de publicación al método / signin con los parámetros que se muestran. Una vez que la solicitud es exitosa, la promesa se resuelve en la devolución de llamada. En caso de error, la respuesta se registra en la devolución de llamada de captura.
Creemos un método de inicio de sesión en el lado de Node.js para validar el proceso de inicio de sesión del usuario. En el archivo app.js, crea un método llamado signin.
1 |
app.post('/signin', function (req, res) { |
2 |
|
3 |
})
|
Utilizarás el módulo body-parser para analizar la solicitud publicada desde el lado del cliente de React. Instala el módulo body-parser en el proyecto.
1 |
npm install body-parser --save |
Requiere el módulo body-parser en el archivo app.js.
1 |
var bodyParser = require("body-parser"); |
Agrega la siguiente línea de código para habilitar el análisis JSON.
1 |
app.use(bodyParser.json()); |
Dentro del método de inicio de sesión, puedes analizar la solicitud como se muestra:
1 |
var user_name=req.body.email; |
2 |
var password=req.body.password; |
Modifica el método de inicio de sesión como se muestra para validar el inicio de sesión del usuario.
1 |
app.post('/signin', function (req, res) { |
2 |
var user_name=req.body.email; |
3 |
var password=req.body.password; |
4 |
if(user_name=='admin' && password=='admin'){ |
5 |
res.send('success'); |
6 |
}
|
7 |
else{ |
8 |
res.send('Failure'); |
9 |
}
|
10 |
})
|
Por el momento, las credenciales de usuario se han codificado de forma rígida. Puedes reemplazarlo con el servicio adecuado según tus preferencias.
Una vez que se han analizado los parámetros, se validan con las credenciales esperadas. Si es verdadero, se pasa un mensaje de éxito, de lo contrario se devuelve un mensaje de error.
Guarda los cambios anteriores y reinicia el servidor Node.js. Ingresa un nombre de usuario y contraseña válidos y haz clic en el método de inicio de sesión. Según las credenciales, devolverá un mensaje de éxito o error, que se mostrará en la consola del navegador.
Creación de la vista de registro de usuario
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. Comencemos creando el componente Signup en el archivo main.jsx.
1 |
class Signup extends React.Component{ |
2 |
render() { |
3 |
return ( |
4 |
<div> |
5 |
<form className="form-signin"> |
6 |
<h2 className="form-signin-heading">Please sign up</h2> |
7 |
<label for="inputName" className="sr-only">Name</label> |
8 |
<input type="name" onChange={this.handleNameChange} id="inputName" className="form-control" placeholder="Name" required autofocus /> |
9 |
<label for="inputEmail" className="sr-only">Email address</label> |
10 |
<input type="email" onChange={this.handleEmailChange} id="inputEmail" className="form-control" placeholder="Email address" required autofocus /> |
11 |
<label for="inputPassword" className="sr-only">Password</label> |
12 |
<input type="password" onChange={this.handlePasswordChange} id="inputPassword" className="form-control" placeholder="Password" required /> |
13 |
|
14 |
<button className="btn btn-lg btn-primary btn-block" onClick={this.signUp} type="button">Sign up</button> |
15 |
</form> |
16 |
</div> |
17 |
|
18 |
)
|
19 |
}
|
20 |
}
|
Dado que el registro y el inicio de sesión son dos componentes diferentes, debes vincular los dos componentes. Para el enrutamiento, utilizarás react-router. Si eres nuevo en el enrutamiento en React, te recomendaría leer el tutorial de enrutamiento de React.
Incluye react-router en la página index.html.
1 |
<script src="https://npmcdn.com/react-router@3.0.2/umd/ReactRouter.min.js"></script> |
Define las variables de enrutador de reacción necesarias para crear enlaces en el archivo main.jsx.
1 |
var Router = window.ReactRouter.Router; |
2 |
var Route = window.ReactRouter.Route; |
3 |
var hashHistory = window.ReactRouter.hashHistory; |
4 |
var Link = window.ReactRouter.Link; |
Define las diferentes rutas de la aplicación y la ruta predeterminada como se muestra a continuación:
1 |
ReactDOM.render( |
2 |
<Router history={hashHistory}> |
3 |
<Route component={Signin} path="/"></Route> |
4 |
<Route component={Signup} path="/signup"></Route> |
5 |
</Router>, |
6 |
document.getElementById('app')); |
Incluye un enlace al componente de inicio de sesión en el componente de registro y viceversa. Aquí está el método de renderización del componente Signin con el enlace de registro:
1 |
render() { |
2 |
return ( |
3 |
<div> |
4 |
<form className="form-signin"> |
5 |
<h2 className="form-signin-heading">Please sign in</h2> |
6 |
<label for="inputEmail" className="sr-only">Email address</label> |
7 |
<input type="email" onChange={this.handleEmailChange} id="inputEmail" className="form-control" placeholder="Email address" required autofocus /> |
8 |
<label for="inputPassword" className="sr-only">Password</label> |
9 |
<input type="password" onChange={this.handlePasswordChange} id="inputPassword" className="form-control" placeholder="Password" required /> |
10 |
|
11 |
<button className="btn btn-lg btn-primary btn-block" onClick={this.signIn} type="button">Sign in</button> |
12 |
</form> |
13 |
<div> |
14 |
<Link to="/signup">{'Signup'}</Link> |
15 |
</div> |
16 |
</div> |
17 |
|
18 |
)
|
19 |
}
|
Guarda los cambios anteriores y reinicia el servidor Node.js. Apunta tu navegador a http: // localhost: 7777 / index.html y deberías poder ver la pantalla de inicio de sesión con el enlace de registro. Haz clic en el enlace de registro y deberías navegar a la pantalla de registro.
Implementar el registro de usuario es similar a cómo implementó el inicio de sesión de usuario. Dejaré la implementación del registro de usuario como un ejercicio. Publicaré la implementación del registro de usuario en la siguiente parte de esta serie de tutoriales.
Envolviendolo
En esta parte de la serie de tutoriales, creaste e implementaste la pantalla Iniciar sesión. También viste cómo usar react-router para implementar el enrutamiento en React. En la siguiente parte de este tutorial, verás cómo implementar la parte Registrarte y la página Agregar publicación.
El código fuente de este tutorial está disponible en GitHub.
Haznos saber tus pensamientos y sugerencias en los comentarios a continuación.
By
