Conceptos básicos de JSX y ReactJS

Clase 12 de 33 • Curso Profesional de React.js 2017

Hector Jose Flores Colmenarez

student•

ReactJS es una librería Frontend desarrollada para el manejo de vistas de una aplicación, carece de controlador por lo cual es recomendable usar algun tipo de framework frontend para trabajar en conjunto con React.

JSX es un pseudo lenguaje utilizado por ReactJS el cual nos permite definir nuestros componentes con una sintaxis parecida a Javascript, pero JSX fue deprecada por FB, esto no quiere decir que no pueda ser utilizada mas, pero se recomienda usar un pre-compilador basado en nodejs en ambiente de producción.

Las ventajas mas relevantes de usar ReactJS es Mayor velocidad ya que React trabaja con algo llamado VirtualDOM el cual mantiene el memoria el arbol de elementos de nuestra vista actualmente renderizada permitiendo asi que cuando ocurra una interacción solamente actualizar los componentes que se requieran. También mejora la UXde nuestros sitios web al ser manipulado el DOM en tiempo real ni la necesidad de recargar el sitio.

Vicente

student•

Algo no me queda claro cuando se incide tanto en que ReactJS es muy rápido porque mantiene un VirtualDom en memoria. Pero, ¿no mantiene el navegador también el DOM en memoria cuando renderiza cualquier HTML?. Cuando interactuamos con el DOM directamente desde javascript, ¿no lo hacemos tambiém en memoria? Entiendo la diferencia entre repintar todo el DOM o solo lo que ha cambiado pero creo que en ambos casos el DOM debe estar cargado en memoria.

Jose A. Chavarria

student•

jsx es el DOM Virtual que copia todos los cambios a DOM real. Únicamente lo que requiere ser actualizado cierto..?

Boris Junior Matos Morillo

student•

No exactamente, JSX es solo un transformador, es lo que se conoce como "syntax sugar" para los métodos que React usa para crear el Virtual DOM, por ejemplo:

Nota el jsx usado en el método render de este componente

var HelloMessage = React.createClass({  
  render: function() {  
    return <div>Hello {this.props.name}</div>;  
  }  
});

al final es transformado a

var HelloMessage = React.createClass({displayName: "HelloMessage",  
  render: function() {  
    return React.createElement("div", null, "Hello ", this.props.name);  
  }  
});

el metodo React.createElement entre otros más son las funciones de React que al final terminar creando el Virtual DOM, que es lo que al final se usa para calcular las diferencias entre los estados y poder actualizar el DOM real correctamente.

Francisco Eris

student•

Es más usable JSX por su simplesa, nos ayuda más en estructurar la componente.

Carlos Garcia Castellanos

student•

Segun entendi en el articulo, el JSX es como un javascript de React con el cual se modela HTML y es necesario usar node como un precompliador ?

Pablo Rodríguez Pérez

student•

No exactamente. Con jsx puedes escribir html en tus js de forma que despues de compilados con el propio jsx van a quedar como javascript puro para el manejo del dom.

Por ejemplo: si tienes en tus js una vista que devuelve return <p>Hola</p> jsx se va a encargar de cambiar eso por algo como document.createElement('p'); y meterle dentro el "Hola".

Nota: Realmente no usa document.createElement sino funciones propias de ReactJS pero lo puse asi para que se me entienda.

Espero haberte aclarado el tema :)

Stefany Zapata Naranjo

student•

Para el caso de maquetadores web, a la hora de uitilizar frameworks de maquetación css
como podríamos ahí en ese caso aplicar para el proyecto react.js?

Edi Camas

student•

En ese caso, puedes trabajar con las className y definirle las propiedades de tu framework.
Por ejemplo, si usas bootstrap:

class InputTextData extends React.Component {        
 render(){  
          return <input type="text" className="form-control"/>  
 }  
}

No es un ejemplo de funcionalidad como tal, pero podrías por ejemplo crear un componente badge de bootstrap, y cambiar el valor según interacción con el servidor.
Espero haberte podido ayudar.

Christian Armando Consuelo Mayén

student•

JSX es un sublenguaje de que se encarga de combinar lógica de Javascript con maquetación de HTML. También puedes definir estilos en CSS inline, que al parecer no es TAN mala práctica que buscas que tus componentes sean reusables.

Cesar Anton

student•

En este caso, es mejor encapsular componentes usando Web Components (Google Polymer), entiéndase como componente algo como un chat, que viene siendo una aplicación completa de ReactJS con varios elementos.
WebComponents se encarga de encapsular el CSS junto con el JSX y lo expone del mismo modo que lo haría ReactJS (como un <elemento>) y se comunica del mismo modo (con propiedades).
Una ventaja de hacer esto, es que Web Components evita el 'Bleed out' del CSS de un elemento. Por lo que se vale que varios componentes tengan clases con el mismo nombre, pues cada una se ejecuta solo en el contexto del Web Component que lo ejecuta. Esto simplifica mucho el CSS y las políticas para los nombres de las partes de un componente se pueden reciclar.