Introduciendo React

Veamos los primeros conceptos

¿Qué es React?

React es simplemente una librería Javascript para construir interfaces de usuario (UI), desarrollada y mantenida por Facebook, pero Open Source. Con UI (User Interface) nos referimos a todo lo que ve el usuario de una aplicación web, ósea, el Header, el menu, el cuerpo del sitio, el footer, los botones, imágenes, tablas, etc.

Características de React

Declarativo:

React es Declarativo, lo que lo hace más sencillo de desarrollar y que el código que escribimos sea más sencillo de entender. Podríamos tener el siguiente árbol de componentes, y fácilmente podemos leerlo y entender que realiza nuestra aplicación:

<MyApp>
    <Header>
        <Menu />
    </Header>
    <Main>
        <Products />
    </Main>
    <Footer />
</MyApp>

Basado en Componentes:

React está basado en el desarrollo de componentes, pequeños bloques que se pueden componer para poder lograr interfaces de usuario más complejas.

Podemos pensar en nuestros componentes (Header, Menu, Footer) como en fichas de Lego. En nuestra aplicación vamos a tener que conectarlos unos con otros en el orden que corresponda. Los componentes, como las fichas del Lego, pueden ser más grandes o más chicos, dependiendo de la complejidad de lo que resuelvan. Siempre vamos a preferir crear componentes chicos y simples, ya que así serán mas fáciles de mantener. Los componentes son independientes, ósea, cada uno funciona por si solo, pero tambien deben ser fáciles de usar y conectar con otros componentes.

Construir una App en React, es como jugar con Legos

Otras características:

• Se puede agregar a aplicaciones existentes de forma sencilla.

• Creada (y mantenida) por Facebook, y utilizada en sus propios productos.

• Grandes jugadores la utilizan, y aportan a la comunidad y el ecosistema: MercadoLibre, Netflix, Apple, Instagram, Paypal, etc.

• Cuenta con una gran comunidad de desarrolladores.

• Permite la creación de aplicaciones complejas, con UIs dinámicas y que manejan muchos datos.

• Tiene un gran ecosistema, que brinda muchas librerías y frameworks auxiliares para utilizar en conjunto con React:

  • Redux para manejo de Estado.

  • React Router para el ruteo de nuestra aplicación.

  • NextJS para crear proyectos de React que ya incluyan server side rendering.

  • React Native para crear aplicaciones nativas en Android e iOS usando React.

  • Etc.