logo

Encuentro con React.js:un extracto de 'React Quickly'

Este es un extracto de React Quickly (Manning, 2016). Puede descargar el primer capítulo completo de forma gratuita en Manning . El lanzamiento del libro está programado para el primer trimestre de 2016, pero MEAP ya está disponible. Usa el código “mardandz ” para obtener un 39 % de descuento.

Cada capítulo tiene un proyecto que se complementa con un screencast de video alojado en YouTube .

Capturas de pantalla de React Quickly

Proyecto:Menú con React.js

El proyecto de este artículo será mínimo. La idea es tener un menú generado dinámicamente que constará de etiquetas.

Usaremos el menú y el enlace de los componentes de React personalizados. La forma en que los creamos es similar a la forma en que creamos el componente HelloWorld en el ejemplo anterior. El proyecto le mostrará cómo representar elementos anidados mediante programación. En los ejemplos anteriores, simplemente codificamos a los niños manualmente. Usaremos la función map() para ello.

En primer lugar, debe obtener el archivo React. Usemos la versión no minificada por ahora. La versión no minificada o de desarrollo no tendrá .min en el nombre.

La diferencia es que en la versión no minimizada recibirás advertencias útiles junto con el código React en formato humano en caso de que quieras echarle un vistazo. Por otro lado, en la versión minificada se suprimen las advertencias y errores, y se minimiza y optimiza el código.

Si aún no ha descargado React, hágalo ahora. Recuerda que estamos usando la versión 0.14.2. Cualquier otra versión no está probada con nuestros ejemplos, así que utilícela bajo su propio riesgo (no recomendado).

Si no tiene Node.js y npm instalados, ahora es un buen momento para incorporarse. "¡Pero React es una biblioteca front-end!" podrías decir y acertarás. React funcionará bien sin servidores y Node.js. Por esta razón, siéntase libre de omitir este paso. Sin embargo, no se recomienda no tener Node.js y npm porque hoy en día, la mayoría de los desarrolladores web que conozco no pueden vivir sin usar Node.js para las herramientas de las aplicaciones front-end. Las herramientas de nodo se han vuelto omnipresentes. Además, npm tiene muchos módulos frontales.

Así que no seas perezoso. Si desea mantenerse a la vanguardia, use Node.js y npm.

Espero que haya sido divertido y que seas amigo de Node.js. Volvamos al Menú Reaccionar.

HTML es muy básico. Incluye los archivos react.js y react-dom.js que, por simplicidad, se encuentran en la misma carpeta que el archivo HTML. Por supuesto, más adelante querrá tener sus archivos *.js en alguna otra carpeta como js o src:

<!DOCTYPE html>
<html>
  <head>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
  </head>

El cuerpo tiene sólo dos elementos. Uno es un div con menú ID. Ahí es donde se representará nuestro menú. Otra es una etiqueta de secuencia de comandos con nuestro código de aplicación React:

  <body>
    <div id="menu"></div>
    <script src="script.js"></script>
  </body>
</html>

El script.js es nuestro archivo de aplicación principal y se ve así:

var Menu = React.createClass({...}})
var Link = React.createClass({...})
ReactDOM.render(
  React.createElement(
    Menu,
    null
  ),
  document.getElementById('menu')
)

Básicamente, tenemos el menú del componente principal. Para crear es, usamos React.createClass():

[Nota al margen]

Leer publicaciones de blog es bueno, pero ver cursos en video es aún mejor porque son más atractivos.

Muchos desarrolladores se quejaron de la falta de material de video de calidad asequible en Node. Es una distracción ver videos de YouTube y una locura pagar $ 500 por un curso de video de Node.

Visite Node University, que tiene cursos de video GRATUITOS en Node:node.university.

[Fin de la nota al margen]

var Menu = React.createClass({

El componente Menú representará los elementos de menú individuales que son etiquetas de enlace. Antes de que podamos renderizarlos, definamos los elementos del menú. Los elementos del menú están codificados en la matriz de menús de esta manera (puede obtenerlos del modelo y/o del servidor en un escenario más complejo):

  render: function(){
    var menus = [
      'Home',
      'About',
      'Services',
      'Portfolio',
      'Contact us'
    ]

Usaremos una función map() de la interfaz Array para producir cuatro componentes Link. No olvidemos que el método render debe devolver un solo elemento. Por esta razón, tenemos

para envolver nuestros enlaces.

    return React.createElement('div',
      null,

La función map() devuelve una matriz donde cada elemento es el resultado de la expresión React.createElement(Link, {label:v}) envuelto en

:

     menus.map(function(v,i){
        return React.createElement('div',

El

tiene un atributo clave que es importante. Permite que React optimice la representación de listas convirtiéndolas en hashes (el tiempo de acceso para hashes es mejor que para listas/matrices). Básicamente, creamos un montón de componentes de enlace en una matriz y cada uno de ellos toma una etiqueta de apoyo con un valor de la matriz de menús:

          {key: i},
          React.createElement(Link, {label: v})
        )
      })
    )
}})

