Saltar al contenido
Codif铆ca.me | Desarrollo web | Programaci贸n

Introducci贸n a ReactJS

9 septiembre, 2019
como-funciona-reactjs

Durante el 煤ltimo a帽o se ha hablado mucho acerca de ReactJS, ha generado una gran cantidad de art铆culos, posts, discusiones, comentarios tanto negativos como positivos. Y muchos a煤n se preguntar谩n por que tanta discusi贸n al respecto, y es que ReactJS viene a cambiar mucho de lo que se consideran 鈥渕ejores pr谩cticas鈥 y la forma en que se hacen las cosas, y como todo cambio puede producir rechazo.

Cada vez es mayor la adopci贸n de ReactJS en el mundo del desarrollo web y m贸vil (con react native), no s贸lo es usada por Facebook, Instagram y Whatsapp sino por compa帽铆as como Airbnb, Asana, Uber, Periscope, Khan Academy, Reddit, entre muchas聽otras.

Si quieres saltar la teor铆a y ver el c贸digo puedes ir al final del post

React js

驴Qu茅 es React?

Antes que nada hay que definir que es ReactJS, es simplemente una librer铆a de Javascript para crear interfaces de usuarios, es decir ser铆a la V del MVC, o lo que mostramos al usuario, no m谩s ni menos que eso.

Es una librer铆a creada y hecha open source por Facebook y la hicieron para resolver los problemas que se les presentaban al hacer una aplicaci贸n tan grande como lo es Facebook y poder facilitar la creaci贸n de componentes interactivos, reusables y actualizables.

Los principios en los que React se basa son los siguientes:

Simple
Si le indicas a React como se debe ver tu aplicaci贸n en un momento determinado, React se encargar谩 de actualizar tu Interfaz cuando los datos cambien, lo que ahorra mucho trabajo y esfuerzo a la hora de optimizar y mejorar tu aplicaci贸n.

Declarativo
Cuando los datos cambian, React actualiza tu Interfaz y s贸lo actualiza las partes que deben ser cambiadas. En la programaci贸n declarativa tu le dices al programa como quieres que se vea o que haga cuando tiene ciertos estados y el programa resuelve como hacerlo, esto es distinto a la programaci贸n imperativa tu le dices al programa como hacer las cosas.

Componentes Reusables
React se basa en construir componentes, cada componentes es totalmente encapsulado por lo que es f谩cil reutilizarlos y probarlos. Adem谩s puedes colocar varios componentes juntos, o uno dentro de otros.

Imagina un t铆pico post de blog como este donde tienes el contenido, una secci贸n de comentarios, la lista de comentarios, cada uno de estos elementos puede ser un componente e inclusive tener subcomponentes por ejemplo las estrellas de rating de los comentarios.

Todo en React se trata de los componentes.

Virtual DOM

El Virtual DOM es exactamente lo que dice el nombre un DOM (esctructura de las p谩ginas HTML) virtual, se puede pensar como una capa de abstracci贸n. Esto tiene varios beneficios entre ellos que se pueda 鈥渕ostrar鈥 o hacer render de la p谩gina mucho m谩s eficiente, adem谩s como es una capa de abstracci贸n puedes cambiar el Virtual DOM por casi cualquier cosa como por ejemplo Node en el servidor y tener SSR (Server Side Rendering), o por una implementaci贸n de componentes nativos m贸viles (como se hace con React Native).

Dale 5 minutos
Basado en este聽art铆culo, darle 5 minutos se refiere a que al principio聽React parece que va en contra de todo lo que sabes, cambia mucho de los paradigmas y 鈥渕ejores pr谩cticas鈥 que conocemos, pero todo es cuestion de darle un poco de tiempo y acostumbrarse despu茅s empezar谩s a entenderlo mejor y ver los beneficios. Creeme era el primero que sali贸 corriendo al ver HTML, CSS y JS mezclado en un solo archivo.

JSX

Aunque React se puede escribir en Javascript puro, es recomendado y se ha convertido la norma escribir los componentes en JSX.

JSX te permite crear objetos de Javascript usando sintaxis de HTML. Por ejemplo para hacer un link en React en Javascript puro ser铆a algo como:

React.createElement(鈥榓鈥, {href: 鈥榟ttps://facebook.github.io/react/鈥檥, 鈥楬ola!鈥)

Con JSX se transforma en:

<a href=鈥漢ttps://facebook.github.io/react/鈥>Hola!</a>

Los archivos JSX tienen extensi贸n .jsx en vez de .js, como estamos acostumbrados y tienen varias peculiaridades que veremos en los ejemplos.

El archivo JSX al final es transformado autom谩ticamente en Javascript, y creanme que aunque al principio cuesta entenderlo hace la vida m谩s f谩cil para escribir los componentes de React.

M谩s informaci贸n y opiniones de JSX la pueden encontrar aqui .

Bueno ya basta de hablar de teor铆a pasemos a un poco de c贸digo para entender como se ve React.

Direcci贸n de los Datos

Esto tambi茅n es muy importante en React, la direcci贸n de los datos es un s贸lo sentido, viaja a traves de state y props al componente, por lo que cuando tenemos varios componentes usualmente tenemos un componente padre que maneja el estado y le pasa a los hijos datos a trav茅s de los props.

Supongamos nuevamente el ejemplo de los comentarios, tenemos dos componentes un componente padre que representa la lista de los comentarios y luego cada comentario es un componente, posiblemente en el componente padre tendremos la candidad de comentarios adem谩s de la lista de los comentarios, pero al comentario hijo solo le interesar铆a el texto y autor de un comentario individual por lo que eso se lo pasar铆amos de padre a hijo a trav茅s de props.

Adem谩s imaginemos que tenemos una funci贸n de ordenar en el padre donde se pueden ordenar los cometarios por fecha, el 煤nico que manejar铆a el estado del orden ser铆a el padre los hijos no tienen porque saber nada acerca del orden. Esta separaci贸n permite hacer componentes muy espec铆ficos, f谩cil de probar y de manejar, a diferencia de tener cientos de lineas de c贸digo dif铆ciles de entender.

Empezando con un simple Componente

Como esto es una introducci贸n vamos a utilizar jsFiddle para ver los ejemplos, en futuros art铆culos veremos como configurar React en nuestro computador.

Vamos a crear un componente muy sencillo el t铆pico Hola Mundo

const Hola = React.createClass({
  render() {
    return <div>Hola {this.props.nombre}</div>;
  }
});

React.render(<Hola nombre="Mundo" />, document.body);

As铆 es como se ve un componente (muy simple) en React.

Primero declaramos el Componente Hola a trav茅s de React.createClass, dentro de esta funci贸n tenemos render que es el que crea el componente como tal.

Aqu铆 estamos utilizando JSX, como ven usamos una sintaxis muy parecida a HTML con el <div>.

Luego tenemos un atributo los {鈥 indican que React tiene que cambiar esto por el atributo que le estamos pasando en este caso this.props.name. Los Props son una de las forma que tiene React para pasar atributos o datos a los componentes y lo accedemos en el componente a trav茅s de this.props.

Por 煤ltimo llamamos a React.render el cual toma dos argumentos:

  1. El nombre del componente, en este caso le pasamos el componente con el prop 鈥榥ombre鈥 definido como 鈥淢undo鈥.
  2. Donde se debe mostrar o montar el componente, en este caso lo hacemos directamente en el body.

En jsFiddle puedes probar cambiando el nombre a otra cosa o cambiando el div por un H1, por ejemplo.

Un Componente con Estado

Todo componente en React tiene un objeto state y un objeto props. En el ejemplo anterior vimos como utilizar los props a trav茅s de this.props, el Estado (State) es lo que nos va a permitir la intereactividad de nuestro componente.

Los estados se manejan a trav茅s de los siguientes mecanismos:

  • setState, para colocar el valor de un estado
  • this.state, para acceder a los valores de los estados
  • getInitialState, es un m茅todo para colocar el estado inicial que queremos que est茅 nuestro componente.

Otra caracter铆stica de nuestros componentes son los Eventos, los eventos est谩n asociados a nuestros componentes como propiedades y pueden disparar m茅todos, por ejemplo cuando presionamos un bot贸n, hacemos scroll, entre otros.

Vamos a hacer un ejemplo de un componente que es un contador que se incrementa cada vez que hacemos click sobre un bot贸n.

const Contador = React.createClass({
  getInitialState() {
    return {
      contador: 0
    }
  },
  incrementarContador() {
    this.setState({
      contador: this.state.contador + 1
    });
  },
  render() {
    return (
      <div className="mi-componente">
        <h1>Contador: {this.state.contador}</h1>
        <button type="button" onClick={this.incrementarContador}>Incrementar</button>
      </div>
    );
  }
});

React.render(<Contador/>, document.body);

Los pasos a seguir ser铆an:

  1. Crear un componente Contador con React.createClass.
  2. Colocamos un estado inicial del contador a 0 con getInitialState.
  3. Creamos un m茅todo incrementarContador() que aumenta el contador en 1 cada vez que lo llamamos.
  4. Llamamos a render() que se encarga de mostrar nuestro componente, aqu铆 tomamos el valor del contador con this.state.contador y llamamos el m茅todo con onClick dentro del bot贸n.
  5. Por 煤ltimo llamamos a React.render para mostrar nuestro componente.

Ahora cada vez que hacemos click sobre el bot贸n el contador se incrementa en 1.

Puedes modificarlo en jsFiddle aqu铆 http://jsfiddle.net/n5yx2bpy/1/

Conclusi贸n

React es una librer铆a que nos sirve para manejar nuestra interfaz de usuario a trav茅s de componentes, aunque es un cambio en la forma de pensar de construir aplicaciones, tambi茅n tiene una serie de ventajas que nos ayuda a tener aplicaciones m谩s f谩ciles de manejar, que se pueden probar f谩cilmente y escalables.

Dicho esto React no es para todo tipo de aplicaciones, si tienes una aplicaci贸n muy peque帽a o est谩s haciendo s贸lo un prototipo, React puede ser demasiado. Lo bueno de React es que no tienes que cambiar toda tu aplicaci贸n de una vez, puedes ir cambiando peque帽os elementos por componentes poco a poco y donde m谩s lo necesites, as铆 lo hizo Facebook con muchas de sus aplicaciones.

Ahora queda mucho por aprender y por avanzar, React est谩 actualmente por la versi贸n 0.14.7 al momento de escribir este art铆culo, fue puesta como c贸digo abierto en 2013 y especialmente en 2015 fue cuando comenzar a ganar mucha m谩s atenci贸n. Todo el tiempo est谩n saliendo nuevas mejoras y funcionalidades.

En pr贸ximos art铆culos veremos m谩s en profundidad como usar React y haremos una peque帽a aplicaci贸n.

Por ahora si quieres aprender m谩s de React te recomiendo ver la p谩gina principal de React聽https://facebook.github.io/react/index.html聽y hacer el tutorial.

Si quieres ver ejemplos de componentes puedes visitar聽https://js.coach/

Si tienes alguna duda o sugerencia puedes dejar un comentario.

5/5 - (1 voto)