Luis Alexander Aldazabal Gil

code – Demo Panel comentarios Parte I – React JS

Solucion demo panel de comentarios

Introducción

La idea de esta serie de artículos es desarrollar  un panel de comentarios usando: ReactJs, SignalR, Aspnet Mvc, MongoDb y Azure Service Bus, para muchos pueden ser cosas nuevas para otros no, el objetivo es aprender como todas estas tecnologías pueden trabajar de la mano. Todo esto nació luego de revisar el Tutorial de ReactJs.Net el cual me aprecio muy bueno pero sentía que se podían agregar más funcionalidades. El panel de comentarios esta compuesto por un formulario para agregar nuevos comentarios y una lista para ver los comentarios de todos los usuarios.

Demo Panel de comentarios

Por detrás este panel de comentarios está construido de la siguiente forma: el browser envía un post a la controladora, esta deja el mensaje en el Bus de mensajería, el mensaje se procesa asíncronamente, los resultados se almacenan en la base de datos y este nuevo comentario se envía a todos los usuarios que están conectados.

Solucion Panel de comentarios

NOTA: Esta serie de artículos no trata de indagar en el detalle de cada cosa, mi objetivo es mostrar la integración de todas estas tecnologías, si quieren más información pueden ir a los sitios de cada uno de ellos para buscar el detalle que necesitan.

Tecnología

  • Visual Studi 2015
  • React JS
  • C#
  • Asp. Net MVC
  • SignalR
  • MongoDb
  • Azure Service Bus

Presentación

Configuración del proyecto

Antes de empezar es recomendable instalar esta extensión para el soporte de archivos JSX en Visual Studio: https://visualstudiogallery.msdn.microsoft.com/d65d6b29-6dd7-4100-81b1-609e5afce356

Creamos un proyecto del Tipo ASP.NET Application, seleccionar la plantilla Empty y agregar la referencia de MVC.

Plantilla MVC

Vamos al Administrador de paquetes de Nuget y agregamos la referencia de los paquetes  System.Web.Optimization.React, React.Web.Mvc4,  JQuery y Bootstrap al proyecto web.

Referencia ReactJs Web Optmization Fx

Desarrollo UI con React JS

React JS es una librería de javascript desarrollada por Facebook para construir interfaces de usuario, para más información pueden leer la documentación oficial en este enlace. React JS nos permite crear componentes que pueden ser reutilizados y permiten formar otros componentes; además, tiene un gran rendimiento por el manejo del Virtual DOM. Teniendo en cuenta esto nuestro panel de comentarios estará compuesto de 4 componentes:

  • RegistroComentario: Envía los nuevos comentarios al servidor
  • DetalleComentario: Muestra el detalle de un comentario.
  • ListaComentario: Muestra todos los comentarios que han sido grabados y está compuesto por el control DetalleComentario.
  • PanelComentario: Está compuesto por el control FormComentario y ListaComentario.

Composicion Panel comentarios

RegistroComentario.jsx

Para empezar a registrar comentarios se necesita desarrollar un componente que nos permita enviar estos datos al servidor de la siguiente forma:

Registro Comentario JSX

En la carpeta Scripts agregamos una carpeta llamada App y dentro un archivo llamado RegistroComentario.jsx con el siguiente código:

"use strict";
var RegistroComentario = React.createClass({
    submitComentario: function (e) {
        console.log("It woks!!!!!!!");
        e.preventDefault();
    },
    render: function () {
        return (
<form className="form-inline" onSubmit={this.submitComentario}>
<div className="form-group">
<input type="text" className="form-control" placeholder="Alias" ref="autor" /></div>
<div className="form-group">
<input type="text" className="form-control" placeholder="Comenta algo..." ref="texto" /></div>
<input type="submit" value="Enviar" className="btn btn-primary" />
            </form>

        );
    }
});

Ahora creamos una clase controladora llamada PanelController y agregamos el siguiente código:

public class PanelController : Controller
{
    // GET: Panel
    public ActionResult Index()
    {
        return View();
    }
}

Agregamos la vista Index con el siguiente contenido:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    	<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css">
    <title>Panel de comentarios</title>
</head>
<body>
<div id="contenido"></div>
<script src="~/scripts/jquery-2.2.0.js"></script>
    <script src="https://fb.me/react-0.14.0.js"></script>
    <script src="https://fb.me/react-dom-0.14.0.js"></script>
    <script src="~/scripts/App/RegistroComentario.jsx"></script>
    <script src="~/scripts/App/Main.jsx"></script>
</body>
</html>

Finalmente agregamos el archivo Main.jsx que será el encargado de mostrar el componente en pantalla.

"use strict";
ReactDOM.render(<RegistroComentario />,
document.getElementById("contenido"));

