React mu perita

Tutorial ReactJS. React mu perita. Aplicación básica paso a paso. Reyes Godos.

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.

$npx create-react-app godos
$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».

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

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

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

Crea  el directorio src/shared/ y dentro de él el fichero datos.js con el siguiente contenido:


export const GODOS = [
{
id:0,
imagen:"assets/images/Leovigildo.jpeg",
nombre:"Leovigildo",
texto:"Vida y obra de Leovigildo."
},
{
id:1,
imagen:"assets/images/Atanagildo.jpeg",
nombre:"Atanagildo",
texto:"Vida y obra de Atanagildo."
},
{
id:2,
imagen:"assets/images/Suintila.jpeg",
nombre:"Suintila",
texto:"Vida y obra de Suintila."
},
{
id:3,
imagen:"assets/images/Recaredo.jpeg",
nombre:"Recaredo",
texto:"Vida y obra de Recaredo"
},
{
id:4,
imagen:"assets/images/Witiza.jpeg",
nombre:"Witiza",
texto:"Vida y obra de Witiza"
},
{
id:5,
imagen:"assets/images/Amalarico.jpeg",
nombre:"Amalarico",
texto:"Vida y obra de Amalarico"
},
{
id:6,
imagen:"assets/images/Recesvinto.jpeg",
nombre:"Recesvinto",
texto:"Vida y obra de Recesvinto."
},
{
id:7,
imagen:"assets/images/Sisebuto.jpeg",
nombre:"Sisebuto",
texto:"Vida y obra de Sisebuto."
},
{
id:8,
imagen:"assets/images/Ervigio.jpeg",
nombre:"Ervigio",
texto:"Vida y obra de Ervigio."
}
];

 

Como puedes observar es una variable JSON array con varios objetos (nueve). Cada uno tendrá información sobre un rey godo. Puedes cambiar el texto de cada rey por su biografía si lo prefieres.

Ahora crea el directorio public/assets/images y coloca una imagen de cada rey godo. Ten en cuenta que tienes que respetar el nombre que hemos incluido en datos.js. Te enseño cómo queda en mi equipo:

PASO 2. CREACIÓN DEL COMPONENTE FLASHCARDS

Ahora es el momento de crear nuestro primer componente. Para ello tendrás que crear el directorio src/componentes/ y crear en él el archivo FlashcardComponent.js con el siguiente código:

FlashcardComponent

Ten en cuenta que los componentes se nombran con su primera letra en mayúscula y los ficheros donde alojas el componente se suelen denominar igual seguido de la palabra «Component».

Para crear el componente me he ayudado del código que proporciona reactstrap en la siguiente URL: Card
El componente anterior es un function component (una función) la cual genera en el interfaz una tarjeta con los datos pasados en las props como parámetro (título, imagen y texto). Estos datos los cogeremos del fichero datos.js que hemos creado previamente.

PASO 3. ADAPTACIÓN DEL COMPONENTE APP Y LLAMADA A FLASHCARD

Lo siguiente que vamos a hacer es probar el nuevo componente Flashcard que hemos creado y para ello desde el componente App vamos a llamarlo de la siguiente manera:

<Flashcard }
imagen={GODOS[0].imagen}
titulo={GODOS[0].nombre}
texto={GODOS[0].texto}
/>);

Como puede verse en el código anterior, al componente Flashcard le pasamos tres «props» como parámetro que son la imagen, el título y el texto del primer rey godo del fichero datos.js.del directorio src/shared/.

Es importante importar el componente Flashcard en nuestro archivo App.js y para ello no olvides poner estas líneas en la parte superior del archivo:

import Flashcard from ‘./componentes/FlashcardComponent’;
import {GODOS} from ‘./shared/datos’;

En la primera línea se importa el componente y en la segunda importamos la variable GODOS del archivo datos.js.

Observa la diferencia entre importar un componente u otro elemento (en este caso una variable). Al importar un componente, en JSX no hace falta ponerlo entre llaves pero si fuese una variable o una simple función sí.

A continuación se muestra una imagen de cómo queda la aplicación (izquierda) y el nuevo código del componente App.


La aplicación ya parece que va adaptándose a lo que finalmente queremos pero todavía nos queda mostrar todos los reyes godos del fichero datos.js. El siguiente paso sería la creación de una función para mostrar todos los reyes en vez de uno solo.

PASO 4. CODIFICACIÓN FINAL DE LA APLICACIÓN

La función que muestra todos los reyes godos en el navegador será la siguiente:

function DisplayGodos(props){
   const losreyes = props.reyes;
   const lista = losreyes.map((rey)=>
   <Flashcardkey={rey.id.toString()}
       imagen={rey.imagen}
       titulo={rey.nombre}
       texto={rey.texto}
    />);
    return(
    <ul>
      {lista}
    </ul>
    );
}

DisplayGodos es una función que recibirá un array con los diferentes reyes godos que tenemos en la aplicación. Utilizando la función map() vamos a recorrer el array y para cada elemento (que lo he llamado rey) lo que vamos a hacer es hacer una llamada al componente Flashcard que previamente hemos creado.

Related posts:

Mi primera aplicación ReactJS. React mu perita.
Tutorial ReactJS. React mu perita. Aplicación básica paso a paso. Aplicación SINO.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

MENU