En el render del componente Link, escribimos la expresión para crear una URL. Esa URL se usará en el atributo href de la etiqueta . El valor this.props.label se pasa desde el cierre del mapa en la función de representación del menú:return React.createElement(Link, {label:v}).

var Link = React.createClass({ 
  render: function () {
    var
      + this.props.label
        .toLowerCase()
        .trim()
        .replace(' ', '-')

Los métodos toLowerCase(), trim() y replace() son funciones de cadena estándar de JavaScript. Realizan conversión a minúsculas, recorte de espacios en blanco en los bordes y reemplazo de espacios con guiones de forma represiva.

La expresión URL producirá las siguientes URL:

  • hogar por hogar
  • acerca de Acerca de
  • servicios para Servicios
  • portafolio para Portafolio
  • contáctenos para Contáctenos

En la devolución de enlace del renderizado, pasamos this.props.label como tercer argumento a createElement(), y se convierte en parte del contenido de la etiqueta , es decir, el texto del enlace.

Para separar cada enlace del otro, agregamos la etiqueta de ruptura de enlace
. Debido a que el componente debe devolver solo un elemento, envolvemos y
en

:

    return React.createElement('div',
      null,

Cada argumento de createElement() después del segundo, por ejemplo, 3rd, 4th, 5th, se usará como contenido (también conocido como niños). Para crear el elemento de enlace, lo pasamos como segundo argumento. Y para crear un elemento de ruptura
después de cada enlace, pasamos el elemento de ruptura de línea como el cuarto argumento:

      React.createElement(
        'a',
        {href: url},
        this.props.label
      ),
      React.createElement('br')
      )
  }
})

Eso es todo. No hay emociones, pero la página debería mostrarle cinco enlaces (o más si agrega más elementos a la matriz de menús). Esto es mucho mejor que copiar y pegar cinco elementos y luego tener varios lugares para modificar las etiquetas y las URL.

Para su comodidad, proporcionaré listas completas de los archivos con la mayor frecuencia posible. El espacio es barato (espero que seas fanático del formato digital como yo), y yo (así como miles de mis lectores) encuentro extremadamente útil poder mirar todo el archivo a la vez sin tener interrupciones de texto o ir a Github. Si no está de acuerdo, simplemente omita los listados completos.

Para ver la página, simplemente ábrala como un archivo en Chrome, Firefox o Safari (y tal vez en Internet Explorer):Figura 1-X.

var Menu = React.createClass({
  render: function(){
    var menus = ['Home',
      'About',
      'Services',
      'Portfolio',
      'Contact us']
    return React.createElement('div',
      null,
      menus.map(function(v,i){
        return React.createElement('div',
          {key: i},
          React.createElement(Link, {label: v})
        )
      })
    )
}})

var Link = React.createClass({
  render: function () {
    var
      + this.props.label
        .toLowerCase()
        .trim()
        .replace(' ', '-')
    return React.createElement('div',
      null,
      React.createElement(
        'a',
        {href: url},
        this.props.label
      ),
      React.createElement('br')
      )
  }
})

ReactDOM.render(
  React.createElement(
    Menu,
    null
  ),
  document.getElementById('menu')
)

Incluso para estas páginas triviales, me gusta usar un servidor web local. Hace que la ejecución del código se acerque más a cómo lo haría en producción. Además, le permite usar AJAX/XHR que no puede usar si solo está abriendo un archivo HTML en un navegador.

La forma más fácil de ejecutar un servidor web local es usar node-static , o una herramienta similar de Node.js . Para instalarlo, use npm:

$ npm install -g [email protected]

Una vez que esté instalado, ejecute este comando desde la carpeta raíz de su proyecto para que el archivo esté disponible en http://localhost:8080 (Este no es un enlace externo, ejecute el siguiente comando antes de hacer clic en el enlace):

$ static

Para detener el servidor en Mac OS X, simplemente presione control + c.

El código fuente de este ejemplo está en GitHub  y Punker . Para jugar con el código y/o ver la demostración en línea, simplemente vaya a Plunker .

Reaccionar rápidamente

También puedes ver los videos de YouTube de React Quickly o comprar un libro con el 39 % de descuento (código “mardandz “).