Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Empezando con React

by
Read Time:14 minsLanguages:
This post is part of a series called Getting Starting with React.
Data Persistence and Sessions With React

Spanish (Español) translation by Angel Fernando Quiroz Campos (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

MVC es un paradigma muy popular en el desarrollo web y ha existido desde algún tiempo. El framework React es una parte poderosa de esa trinidad Modelo-Vista-Controlador, porque se centra puramente en sólo la vista. React está escrito en JavaScript y creado por los equipos de desarrollo de Facebook e Instagram.

React está siendo usado por toda la web para crear aplicaciones web rápidas que sean fáciles de mantener debido a la forma en que el framework de React estructura el código de la capa vista.

¿Qué se puede hacer con React?

  1. Construir a la velocidad del rayo, aplicaciones web isomorficas y de diseño adaptable, independientemente de frameworks React no hace suposiciones sobre la pila de tecnología en la que reside.
  2. La manipulación virtual del DOM te provee de un modelo de programación simple que puede ser renderizado en el navegador, en el servidor o en el escritorio con React Native.
  3. Los enlaces de flujo de datos con React están diseñados como un flujo de datos reactivo unidireccional. Esto reduce requerimientos repetitivos y es más fácil de trabajar que con métodos tradicionales.

Hola Mundo

Para empezar, aquí hay un ejemplo simple de React tomado desde los ejemplos oficiales:

Este ejemplo rendedizará 'Hello Jogn' dentro de un contenedor <div>. Ten en cuenta la sintaxis de estilo XML/HTML que es usada en las líneas 3 y 8. Esto es llamado JSX.

¿Qué es JSX?

JSX es una sintaxis similar a XML/HTML que es usada para renderizar HTML desde el código JavaScript. React transforma JSX dentro de JavaScript nativo para el navegador, y con las herramientas proporcionadas tú puedes convertir el código HTML de tus sitios existentes en JSX.

JSX hace fácil la mezcla de código ya que se siente como escribir HTML nativo pero desde el interior de JavaScript. Combinado con Node, esto lo convierte en un flujo de trabajo muy consistente.

JSX no es requerido para usar React -Puedes usar JS plano- Pero esta es una herramienta muy poderosa que hace sea fácil definir el árbol de estructuras y asignar atributos, así que su uso es altamente recomendado.

Para renderizar una etiqueta HTML en React, sólo usa nombre de etiquetas en minúsculas con algo de JSX como esto:

Instalando React

Hay muchas formas de usar React. La manera recomendada oficialmente es desde npm o el CDN de Facebook, pero además puedes clonarla desde git y construir la tuya propia. También puedes usar el equipo de inicio para ahorrar tiempo con un generador de estructuras desde Yeoman. Cubriremos todos estos métodos para que así tengas un entendimiento completo.

Usando el CDN de Facebook

Para hacerlo de forma más rápida, sólo incluye las librerías de React y React Dom desde el CDN de fb.me como sigue:

Instalando desde NPM

El manual de React recomienda usar React con un sistema módulo de CommonJS como browserify o webpack.

El manual de React también recomienda usar los paquetes npm de react y react-dom. Para instalarlos en tu sistema, ejecuta lo siguiente en tu terminal dentro del directorio de tu proyecto, o crea un nuevo directorio y cambia a ese directorio con cd primero.

Ahora serás capaz de ver la instalación de React dentro del directorio node_modules.

Instalación desde las fuentes en Git

Dependencias

Necesitas tener Node v4.0.0+ y npm v2.0.0+. Puedes verificar tu versión de node con node version y npm con npm version

Actualizando Node vía NVM

Recomiendo usar el gestión de versión nvm de node para actualizar y seleccionar tu versión de node. Es fácil de obtener nvm sólo ejecutando:

Este script clona el repositorio nvm en ~/.nvm y agrega la línea de tiempo en tu perfil (~/.bash_profile, ~/.zshrc o ~/.profile).

Si deseas instalar manualmente nvm, puedes hacerlo a través de git:

Para activar mvn con este método, necesitas agregar la fuente desde la terminal con:

Ten en cuenta: Agrega esta línea a tus archivos ~/.bashrc, ~/.profile o ~/.zshrc respectivamente para tenerlo agregado automáticamente cada vez que inicies sesión en tu computadora.

Usando NVM

Con nvm ahora instalado, podemos obtener cualquier versión de node que necesitemos, y podemos verificar la lista de versiones instaladas con node list y las que están disponibles con node ls-remote. Necesitamos una versión superior a 4.0.0 para trabajar con React.

Instala la versión más reciente y establécela como la versión por defecto con lo siguiente:

Node está actualizado y npm ya está incluido también. Ahora estás listo para seguir con la instalación.

Constuir Read desde una fuente Git

Clona el repositorio con git dentro de un directorio nombrado como react en tu sistema con:

Una vez que tenas el repositorio clonado, puedes usar grunt para constuir React:

En este punto, un directorio build/ ha sido creado con todo lo que necesitas para usar React. Echa un vistazo en el directorio /examples para ver algunos ejemplos básicos funcionando.

Usando el equipo de inicio

Primero, descarga el equipo de inicio.

Extrae el zip y en la raíz crea un helloworld.html, agregando los siguiente:

En este ejemplo, React usa Babel para transformar el JSXen JavaScript plano a través de <script type="text/babel">.

Usando un archivo JavaScript por separado

Crea un nuevo archivo en src/helloworld.js y escribe el siguiente código en él:

Ahora, todo lo que necesitas es referenciarlo en tu HTML, así que abre el helloworld.html y carga el script que creaste recientemente usando una etiqueta script con atributo type text/babel así:

Recarga la página y verás el helloworld.js siendo renderizado por babel.

Nota: Algunos navegadores (Chrome, por ejemplo) fallarán al cargar el archivo a menos que este sea servido por HTTP, para asegurarnos que estás usando un servidor local. Yo recomiendo el proyecto browsersync.

Transformación sin conexión

También puedes usar la interfaz de línea de comandos (CLI) para transformar JSX usando las herramientas de línea de comandos de babel. Esto se acquiere fácilmente con el comando npm:

El indicador --global o -g (en su forma corta) instalarán el paquete babel globalmente para que este esté disponible desde cualquier lugar. Esta es una buena práctica para el uso de Node en mútliples proyectos y herramientas de línea de comandos.

Ahora que babel está instalado, vamos a hacer la traducción de helloworld.js que creamos en el paso anterior. En la terminal, desde el directorio raiz, en donde descomprimiste el zip del equipo de inicio, ejecuta:

Ahora el archivo build/helloworld.js será autogenerado cada vez que hagas un cambio. Si estás interesado, lee la documentación de Babel CLI para obtener una conocimiento más avanzado.

Ahora que babel ha generado el archivo build/helloworld.js, que contiene sólo puro JavaScript, actualiza el HTML sin las etiquetas script habilitadas con babel.

Para recapitular, con babel podemos cargar JSX directamente dentro de una etiqueta script a través de el atributo type text/babel. Esto es bueno para propósitos de desarrollo, pero para producción podemos proveer un archivo JavaScript generado que puede ser almacenado en caché en la máquina local del usuario.

La generación de esta copia es hecha en la línea de comando, y como esta es una tarea repetitiva, se recomienda altamente automatizar el proceso usando el marcador --watch. O puedes ir un paso más allá y utilizar webpack y browsersync para automatizar completamente tu flujo de trabajo de desarrollo. Para hace esto de la manera más fácil posible, podemos automatizar la configuración de un nuevo proyecto con un generador Yeoman.

Instalación con las estructuras de Yeoman

Yeoman es una herramienta muy útil para empezar proyectos rápidamente, con un flujo de trabajo óptimo y una herramienta de configuración. La idea es permitirte gastar más tiempo en desarrollo que en configuración del área de trabajo del proyecto. y para minimizar tareas repetitivas (ten en cuenta que las lesiones por esfuerzo repetitivo es la razón número uno por la que los programadores dejan de programar). Así que, como una buena práctica, ahorrar tiempo con herramientas e implementar D.R.Y (Don't repeat yourself, o no te repitas) en tu día a día aumentará tu salud y eficiencia, y permitirte pasar más tiempo haciendo más código que en la configuración.

Hay un montón de estructuras báses, vienen en muchos sabores diferentes escalas de proyecto. Para este primer ejemplo, usaremos las estructuras base creadas con react-fullstack de los generadores de Yeoman; puedes ver una demostración de cómo luce el resultado final.

Nota: Esta es una configuración fullstack, que es probablemente excesiva para proyectos pequeños. La razón por las que seleccioné esta estructuras base es para darte un entorno de configuración completo, así que puedes ver cómo el kit de inicio da forma a una aplicación más amplia. Hay una cabecera y un pie de página, y puedes ver en dónde irán las funciones de login y registro, a pesar que todavía no están codificados en el ejemplo.

Uso

Para usar yeoman, primero instálalo, y si no tienes las contrapartes requeridas de yeoman glup, bower y grunt-cli, instálalos de esta forma:

Ahora instala la estructura básica de React con:

Ahora crea un directorio para tu proyecto y cambia a ese directorio en la terminal así:

Finalmente usa el comando yo con el generador de estructuras base de React-fullstack para crear tu aplicación react dentro del directorio.

Yeoman ahora creará los directorios y archivos requeridos; tú seras capaz de ver las actualizaciones sobre esto en la línea de comandos.

Con la estructura base ahora configurada, vamos a construir nuestro proyecto:

Por defecto empezamos en modo debug (depuración), y para darle vida, sólo agregamos el marcador -- release, por ejemplo npm run start -- release.

Ahora verás el inicio de la build y la inicialización de webpack. Una vez que esto está hecho, verás los resultados de webpack mostrándote información acerca de la build y las URL desde las cuales accede.

Accede a tu aplicación a través de las URL listadas al final de los resultados, con tu navegador por defecto en http://localhost:3000. Para acceder a la interfaz de administración de browser sync, entra en http://localhost:3001.

Nota: Puedes necesitar abrir el puerto en tu servidor para el puerto de desarrollo. Para usuarios de ubuntu/debian con ufw, hagan los siguiente:

Convirtiendo tu sitio existente a JSx

Facebook provee una herramienta online si sólo necesitas convertir un pequeño código de tu HTML a JSX.

Para grandes requerimientos hay una herramienta en npm para eso, llamada htmltojsx. Descárgalo con:

Usarlo a través de la línea de comando es tan fácil como:

Ya que htmltojsx es un módulo node, puede usar directamente en tu código, por ejemplo:

Ejemplo de lista

Vamos a empezar a trabajar creando una básica lista de tareas para que puedas ver cómo trabaja React. Antes de iniciar, por favor configura tu IDE. Yo recomiendo usar Atom.

En la terminar, instala los linters para React a través de npm:

Nota: La última versión de linter-eslint ha hecho mi MacBook Pro muy lenta, así que la deshabilité.

Una vez que está hecho, podemos crear una lista básica con la estructura base que hicimos en el paso anterior con Yeoman, para mostrar un ejemplo funcionando del flujo de datos.

Asegurate que tu servidor está iniciado con npm start, y ahora vamos a empezar a hacer algunos cambios.

Primero que nada hay tres archivos de plantillas jade proporcionados en esta estructura base. No queremos usarlas para el ejemplo, así que empezaremos limpiando el archivo index.jade para que tener un archivo vacío. Una vez que guardes el archivo, verifica tu navegador y los resultados de la terminal.

La actualización es mostrada instantáneamente, sin necesidad de recargar. Esta es la configuración de webpack y browsersync que la estructura base ha proporcionado en efecto.

Luego abre el directorio de componentes y crea un nuevo directorio:

Ahora, dentro del directorio UserList, crea un package.json con lo siguiente:

También, aún dentro del directorio UserList, crea un archivo UserList.js y agrega los siguiente:

Ahora para finalizar, necesitamos agregar algunos datos para esta lista. Haremos esto dentro de components/ContentPage/ContentPage.js. Abre ese archivo y establece su contenido como sigue:

Ahora cuando guardamos, el webpack recontruira y browsersync mostrará los cambios en tu navegador. Hecha un vistazo al código fuente para ver cómo es fue renderizado.

Resumen

Hemos usado el generador de estructuras base de Yeoman react-fullstack para empezar una aplicación basada en React con el kit de inicio. Para una explicación más detallada de la capa de archivos y directorios, revisa el archivo readme del repositorio del kit de inicio de react.

Desde aquí editamos el archivo index.jade, se limpió y empezamos a crear nuestra propia vista, haciendo un nuevo componente llamado UserList.

Dentro de components/UserList/UserList.js definimos cómo la sera renderizada la lista con:

Aquí, es importante a tener en cuenta que React requiere todos los elementos iterados para tener un único identificador proporcionado bajo el atributo key.

Para mostrar la lista, la incluimos dentro del archivo ContentPage.js com import UserList from '.../UserList/; y definimos algunas datos de prueba con:

Dentro de ContentPage.js llamamos al componente UserList con el código JSX <UserList data={listData} />

Ahora el componente UserList puede acceder al atributo data a través de this.props.data.

En cualquier momento que pasamos un valor con un atributo de un componente, se puede acceder a él mediante this.props. También puedes definir el tipo de dato que debe ser proporcionado usando la variable estática propTypes dentro de su clase.

Componentes extendidos vs. la sintaxis React.createClass

Finalmente, un punto importante a tener en cuenta es que este ejemplo hace uso de componentes extendidos. Esto tiene muchos beneficios para estructurar semánticamente tu código. Sin embargo, es posible que desee acceder a un enfoque más escueto, como lo hacen muchos otros ejemplos.

Entonces, en lugar de class ComponentName extends Component que has visto anteriormente en este tutorial, puedes crear una clase React con la siguiente sintaxis por ejemplo:

Bueno, con eso cubrimos esta introducción a React. Ahora debes tener una buena comprensión de lo siguiente:

  • Obtener React
  • Cómo usar Babel con React
  • Usar JSX
  • Crear un componente a través del método extend.
  • Usando tu componente y pasándole datos

En las siguientes partes, discutiremos cómo usar JXS de una forma más avanzada, cómo trabajar con una base de datos como fuente de datos persistentes, y también cómo trabaja React con otras tecnologías web populares como PHP, Rails, Python y .NET.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.