React

Pasar del mundo de la programación nativa, principalmente en lenguages Orientados a Objetos al desarrollo Web no es algo excesivamente traumático.

No me refiero al diseño de interfaces Web, HTML, CSS y todo eso, sino a la lógica de cliente. Es decir, básicamente, Javascript.

Hoy en día los navegadores tienen un excelente soporte para Javascript. Además, se ha hecho un gran esfuerzo de estandarización (hasta hace no mucho, el Javascript de, por ejemplo, Firefox tenía muchas diferencias con el que podíamos utilizar para Internet Explorer, el antecesor de Edge). También tenemos a nuestra disposición una cantidad enorme de librerías de todo tipo.

Javascript nació como un lenguaje de scripting sencillo para realizar pequeñas tareas en navegador, como por ejemplo, la validación de datos para formularios. Tiene una sintaxis similar a Java, que era con mucho el lenguaje más usado en todos los ámbitos en aquella época, pero no estaba inicialmente pensado para desarrollo de aplicaciones complejas.

Javascript no tiene un tipado fuerte ni es orientado a objetos. No se ajusta del todo bien a los paradigmas de programación más ‘normales’. Pero con el desarrollo de la Web 2.0, las aplicaciones Web empezaron a cobrar cada vez más importancia y adquirir cada vez más complejidad. Y todo esto hay que hacerlo, claro, con Javascript.

Es cuando se complican los diseños de estas aplicaciones cuando más se evidencian las carencias del lenguaje. El javascript original no ofrece una forma clara de construir módulos o componentes. No es orientado a objetos y para llevar un diseño complejo a un lenguage de estas características hay que adoptar compromisos e implementar soluciones ad-hoc.

Eso es lo que ha pasado en el mundo Javascript. Por supuesto, hay formas de emular cosas como la orientación a objetos o la modularidad con Javascript. Lo que no existe o no existía hasta hace poco es una especificación estandarizada, con lo que han ido apareciendo distintas maneras de hacer lo mismo.

Pero ese no es el tema del artículo. Solamente una pequeña introducción a alguno de los problemas que viene a solucionar React.

React es una librería de Javascript basada en componentes para el desarrollo de interfaces de usuario. Quizá la mayor potencia de React es la capacidad de vincular componentes gráficos con los datos de la aplicación de forma que la propia librería se encarga de actualizar de forma eficiente los componentes gráficos.

Los componentes visuales de React se expresan de forma declarativa, lo que los hace mucho más sencillos de depurar.

React incluye JSX, que es una extensión de Javascript que facilita enormemente la descripción de componentes de interfaz de usuario. El uso de JSX es opcional en React, pero es altamente recomendable.

Básicamente, estas son las características de React, y sus beneficios. En resumen:

React es una libraría Javascript pensada para crear componentes de interfaz de usuario de forma declarativa y solucionar los problemas de actualización del interfaz al modificar los datos de la aplicación. Ofrece además una extensión sintáctica al Javascript estándar llamada JSX, que permite crear elementos de forma similar a la de un lenguaje de marcado

¿Qué aspecto tiene el código creado con React?. Bien, el propósito de este artículo no es el de profundizar en su aprendizaje, pero sí que es útil mostrar algún ejemplo.

Una muestra: éste es el aspecto que tendría una aplicación de tipo “Hola mundo” creada con React:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Ésta sería la declaración de una variable cuyo contenido es un elemento JSX:

const element = <h1>Hello, world!</h1>;

Éste sería el aspecto de un componente React sencillo:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

La propia página Web de React ofrece buena documentación, ejemplos y tutoriales con los que aprender React.

Creo que es una manera muy interesante de construir los interfaces de nuestras aplicaciones Web e integrarlos de forma muy sencilla con la lógica Javascript, puesto que el propio React es una librería Javascript.

¿Y tú? ¿Qué opinas de React? ¿Lo has utilizado? ¿Te parece interesante y potente?

Comparte

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *