react js (1): entorno de trabajo

Primera entrada de un tutorial dedicado a React con un inevitable hola mundo.

Keith Haring

archivado en: JavaScript / 12 julio, 2015 / taller:

update 3/10/2016

Ahora es mucho más fácil levantar un entorno en react con un starter kit denominado create-react. Lo instalamos:

npm install -g create-react-app

Y ya solo tenemos que crear la aplicación:

create-react-app miAplicacion

react js es un framework javaScript muy interesante especializado en el trabajo del DOM. Es más ligero y fácil de aprender que angular, ember, meteor y demás framemamuts de javaScript y es una opción muy recomendable cuando el peso de nuestra aplicación recae en la vista.

En la línea que está abriendo polymer, incorpora dos conceptos clave del desarrollo js a medio plazo: los componentes reutilizables y una especie shadow dom, un dom virtual que permite trabajar con las piezas aisladas.

El core está escrito en ecma 5, por lo que se necesitan aplicar algunos pollyfils si el proyecto todavía debe funcionar para versiones antiguas de la tostadora del explorer (de la 9, incluida, para abajo).

En producción, necesitaremos bajarnos el kit de inicio y, como veremos, el pack de herramientas react, lo cual podemos hacer con npm:

npm install -g react-tools

Además, es recomendable instalarse la extensión React Developer Tools de chrome para debuguear.

Y ya con todo el entorno preparado, al lío ^^.

Hola mundo

React se puede trabajar con javaScript normal, pero para que el código quede más compacto permite utilizar jsx, que es una especie de javascript con xml que debemos compilar, ya sea en tiempo real durante la ejecución en cliente -algo desaconsejable fuera de un escenario de aprendizaje- o cuando vayamos a subir el material final.

En el primer caso, además de la librería react.js, tenemos que incluir el archivo JSXTransformer, que es el encargado de compilar el código jsx. Así, por ejemplo, podríamos hacer un primer Hola mundo en reactesiano.

<!DOCTYPE html>

<html>

<head>

<script src="build/react.js"></script>

<script src="build/JSXTransformer.js"></script>

</head>

<body>

<div id="miContenedor"></div>

<script type="text/jsx">

React.render(

<h1>Hola Mundo!</h1>,

document.getElementById('miContenedor')

);

</script>

</body>

</html>

La segunda manera, como decía, es compilando los archivos jsx previamente. Para eso, lo más cómodo es usar el comando jsx --watch con dos parámetros: en el primero el directorio donde se encuentran los archivos a compilar y en el segundo dónde se guardarán ya compilados. De esta manera, cada vez que guardamos el archivo con el código jsx, de forma automática se genera su pareja js. Por ejemplo, el código jsx de antes podemos sacarlo de ahí y guardarlo en un directorio llamado scripts (o src o como sea) en un archivo específico que vamos a llamar uno.js, que quedaría así:

// scripts/uno.js

React.render(

<h1>Hola mundo!</h1>,

document.getElementById('miContenedor')

);

De tal manera que en el index.html solo nos quedaría esto, sin el JSXTransformer, y con el enlace al archivo compilado (en el directorio build o donde sea), que aún no existe.

// index.html

<!DOCTYPE html>

<html>

<head>

<script src="build/react.js"></script>

</head>

<body>

<div id="miContenedor"></div>

<script src="build/uno.js"></script>

</body>

</html>

Nos vamos por consola hasta el directorio raíz y activamos el watch (fijaos en los espacios):

jsx --watch scripts/ build/

Los archivos watcheados se muestran en la consola y en el directorio build se crea el archivo compilado, que tendrá en nuestro caso un código parecido a este.

// build/uno.js

React.render(

React.createElement("h1", null, "Hola mundo!"),

document.getElementById('miContenedor')

);

Bueno, pues esperando que esté claro esto, de momento lo dejo aquí.

|| Tags: , ,

valoración de los lectores sobre react js (1): entorno de trabajo

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 3.5 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario


*