Ahora para ver que todo esté bien compilamos la solución, presionamos f5 y navegamos a la url Panel/Index luego de hacer clic en el botón Enviar debemos ver en la consola del navegador el mensaje It works!!!. Prueba registro comentario

DetalleComentario.jsx

Para ver cada comentario se necesita desarrollar un componente que nos permita visualizar el detalle de cada uno de la siguiente forma: Detalle comentario JSX En la carpeta Scripts agregamos un archivo llamado DetalleComentario.jsx con el siguiente código:

"use strict";
var DetalleComentario = React.createClass({
    render: function () {
        return (
	<a href="#" className="list-group-item">

<h4 className="list-group-item-heading">{this.props.autor}</h4>

<span className="list-group-item-text"                        
dangerouslySetInnerHTML={{__html:this.props.children.toString()}} />
	</a>
        );
    }
});

Vamos a la vista Index y agregamos la referencia al nuevo archivo:

<script src="~/scripts/App/DetalleComentario.jsx"></script>

Finalmente abrimos el archivo Main.jsx y reemplazamos su contenido por el siguiente:

"use strict";
ReactDOM.render(
<DetalleComentario autor="berczeck">Primer comentario</DetalleComentario>
, document.getElementById("contenido"));

Ahora para ver que todo esté bien compilamos la solución, presionamos f5 y navegamos a la url Panel/Index y debemos ver un comentario en pantalla.

Prueba detalle comentario

ListaComentario.jsx

Para ver todos los comentarios se necesita desarrollar un componente que nos permita listar cada uno de los comentario de la siguiente forma:

ListaComentario JSX

En la carpeta Scripts agregamos un archivo llamado ListaComentario.jsx con el siguiente código:

"use strict"
var ListaComentario = React.createClass({
    render : function (){
        var comentarios = this.props.comentarios.map(function(comentario){
            return <DetalleComentario key={comentario.Identificador}                              autor={comentario.Autor}                              fechaHora={comentario.FechaHora }>{comentario.Texto}
                   </DetalleComentario>
        }
        );
        return (
<div className="list-group">
                {comentarios}</div>
);
    }
}
);

Vamos a la vista Index y agregamos la referencia al nuevo archivo:

<script src="~/scripts/App/ListaComentario.jsx"></script>

Abrimos el archivo Main.jsx y reemplazamos su contenido por el siguiente:

"use strict";
var data = [
  {
      Autor: "Scrumcito", Texto: "Apliquemos scrum a todo",
      FechaHora: "11/11/2011 11:11:11", Identificador: "4321"
  },
  {
      Autor: "ArquitectoPpt", Texto: "Todo esta en la ppt",
      FechaHora: "12/12/2012 12:12:12", Identificador: "1234"
  }
];
ReactDOM.render(
<ListaComentario comentarios={data} />
, document.getElementById("contenido"));

Ahora para ver que todo esté bien compilamos la solución, presionamos f5 y navegamos a la url Panel/Index y debemos ver una lista de comentarios en pantalla. Prueba lista comentario

PanelComentario.jsx

Para ver el panel de comentarios se necesita desarrollar un componente que nos permita unir todos los componentes previamente desarrollados de la siguiente forma: Demo Panel de comentarios En la carpeta Scripts agregamos un archivo llamado PanelComentario.jsx con el siguiente código:

"use strict"
var PanelComentario = React.createClass({
    render: function () {
        return (


<div className="panelComentarios">


<h1>Panel de comentarios</h1>


<RegistroComentario />
<ListaComentario comentarios={this.props.data}/></div>


);
    }
});

Vamos a la vista Index y agregamos la referencia al nuevo archivo:

<script src="~/scripts/App/PanelComentario.jsx"></script>

Abrimos el archivo Main.jsx y reemplazamos su contenido por el siguiente:

"use strict";

var data = [
  {
      Autor: "Scrumcito", Texto: "Apliquemos scrum a todo",
      FechaHora: "11/11/2011 11:11:11", Identificador: "4321"
  },
  {
      Autor: "ArquitectoPpt", Texto: "Todo esta en la ppt",
      FechaHora: "12/12/2012 12:12:12", Identificador: "1234"
  }
];

ReactDOM.render(
<PanelComentario data={data} />
, document.getElementById("contenido"));

Ahora para ver que todo esté bien compilamos la solución, presionamos f5 y navegamos a la url Panel/Index y debemos ver el panel de comentarios en pantalla.

El código puede ser descargado desde este enlace.

Referencias:
Metal Tip:

Este artículo lo escribí escuchando la canción Demoledor de la banda M.A.S.A.C.R.E de mi país Perú, les comparto el enlace.

Happy coding and Stay Heavy lml

Publicado en Sin categoría, Sistemas distribuidos, webEtiquetado como , , , , , , Deja un comentario

Deja un comentario