Introducción a React

¿Qué es React?

React nació como una biblioteca de JavaScript para desarrollar interfaces de usuario. Fue creado y utilizado por Facebook hasta que en 2013 fue lanzado al público.

Es un framework para la realización de aplicaciones Front.

Utiliza el lenguaje jsx, que es una mezcla entre JavaScript y HTML.

Es una Single Page Application (SPA). Esto quiere decir que es una aplicación de una sola página (por defecto index.html) en la que vas dibujando vistas y añadiendo funcionalidades a través de distintos componentes.

No existe la navegación como tal, pero se crea este efecto navegando entre componentes.

¿Qué son los componentes?

Son elementos independientes a los que se les indica cómo tienen que visualizarse y cómo tienen que comportarse. En su interior hay HTML y JavaScript combinado para trabajar con vista y controlador en un mismo elemento.

¿Qué necesito para trabajar con React?

Node para la gestión de paquetes, crear una aplicación base de React y agregarle componentes extra, como Bootstrap o Routing para la navegación.

Descarga Node en https://nodejs.org/es/

La consola de comandos, para comunicarnos con node. Para abrirla en Windows :

Inicio –> buscar (podemos buscar cmd) –> Simbolo del sistema

Un editor de código para trabajar con la aplicación React que creemos con node.

En este ejemplo, Visual Studio Code.

Descarga en https://code.visualstudio.com/

Conocimientos previos de HTML y JavaScript.

Primera aplicación React

Instalar

Lo primero que necesitaremos es tener nuestro entorno de trabajo. Si no lo tienes sigue los pasos que explico en ¿Qué necesitamos para trabajar con React?

Abrimos la consola de comandos y nos situamos en la carpeta en la que queramos crear el proyecto. Por ejemplo, si yo quiero crearlo en el escritorio introduzco cd Desktop:

Le decimos a node que cree nuestra aplicación con estas instrucciones:

npx create-react-app nombreapp

Node package manager es el sistema de gestión de paquetes para node, a través de npm node busca el paquete y lo instala con el nombre del proyecto. Además de crear la aplicación, habrá otros componentes que nos deberemos instalar con npm para poder usarlos.

Una vez nos diga ‘happy hacking’ sabremos que el proyecto se ha creado.

Y desde aquí mismo entraremos en el proyecto. Sin salir de la carpeta introducimos ‘code .’ y se abrirá el editor de código Visual Studio Code para empezar a trabajar con nuestra aplicación.

No cierres la consola de comandos, ahora volveremos a usarla.

Ejecutar

Ya estamos dentro de nuestra aplicación con el editor de código.

Volvemos a la consola de comandos y le decimos a node que ejecute nuestra aplicación para ver su aspecto en nuestro explorador web.

Entramos en la carpeta de la nueva aplicacion con cd nombreapp.

Introducimos npm start.

Y esto es lo que veremos:

Es la plantilla por defecto de React, se encuentra en el componente App, dentro de la carpeta src de nuestra aplicación, donde iremos guardando nuestros componentes.

App se importa en index.html, que se encuentra dentro de la carpeta public.

index.html

En index.html se encuentran las etiquetas <!DOCTYPE html> <head> y <body>, esa es nuestra página principal.

Veremos que dentro de <body> hay un <div> con un id=”root”, y nada mas.

Porque desde Index.js, que está dentro de src, hay un método de React que llama a esa id root a través de document.getElementById(‘root’) y renderiza el componente principal, app.js, que contiene esa plantilla que hemos visto en el explorador, dentro del div de nuestra pagina index.html.

Entonces en el div de index.html se encuentra App, que a su vez tiene un div donde nosotros podremos ir añadiendo componentes nuevos que vayamos creando, por ejemplo, el Menú, o los diversos contenidos y, en consecuencia, también aparecerán en index.html.

Por esto React es una Single Page Application. Todo ocurre en el index.

Entonces index.html contiene el componente App y por eso esta plantilla es lo primero que aparece.

App.js

Esta plantilla predeterminada la quitaremos y dejaremos la página en blanco para empezar nuestro proyecto de cero.

Iremos a App, borraremos la plantilla y aparecerá una página en blanco.

