reactjsmuperita

ReactJS mu Perita (IX). Componentes en React (I)

Cuando desarrolle una aplicación React tiene que tener en cuenta lo siguiente sobre los componentes:

  • Los interfaces de usuario se compondrán de componentes los cuales son independientes unos de otros.

  • Los componentes son piezas reutilizables, como las piezas de LEGO.

  • Un componente devolverá una serie de elementos los cuales aparecerán en la ventana del navegador.

  • En react se pueden definir diferentes clases o tipos de componentes.

Ten en cuenta lo siguiente:

Los componentes realizados por el programador tienen que tener la primera letra en mayúsculas obligatoriamente. Esos componentes serán compilados con el método React.createElement(……).

Las etiquetas que empiezan por minúsculas se tratarán como etiquetas del DOM.

También hay que tener en cuenta que hay componentes predefinidos.

9.1 Creando un nuevo componente

El objetivo de este ejercicio es crear un primer componente de una aplicación React y actualizar su vista utilizando JSX. Una vez creado el ejercicio el programador sabrá cómo se añaden nuevos componentes a una aplicación React y cómo utilizar JSX para definir las vistas de un componente.

Conceptualmente los componentes son parecidos a las funciones JavaScript. Aceptan parámetros de entrada que React los llama “props”, tienen un estado (state) y devuelven elementos describiendo de forma gráfica lo que debería aparecer en el navegador cuando son invocados.

9.1.1 Añadiendo un nuevo componente llamado Menu

Primero hay que descargar una serie de imágenes (sin copyright) de Internet. Descargue cuatro imágenes una relacionada con el tenis, y otras con el padel, gimnasio y bar. Esas imágenes hay que colocarlas en public/assets/images. Si no existen los directorios habrá que crearlos.

A continuación se crea una nueva carpeta components en la carpeta src y crea un nuevo fichero llamado MenuComponent.js en dicha carpeta.

Añade el siguiente código al fichero MenuComponent.js:

import React, { Component } from 'react';

import { Media } from 'reactstrap';

class Menu extends Component {

   constructor(props) {

       super(props);

       this.state = {

           ofertas: [

               {

                 id: 0,

                 name:'Tenis',

                 image: 'assets/images/tenis.jpeg',

                 description:'Descripción del tenis'                      },

              {

                 id: 1,

                 name:'Padel',

                 image: 'assets/images/padel.jpeg',

                 description:'Descripción del padel'                        },

              {

                 id: 2,

                 name:'Gimnasio',

                 image: 'assets/images/gimnasio.jpeg',

                 description:'Descripción del gimnasio'                        },

              {

                 id: 3,

                 name:'Bar',

                 image: 'assets/images/bar.jpeg',

                 description:'Descripción del bar'                        }

              ],

       };

   }

   render() {

       const menu = this.state.ofertas.map((oferta) => {

           return (

             <div key={oferta.id} className="col-12 mt-5">

               <Media tag="li">

                 <Media left middle>

                     <Media object src={oferta.image} alt={oferta.name} />

                 </Media>

                 <Media body className="ml-5">

                   <Media heading>{oferta.name}</Media>

                   <p>{oferta.description}</p>

                 </Media>

               </Media>

             </div>

           );

       });

       return (

         <div className="container">

           <div className="row">

             <Media list>

                 {menu}

             </Media>

           </div>

         </div>

       );

   }

}

export default Menu;

Ahora abre el fichero App.js y añádele el siguiente código:

. . .

import Menu from ‘./components/MenuComponent’;

. . .

   <Menu />

   . . .

Como no se necesita el contenido del fichero App.css lo que tienes que hacer es acceder al mismo y borrar todo su contenido.

Ya es el momento de ver la aplicación web en el navegador por defecto. El resultado del ejercicio debería ser algo parecido a lo siguiente:

club de tenis

Recurso

Información sobre componentes. En el recurso siguiente se muestra cómo se renderizan los componentes y cómo se utilizan correctamente las props:

https://reactjs.org/docs/components-and-props.html

En el ejercicio anterior se ha visto cómo funciona el estado (state) de un componente pero no las props.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>