Tutorial ReactJS. React mu perita. Aplicación básica paso a paso. Aplicación SINO.
En otro artículo ya explicaba cómo instalar el entorno y librerías de ReactJS y hacer una aplicación sencilla desde cero y en este vamos a crear otra aplicación paso a paso teniendo en cuenta que hemos instalado ya en nuestro equipo la librería.
Nuestra aplicación tendrá el siguiente aspecto:
Paso 0: Creación de la aplicación base.
$cd godos
$npm start
Ahora llega el momento de modificar el archivo src/index.js colocando la siguiente línea en la cabecera (en la zona de los importa). La siguiente línea servirá para poder utilizar bootstrap en nuestra aplicación ReactJS. Si no importamos la librería bootstrap, aunque utilicemos componentes reactstrap, estos no van a heredar el estilo bootstrap con lo cual nos quedará un interfaz «feo».
Una vez importada la librería de bootstrap crearemos un componente bootstrap para ver si todo ha funcionado correctamente. Para ello modifica el archivo src/App.js con el siguiente código:
Componente inicial App
Si tu aplicación muestra un botón como el siguiente parece que vas por buen camino:
PASO 1. INFRAESTRUCTURA DE LA APLICACIÓN
Elige dos fotos que te gusten una para Sí y otra para No y colócalas en la carpeta public/assets/images de tu proyecto. En mi caso las fotografías tienen por nombre yes.png y no.png. En el caso de que tus fotografías tengan un nombre diferente deberás tenerlo en cuenta.
Paso 2. Creando el componente Sino y el componente básico App
El primer paso que vamos a realizar es cambiar un poco el componente App que creamos anteriormente. Lo que hicimos anteriormente era crear solamente un botón y ahora el objetivo será modificar el componente para que llame a otro componente nuevo que vamos a crear de nombre Sino.
Componente App
El código del componente modificado App es el siguiente:
Componente App inicial
A continuación vamos a comentar algunas de las líneas de este componente:
En las dos líneas anteriores se importan:
- Los objetos React necesarios para poder utilizar un class component.
- El componente Sino el cual lo hemos ubicado en el directorio componentes del directorio src.
Como se puede ver en el código anterior, en él se hace la llamada al componente Sino y le le pasan una serie de props (parámetros o propiedades) como son imagen, titulo, textobotonSI y textobotonNO. Estas props podrán ser utilizadas en el componente invocándolas como props.imagen, props.titulo, etc.
Componente Sino
LLegó el momento de crear el nuevo componente Sino el cual se ubicará en la carpeta src/componentes. Esto es importante puesto que si no referenciamos bien la ubicación podemos tener problemas de compilación en nuestro proyecto.
El código del componente es el siguiente:
Componente Sino inicial
Comentemos algunas líneas del código anterior.
En las líneas de código anterior se puede observar cómo se importan los componentes bootstrap reactstrap que vamos a utilizar en el componente actual Sino. Esta línea es necesaria para poder utilizar dichos componentes en la aplicación.
En la línea anterior se puede observar cómo se utiliza el componente CardImg y en la misma llamada utilizamos las props para asignarle la imagen que queremos y un texto alternativo. Este último en principio estaría a null porque no se lo pasamos desde el componente principal App pero te dejo a tí que completes el código que falta con esa nueva prop.
El código anterior es del componente CardBody (cuerpo del componente Card) en el que dentro de él creamos los botones Si y No de nuestra aplicación.
Paso 3. Aplicación terminada.
En este paso intentaremos terminar la aplicación. Para ello necesitaremos añadir un constructor con su state en el componente App y también crear dos métodos dentro del componente llamados si() y no(). Dichos métodos lo que harán será modificar el estado del componente principal (App). Al pasar esos métodos como props podremos hacer que los hijos ejecuten un método del padre.
Componente App
Este es el nuevo código del componente principal App:
Componente App terminado
Vamos a ir comentando el código de este componente paso a paso:
Como nuestro componente es un class component, hemos decidido almacenar en el estado (state) del componente la imagen, luego en this.state.imagen estará almacenada la imagen que se mostrará en el componente Sino.
Hemos creado dos métodos muy sencillos (si y no) para que modifiquen la imagen contenida en el state de nuestra aplicación. Para modificar el estado se necesita utilizar la función setState(), en caso contrario nuestra aplicación puede no funcionar correctamente y en cualquier caso, react se quejará de este hecho mostrando varios mensajes por consola.
En la línea anterior se puede ver cómo se utiliza el state del componente para enviarle una prop al componente Sino. Anteriormente se le mandaba la imagen como un mero string pero ahora utilizo el state del componente para enviársela. Una forma más elegante de manejar la información en este componente.
Otra cosa que llama la atención es el paso de funciones (callback) como props. Al enviar una función, cuando en el componente sino hagamos click sobre un botón estaremos invocando la función del componente padre y de esa manera estamos comunicando componente hijo con componente padre.
Pasemos ahora a ver cómo funciona el componente Sino:
Componente Sino
Componente Sino terminado
En la imagen anterior aparece el componente Sino terminado y básicamente el cambio es mínimo. Lo único que se ha incluido es la funcionalidad de los botones Si y No. A continuación se comentará dicho código:
En el código anterior se puede observar cómo el evento onClick se enlaza con la función onClickSI() que se pasa mediante props. Si echas un vistazo al componente anterior, en onClickSI() estaba pasando la función si() del componente padre, luego cuando el usuario haga click sobre este botón se estará llamando a la función si() del componente App.
Lo mismo se hace con el otro botón (el botón no) de nuestra aplicación. El otro botón hará la llamada a la función no() del componente padre y de esa manera iremos cambiando la imagen para se muestre una u otra dependiendo de la llamada realizada.
Eso es todo. Te aconsejamos que ejecutes la aplicación y que estudies los componentes y su funcionamiento con detenimiento.