Entramos en App.js

Y borramos la plantilla, todo menos el div que lo contiene. (la clase si la podemos borrar)

En React se trabaja dentro de una etiqueta contenedora:

< React.Fragment ></React.Fragment>

Puedes utilizar <></> pero no soporta llaves o atributos.

Dentro de esa etiqueta podríamos incluir nuestros componentes directamente, si quisiésemos que apareciesen nada más cargar la página.

Nosotros solo queremos verlos cuando hagamos click en su apartado del menú, entonces solo incluiremos el menú con su routing, ya que será a través de routing que app pintará los demás componentes.

Como no los hemos creado, volveremos más tarde para importarlos y añadirlos.

Cerraremos la pestaña del navegador de momento, y finalizaremos la ejecución de la app volviendo a la consola de comandos y pulsando contol+c

Introducimos ‘s’ como sí.

Vamos a crear una aplicación sencilla con una página Nosotros y otra de información de contacto.

Al iniciar, aparecerá un menú con esas dos opciones.

Bootstrap

Lo primero que haremos será instalar Bootstrap con npm para usar sus clases.

Volvemos a la consola y dentro de la carpeta de la aplicación introducimos:

npm install-react-bootstrap Bootstrap

Además de haberlo instalado, lo agregaremos a index.js

import ‘bootstrap/dist/css/bootstrap.min.css’;

Nosotros.js

Vamos a crear nuestro primer componente, que será nuestra página Nosotros.

Será una página sencilla con una foto y un texto breve.

Dentro de src nos crearemos una carpeta para que contenga nuestros componentes, la llamaremos components.

Dentro de esta carpeta crearemos un archivo y lo llamaremos como queramos que se llame el componente (suele hacerse con la primera letra mayúscula) añadiendo la extensión .js, en este caso, Nosotros.js

Nos aparecerá una página en blanco.

Los componentes se representan como clases que heredan de la clase Component .

En la primera línea de un componente, importaremos React, para usarlo, y Component para heredar de él.

Deberemos crear una función y especificar el método render que define cuál será el contenido.

Dentro del div, dibujaremos nuestro HTML.

Yo he dibujado una foto y un par de líneas para el ejemplo.

Hay una cosa muy importante que tenemos que tener en cuenta y es que en React no se llama a las clases con el atributo class sino que cambiaremos ese atributo por className.

Y para los estilos usaremos esta sintaxis en el atributo:

style={{width: «18rem»}}

Contacto.js

Seguimos los pasos que hemos seguido para crear nuestro componente Nosotros, y esta vez en el div de la vista dibujamos unos datos de contacto.

Router.js

Queremos crear un menú que nos lleve a los componentes.

En un enlace, con el atributo href, conseguimos que cuando alguien haga click se vaya a una ruta, pero en Router.js creamos esa ruta y la asociamos a un componente.

Por lo que si no hemos creado la ruta ‘/home’ y no le hemos dicho a la aplicación que esa ruta lleva al componente { Home }, por mucho que en el menú le digamos que si hacen click en Home la ruta es ‘/home’… no va a encontrar esa ruta porque no existe.

Entonces primero crearemos Router.js, y después el menú.

Volvemos a la consola e instalamos el componente react-router-dom

npm install –save react-router-dom

Ahora crearemos, dentro de components, el componente Router.js

Allí importaremos React, nuestros componentes, y las librerías para la navegación

Y las utilizamos para decir: cuando alguien intente ir a esta ruta “/Ruta” pinta este componente { Ruta }.

Y ya tenemos nuestro Router.

Ahora vamos con el menú, y ya estamos acabando.

Menu.js

Creamos el archivo Menu.js, la función, y nuestro div.

Dentro del div he metido una plantilla de Bootstrap

https://getbootstrap.com/docs/4.0/components/navbar/

Y he cambiado los nombres por los de mis componentes y en los atributos href he puesto mis rutas

Para terminar

Recordemos que en index se renderiza app y en app los demás componentes.

Como hemos importado los componentes en Router.js, en app solo importare los componentes que quiera cargar al inicio, que será solo mi menú, además de Router.

Lo importamos, y lo metemos dentro de nuestro <div> para que se genere como un componente más.