Tutorial de ReactJS para Principiantes: funciones, clases y componentes

El día de hoy estaremos continuando con nuestro tutorial de React JS y a su vez adentrándonos un poco más en esta librería y en las muchas otras cosas que aún no hemos tenido tiempo de probar y mencionar en los anteriores tutoriales.

Recordemos que si bien React JS no es un Framework como tal, sí nos trae una metodología mucho más productiva y un sin fin de opciones para mejorar y manejar nuestro código de forma fácil, simple y modulada.

Ahora sí, sin más veamos qué más nos queda por aprender en React JS.

Convirtiendo Funciones a Clases

En React JS tenemos la posibilidad de crear nuestras funciones como clases. Ya que si bien la forma más fácil de crear un componente es a través de una función, al crearlo como una clase tendremos la ventaja de que contaremos con algunas otra features que no poseemos si nuestro componente es una función. Lo cual nos permite cierta flexibilidad y además no olvidemos de que nuestro código quedará mucho más prolijo.

Veamos los pasos necesarios para pasar de una Función a una Clase.

Básicamente para poder realizar la conversión necesitaremos seguir cinco simples pasos.

1. Crear una clase ES6 con el mismo nombre de la función, pero que a su vez extienda de React.Component.
2. A dicha clase le agregaremos un método vacío llamado render().
3. Movemos el cuerpo de nuestra función al método render() que habíamos creado en el punto 2.
4. Si en nuestra función utilizábamos prop como parámetro, entonces, necesitaremos agregarle this al comienzo cuando nos encontramos utilizándolo dentro de la clase.
5. Y por supuesto, eliminaremos la función que teníamos antes declarada para reemplazarla por la nueva clase creada.

Veamos un ejemplo de una función simple y su clase.

function Saludar(props) {
  return (
    <div>
      <h1>Hola, {props.name}!</h1>
    </div>
  );
}

class Saludar extends React.Component {
  render() {
    return (
      <div>
        <h1>Hola, {this.props.name}!</h1>
      </div>
    );
  }
}

Como vemos, en un principio teníamos una función que recibía un solo parámetro, en el cual tenemos todas sus propiedades y retornaba un elemento.

Ahora bien, cuando la convertimos a una clase, dicho parámetro desaparece, aunque sí lo podemos utilizar. Pero ya veremos más adelante cuales son las ventajas de realizar un componente como una clase, y qué otras features podemos utilizar en estos casos.

Ventajas y features de componentes en forma de clases

Un ejemplo y caso sencillo es que podemos nosotros definir cual será el valor de una propiedad de nuestro componente y no esperar que el usuario la ingrese como veníamos haciendo. Para ello podemos modificar desde nuestro constructor directamente el valor y evitar tener que pasarlo por parámetros.

Un ejemplo sería para el caso es:

class Saludar extends React.Component {

  constructor(props) {
    super(props);
    this.state = {name: "Guiadev"};
  }

  render() {
    return (
      <div>
        <h1>Hola, {this.state.name}!</h1>
      </div>
    );
  }
}


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

Notemos que ahora, cuando realizamos el ReactDOM.render, no le estamos pasando al componente ningún valor, sino que directamente él mismo sabrá por su constructor que debe mostrar «Guiadev«.

Notaremos además, que en diferencia del ejemplo anterior, aquí no estamos utilizando «this.props» sino «this.state«. State es muy similar a props, pero con la diferencia de que es totalmente controlado por el componente mismo y además es privado.

Es por ello que en este caso no le indicamos cual será el valor al realizar el render, sino que directamente dentro del constructor.

Retomando el comentario de que el crear un componente en una clase en vez de una función añade features que podemos utilizar, hay dos en específico que son bastante interesante. Estos métodos los podemos utilizar en nuestras clases y se podrían clasificar como «especiales» debido a que siempre se correrán en ciertas ocasiones.

• componentDidMount() : Será activado cuando el componente ha sido renderizado en el DOM.
• componentWillUnmount() : Será activado si el componente es removido del DOM.

Estos métodos no siempre serán relevantes para nuestras clases, pero hay en casos en los que deseamos realizar ciertas acciones luego de que un componente es mostrado o bien liberar memoria si el componente es eliminado, en el cual nos serán de ayuda.

Por otro lado, algo también muy importante de contar con clases, es la posibilidad de encapsulamiento. Es muy importante tener esto en cuenta y jamás modificar por ejemplo la variable «state» directamente. Ésta es una variable privada, y en todo caso siempre debemos modificarla a través de un setter y recibirla a través de un getter, nunca directamente.

Renderizando componentes con condicionales

Otro tema interesante en React JS es cuando deseas verificar primero algo, antes de decidir qué componente debería tu aplicación mostrar. Esto es algo que por supuesto React JS nos permite y que a su vez, no es nada difícil. De hecho, funciona básicamente igual que en cualquier otro lenguaje.

Veamos como realizar un condicional dentro de un componente.

Supongamos que contamos con dos componentes diferentes y deseamos mostrar uno u otro dependiendo de si por ejemplo el usuario tiene o no acceso a cierta sección.

function AccesoAutorizado(props) {
  return <h1>Bienvenido!</h1>;
}

function AccesoNoAutorizado(props) {
  return <h1>Acceso no autorizado!!</h1>;
}

function Acceder(props) {
  const tieneAcceso = props.tieneAcceso;
  if (tieneAcceso) {
    return <AccesoAutorizado />;
  }
  return <AccesoNoAutorizado />;
}

ReactDOM.render(
  <Acceder tieneAcceso={false} />,
  document.getElementById('root')
);

En este caso, según como tengamos iniciada la variable «tieneAcceso» veremos un componente diferente, con un mensaje diferente.

Ejemplo si colocamos false.

Por lo contrario si lo asignamos como true

Conclusión

Estos son solo algunos ejemplo de cosas que podemos realizar con React JS, así como también algunas de las formas.

Pero sin lugar a dudas con esta librería las opciones son abundantes. Recordemos igualmente que hay veces en las cuales por más que necesitemos algo sencillo, y que React nos lo permita, como en los ejemplo de los componentes como funciones, siempre pensando a futuro, es mejor programar modulado y de la forma correcta.

Muchas veces no nos costará nada realizar una Clase directamente con sus módulos, en vez de una función.

Además, lo bueno de esto, no es solamente que tendrá otras features para utilizar, sino que también podremos utilizarla en futuros proyectos y no solamente como módulo dentro del actual.