Ownership

Frameworks JS: React

Creada por Facebook y de código abierto, React es una librería que ha ganado mucha popularidad en poco tiempo. Se caracteriza por el desarrollo de grandes aplicaciones web con un tráfico alto de usuarios, por el manejo dinámico de datos y por estar focalizada en el desarrollo de interfaces de usuario. Utiliza JSX como plantilla, está muy bien documentada y su aprendizaje es muy rápido debido a un diseño simple.

React cuenta con un algoritmo muy eficiente a la hora de apreciar las diferencias entre la representación de la página nueva y la que actualmente está cargada. De esta forma, gracias a lo que se le llama DOM virtual cargado en la memoria, se puede apreciar cualquier cambio sin tener que renderizar todo el DOM, lo que lo convierte en una ventaja con respecto a las tradicionales páginas en JS que actualiza todos los elementos de manera individual.  A continuación, la nueva representación de la página viene traducida con los cambios producidos en los únicos elementos que han sufrido modificaciones en el DOM. Característica muy potente y transparente de cara al usuario. 

Es cierto que para comenzar con React se debe tener cierta familiaridad con HTML y JavaScript, aunque no es del todo necesario.  El conocimiento de otros lenguajes de programación facilitará en gran medida su aprendizaje.

<html>
<head>
<script src="https://.../react.development.js"></script>
<script src="https://.../react-dom.development.js"></script>
<script src="https://.../babel.min.js"></script>
</head>
<body>
    <div id="contenedor"></div>
    <script type="text/babel">
    /*

Aquí va nuestro desarrollo en React

    */    

    </script>
</body>
</html>

Lo primero que se debe hacer es utilizar la instalación más sencilla posible: un HTML en el cual vamos a importar, mediante las etiquetas <script>, la librería de React, la de ReactDOM -que permite interactuar con el DOM- y la librería de Babel para traducir cualquier JSX que generemos a JS para que el navegador pueda entenderlo.

JSX (JavaScript XML) no es más que la sintaxis de JS que utiliza React. En pocas palabras: sirve para escribir etiquetas de HTML dentro de JS que posteriormente serán traducidas para que el navegador las “entienda”. De esta forma, React elimina los archivos de HTML ya que estas etiquetas se renderizarán directamente dentro de nuestro JS. Por ejemplo: 

React.createElement(‘a’, {href: ‘https://...’}, ‘Hola!’) 

en vez de 

<a href=”https://...”>Hola!</a>

Aunque hemos visto un ejemplo muy simple, lo recomendable -y casi convertido en norma- es escribir todos los componentes en JSX. Al principio será algo dificultoso, pero en un corto periodo de tiempo descubriremos que hace la vida más fácil para leer y escribir los componentes de una forma mucho más rápida. 

Una vez que hemos creado el esqueleto para escribir el primer ‘hola mundo’ es necesario definir un componente. En React todo funciona con componentes que, normalmente, son muy parecidos a las clases de JS. Para crear uno, tan solo debemos extenderlo de la clase React-Component. 

class Hola extends React.Component {
    render() {
        return <h1>Hola mundo!</h1>;
    }
}

Dentro de la clase creada ya se puede definir cualquier método. En el ejemplo, solo se ha añadido el método render() utilizado para devolver una descripción de lo que queremos que React maquete en nuestra página web. Para que nuestro ‘hola mundo’ se muestre en pantalla tan solo tenemos que conectar el código generado con la entrada de nuestro HTML 

ReactDOM.render(
    <Hola />, 
    document.getElementById("contenedor")
);

De esta forma, le estamos diciendo a React que actualice el componente ‘Hola’ dentro del DOM que tiene el id:contenedor definido previamente. Así de simple. El resultado que mostraría el navegador sería nuestro ‘hola mundo’ enfatizado con las etiquetas <h1>. Código final. 

<html>
<head>
<script src=”https://…/react.development.js”></script>
<script src=”https://…/react-dom.development.js”></script>
<script src=”https://…/babel.min.js”></script>
</head>
<body>
    <div id=”contenedor”></div>
    <script type=”text/babel”>

class Hola extends React.Component {
    render() {
        return <h1>Hola mundo!</h1>;
    }
}

  ReactDOM.render(<Hola />, document.getElementById(“contenedor”)
);
    </script>
</body>
</html>

Un ejemplo muy sencillo pero que ilustra todo el potencial que React pone a nuestra disposición. Simplifica la estructura y añade toda la funcionalidad de trabajar con clases en nuestro código JS de forma que nuestros desarrollos son más dinámicos y rápidos. 

Por último Facebook, la empresa que desarrolló React, utiliza esta librería para la producción de sus propios componentes. Un hecho que añade una gran ventaja ya que su mantenimiento es realizado por una de las empresas más grandes del mercado. Una garantía que asegura su continuidad en un futuro y que nos brinda soporte a la hora de cualquier problema. Sin duda, características que ponen a React en el centro de mira a la hora de elegir una librería para nuestra parte front.