Cómo comenzar a programar en React cuando ya programas en Angular

Existen muchos tutoriales que nos enseñan a programar con React o con Angular. Existen también muchos artículos que nos explican cuándo usar uno y cuándo usar otro y las ventajas y desventajas de cada uno de ellos.

¿Pero qué sucede cuando ya sabes programar en Angular y necesitas hacer algún proyecto con React? Ya sea porque quieres aprender cosas nuevas o porque en tu trabajo se requiere que programes ahora con React.

Aquí sería bueno señalar que cuando ya tienes las bases de programación en Web Applications, cambiar de una tecnología a otra resulta más sencillo que cuando no las tienes. Y si las circunstancias te llevaron a programar primeramente en Angular, ahora que empieces a programar con React será más sencillo para ti.

El propósito de este artículo no es enseñarte a programar con React, sino señalar las diferencias y el camino para que cuando ya eres programador en Angular puedas hacer la transición hacia React.

Existen algunos conceptos que me gustaría mencionar para comenzar. React es una librería desarrollada por Facebook y Angular es un framework creado por Google. Ambas tecnologías utilizan componentes. Cabe señalar que un componente es un pedacito de la página web que puede manipularse como una unidad independiente.

Si tú ya programabas con Angular recordarás que la aplicación se componía de 2 archivos: por un lado, existía la interfaz de usuario en HTML y por otro la lógica en un archivo de TypeScript. Recordarás también que era necesario hacer el binding o enlace bidireccional entre ambos elementos. Ahora que programes con React las cosas se simplificarán. Todo estará contenido en un solo archivo de JavaScript.

Cada elemento puede ser considerado como un componente independiente, lo cual permite utilizarlo en diferentes partes de la aplicación.

Una parte importante es señalar que cada componente cuenta con una función que hará render a un solo elemento que contiene todo el código HTML que se visualizará.

Supongamos que queremos crear un reloj digital que muestre la hora en pantalla. El código quedaría de la siguiente manera:

function tick() {
 const element = (
   <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

Tenemos una sola función llamada tick y al final tenemos un método setInterval que utiliza como parámetros el valor de tick y nos dice que debe ejecutarse cada 1000 milisegundos.

¿Qué es lo que hace la función tick? Primeramente tiene una constante llamada element que dentro de un solo elemento <div> muestra un encabezado con el texto Hello, world! Y con un segundo encabezado que dice It is más una llamada al método Date() el cual despliega la fecha y la hora actuales y la convierte a string para poder mostrarla dentro del encabezado.

Después tenemos el método ReactDOM.render que nos dice que lo que se mostrará es el valor constante de element seguido de la instrucción document.getElementById(‘root’) para indicar que es el primer componente a mostrar.

Otro concepto interesante en React es el uso del encapsulamiento. Cada elemento puede encapsularse dentro de un componente. Y ese componente encapsulado puede ser insertado o llamado dentro de otro componente.

Incluso se llega a hacer la analogía con los elementos biológicos de la siguiente forma: a los elementos más simples se los llama átomos; los átomos pueden ser utilizados en otros elementos a los que llamaremos moléculas; las moléculas a su vez forman organismo y así sucesivamente.

Aquí lo que se quiere mencionar es que un componente puede estar integrado por otro u otros componentes que a su vez pueden estar integrados de múltiples componentes.

Vamos a ejemplificar todo esto. Retomando el ejemplo del reloj, vamos a encapsular la parte propiamente del reloj y dejemos por separado el resto del texto mostrado en el HTML.

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

Creamos una función llamada Clock que tiene como parámetro props donde le pasaremos todos los valores que usaremos dentro de esa función. Veamos cómo dejamos un solo elemento <div> y dentro de él, el texto que mostrábamos anteriormente.

Creamos por separado la función tick donde mandamos llamar a Clock y donde le asignamos al parámetro date la fecha y la hora actuales.

Y finalmente el método setInterval como había sido utilizado anteriormente.

Nótese cómo el elemento Clock fue nombrado con mayúscula, como una regla para diferenciarlo de los tags propios de HTML.

Otro aspecto distinto en React es el uso de los states. A diferencia de los props que se utilizan para pasar parámetros o valores de un componente a otro. Los states se utilizan para actualizar ciertos valores dentro del mismo componente.

Para ejemplificarlo veamos el siguiente código:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Continuando con el ejemplo del reloj digital analizaremos los cambios que se han realizado en este código:

En lugar de utilizar una función ahora estamos usando una clase para crear nuestro componente Clock. La clase extiende la clase React.component y tiene un constructor. Aunque el constructor utiliza el parámetro props, ahora cuenta con un elemento state que se inicializa con el valor de la fecha y hora actuales. Y se hace render o se muestra en pantalla los textos que ya conocemos de Hello, World! It is y la fecha y la hora de ese momento.

Ahora se ejecuta el método componentDidMount() y dentro de él se hace una llamada cada 1000 milisegundos al método tick() y aquí es donde se ejecuta la magia de React. Dentro del método tick() se actualiza el valor el state con el valor de una nueva fecha. Lo interesante de React es que cada vez que hay un cambio en el valor de state se ejecuta el valor del método render() y se actualiza en pantalla solamente el valor que se modificó.

Si el componente Clock llega a ser removido del DOM, React llama al método componentWillUnmount() del lifecycle y entonces se detiene el timer.

Es importante señalar que el valor del state solamente puede ser modificado directamente en el constructor. Para asignarle un nuevo valor posteriormente hay que utilizar el siguiente código:

this.setState({comment: 'Hello'});

El encapsulamiento permite mostrar diferentes componentes. Es posible usar la instrucción if para seleccionar cuál de ellos mostrar.

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={true} />,
  document.getElementById('root')
);

El código anterior despliega el mensaje Please Sign in o Welcome Back dependiendo del valor que se envía en isLoggedIn asignado en props.

Otro concepto interesante dentro de React es la composición, la cual es una forma distinta de tratar la herencia.

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
   </FancyBorder>
  );
}

ReactDOM.render(
 <WelcomeDialog />,
  document.getElementById('root')
);

En el código anterior observamos que se hace render al componente WelcomeDialog Este a su vez, está compuesto por FancyBorder y este último a su vez se integra por FancyBorder-blue. De esta manera los componentes children en React se ven como una especialización de los componentes padres que los contienen.