Iniciando con ReactJS

ReactJS es una libreria JavaScript Open-Souce, diseñada para crear interfaces de usuario y solamente se enfoca en la construcción del frente, es decir en todo aquello que el usuario puede ver o interactuar con el , las vistas en react usualmente son renderizadas usando componentes que contienen otros componentes adicionales, especificándolos como Tag’s personalizados de HTML. Esta tecnología fue concebida para facilitar el desarrollo SPA (Single Page Application) obteniendo un gran rendimiento en la actualización del DOM en respuesta a cambios, ademas de permitir una limpia separación entre componentes. Esta libreria esta mantenida por Facebook, Instagram y una gran comunidad de desarrolladores independientes y corporaciones.

React intenta ayudar a los desarrolladores a crear aplicaciones web complejas que utilizan un gran intercambio de datos. Su principio es sencillo declarative and composable. React solo se ocupa de interfaz de usuario de la aplicación, si piensas en el modelo de desarrollo MVC (Model-View-Controler) react seria solo la V, esto hace que se pueda combinar con otras librerías o frameworks JavaScript como Ember, Angular, BackBone, etc.

Actualmente react esta ganando mucho campo, esta siendo utilizado por organizaciones como Khan Academy, Netflix, Yahoo, Airbnb, Istagrams, Sony y muchas otras, esto demuestra el estado de madurez de la libreria, así que nos es mala idea conocerlo y empezar a usarlo.

Para comenzar a preparar condiciones de desarrollo primero nesecitan un editor de texto, en mi caso uso SubLime Text, pero puedes utilizar el de tu preferencia, puedes usar LiveReaload para visualizar los cambios que realizas inmediatamente en el navegador y tambien necesitamos un servidor web (XAMP,MAMP por ejemplo), que nos va permitir hostear nuestro sitio para que podamos realizar las pruebas. Si tu S.O es osx puedes configurar de manera muy sencilla el servidor mediante la linea de comandos

 Python: python -m SimpleHTTPServer
PHP: php -S 127.0.0.1:8080
rails: rails

Una de la maneras para comenzar a trabajar con react es mediante npm (Node Package Manager) este es un manejador de paquetes y dependencias para JavaScript, corre bajo NodeJS, así que es necesario que lo tengas instalado en tu computadora, si aun no lo tienes lo puedes descargar desde su pagina oficial, este proceso es valido para mac y windows. Si utilizar mac puedes usar un gestor de paquetes, por ejemplo brew, escribiendo la siguiente instrucción:

brew install node

En el sitio podemos encontrar un listado de todos los paquetes relacionados con node,pero en este momento solos nos interesa los los paquetes que tiene que ver con react, pero para poder instalarlos vamos a requerir de la linea de comandos,pero antes vamos a manerar de manera correcta los paquetes de npm, para ello vamos a crear el archivo package.json, lo podemos realizar de manera sencilla escribiendo en la terminal la siguiente instruccion y luego seguimos el asistente:

Inicialización de npm

Luego para instalar las dependencias de librerias que nos ayudaran con react tenemos que ejecutar la siguiente instrucción, que lo que hará es decirle a npm que necesitamos instalar la libreria y guardaremos la referencia de la libreria instalada en el archivos de dependencias de npm (package.json), la secuencia de comando es la siguiente:

Donde React] (Paquete que contiene la libreria de react), React-Dom (Es el paque te de react para trabajar con el DOM (vitrual Dom)), babelify ( no es mas que un traductor de ES6 a ES5, nos permitirá escribir código de manera mas rápida ), babel-preset-react (Preset especial de babel para react) y todo esto se guarda en el archivo de depencias package.json,el comando anterior creara la carpeta node- modules (carpeta donde almacenara todos los paquetes instalados localmente) y modificaria archivo de dependencia y nos quedaria de la siguiente manera:

Archivo: package.json

También vamos a instalar un paquete adicional browserify (nos va a pemitir cargar modulos a medida que lo necesitemos en el codigo, esto lo asemeja mucho a la manera de programar en node, solo que es del lado del FrontEnd)

npm install — g browserify
npm install –save browserify

(la -g es para installar el paquete globalmente)

Listo, con esto ya podemos comenzar a probar un poco de React, vamos a crear la siguiente estructura en el directorio de trabajo

Y a continuacion el contenido de cada uno de los documentos:

main.js

Index.html

Luego abrimos la consola y escribimos los comandos que nos van a permitir crear un archivo que se va a llamar bundle.js que va a contener nuestro codigo y todas las librerias, no tenemos que estar haciendo carga de todas las librerias, ademas de trasformar nuestro código a codigo standar ES5

browserify -t [ babelify –presets [ react ] ] main.js -o bundle.js
Like what you read? Give Julio Emilio a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.