Herramientas ReactJS

Si en la primera entrada sobre React hablamos de qué es, y en la segunda vimos cómo realizar los primeros componentes, ahora profundizamos en conocer más. Lo primero, conocer distintas herramientas ReactJS que hay, y después, conocer mejor JSXTransformer.

Tanto si trabajamos por Firefox como en Chrome, existen herramientas que facilitan la depuración de código React. La oficial está en GitHub aquí https://github.com/facebook/react-devtools:

react reveloper tools for Firefox

Y para Chrome:

react reveloper tools for Chrome

Y vamos a cargar el último ejemplo realizado, first4.htm, para ver las herramientas de depuración en acción:

React Tools

En definitiva, que disponemos también de herramientas que nos facilitarán la depuración de componentes.

JSXTransformer.js

En el primer código, y en los creados hasta ahora, ha sido necesario la inclusión de la librería JSXTransformer.js, cuyo cometido es compilar el código JSX a código React. La librería se incluye para que esta transformación se haga directamente en el navegador. Esta forma de proceder es interesante cuando estamos en desarrollo, porque en producción es más lógico tener el código precompilado previamente.

Es opcional incluir

/** @jsx React.DOM */

al principio de código JSX para que el compilador lo sepa.

Una forma de hacer la compilación es mediante el uso de gulp usando gulp-react, en NodeJS (te puede interesar este artículo si necesitas configurar npm para trabajar con un proxy). Lo primero es instalar react-tools:

npm react-tools

Después, ponemos la instrucción jsx –watch input_dir/ output_dir/ para que vigile los directorios donde escribimos nuestro código jsx y automáticamente lo transforme a código js.

Probando JSX con el ejemplo

He creado una versión first6.html cuyo código es:


<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Manejando Datos</title>
</head>
<body>


<div id="content"></div>


</body>
</html>

Volvermos a ver que el archivo JSX es el mismo que el ejemplo 5:


var PrimerComponente = React.createClass({
render: function() {
return (

<div>

<h2>{this.props.mensaje} ... </h2>


<div>{this.props.children}</div>

</div>

);
}
});
ReactDOM.render(

<div>
<PrimerComponente mensaje="Manejando datos" >Aprendiendo React</PrimerComponente>
<PrimerComponente mensaje="ReactJS">Version 6 usando NodeJS!!</PrimerComponente>
</div>

, document.getElementById('content'));<span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span>

Procedemos a transformar el código JSX a JS mediante nodeJS:

nodeJS jsx

Y vemos que el código JSX se ha transformado en esto:


var PrimerComponente = React.createClass({displayName: "PrimerComponente",
render: function() {
return (
React.createElement("div", null,
React.createElement("h2", null, this.props.mensaje, " ... "),
React.createElement("div", null, this.props.children)
)
);
}
});
ReactDOM.render(
React.createElement("div", null,
React.createElement(PrimerComponente, {mensaje: "Manejando datos"}, "Aprendiendo React"),
React.createElement(PrimerComponente, {mensaje: "ReactJS"}, "Version 6 usando NodeJS!!")
)

, document.getElementById('content'));

Y funcionando:

first6 usando jsx

La diferencia entre la versión 5 de nuestro ejemplo y la 6 es que en la 5, el código JSX se compila en el navegador, mientras que en la 6, el código ya está previamente compilado.

Atributos class y for de React

Cuando creas componentes, es muy normal que intentes asignar clases. Sin embargo, la palabra class ya está reservada en Javascript (lo mismo aplica para for). En su lugar debes incluir className y htmlFor, de esta forma, se le indica a React qué debe compilar a atributos class y for de HTML (porque no olvides que estamos escribiendo Javascript o TypeScript).

Buen día!

Herramientas ReactJS