Creación de un componente estático de React

Continuemos con el archivo caja.jsx del capítulo anterior.

Crear un componente funcional en React

Para crear un componente funcional en React, vamos a escribir una función, con una sintaxis de JSX.

import React from 'react';
import '../estilos/caja.css';

function Cajas() {
return(
	<div className='contenedorTexto'>
	<img 
		className='contenedorImagen' 
		src={require('../imagenes/lago.jpg')} 
		alt='Foto de un lago en la montaña' 
		/>
	<h5 className='contenedorTitulo'>Viajes de montaña</h5>
	<p className='contenedorParrafo'>Les presentamos una gran 
		variedad de entornos espectaculares de montaña. Le preparamos todo 
		para que pueda pasar sus vacaciones en la montaña.</p>
	<button className='botonMasInfo'>Ver más información</button>
	</div>
);
}

Con esto, ya tenemos creada una estructura básica de los elementos que van a formar las cajas.
Por el momento, de esta forma estaremos utilizando un contenido estático. Esto va a desperdiciar todo el sentido que tiene la creación de un contenedor.
Sin embargo, lo modificaremos más adelante para poder reutilizar este componente funcional tantas veces como queramos, con diferente texto e imagen, sin tener que repetir de nuevo toda esta estructura.
No obstante, primero quiero que llegues a cargar esto en el navegador.

De momento no se muestra nada. Hay que realizar una serie de acciones para conseguirlo.

Si te fijas, en JSX, estamos utilizando etiquetas html y sus atributos, si has realizado el curso de JavaScript conmigo, recordarás que en JS no podíamos utilizar el atributo html class por ser una palabra reservada del lenguaje. Aquí igual, utilizamos className para utilizar el atributo class de html.

Las etiquetas sin cierre, como la de imagen, las tenemos que escribir como hacíamos en XHTML. Si no sabes XHTML, en la normativa de este, se especifica que los elementos sin etiqueta de cierre, deben cerrarse con una barra, tal y como hago en el elemento img. Como curiosidad, en html 5 se ha descartado esta obligación y es opcional.

Otra cosa a tener en cuenta, es que las imágenes, puesto que son archivos, hay que importarlos también. Por lo tanto, necesitamos o bien hacer un import con la ruta de la imagen o utilizar un require() con la ruta de la imagen.

Además, el código JavaScript que escribamos en html, se tiene que encerrar entre unas llaves, por ese motivo, las lleva el require().

Mostrar componentes en la aplicación de React

Si inspeccionamos la página, veremos que el contenedor root, raíz (el que se utiliza para mostrar la aplicación web), está con un <div> vacío. Este div con class "App", es en el que vamos a mostrar todo el contenido de la aplicación. Pues bien, hay que ver como decirle a React que muestre nuestro contenido ahí.

Ves al archivo App.js en el componente App(), que es el principal de la aplicación, escribe lo que quieres que se cargue en el documento.

Para llamar a un componente, solo tenemos que llamarlo con una etiqueta, como un elemento HTML más.

 App.js 

import './App.css';

function App() {
return (
	<div className="App">
	<Cajas />
	</div>
);
}

export default App;

Los componentes que hemos creado nosotros, como Cajas(), se deben escribir en mayúsculas. Esto hace que se diferencien de los elementos html que siempre van en minúsculas.

Esto todavía no es suficiente para mostrar el componente. Hay que hacer la importación del componente dentro de este mismo archivo, para poder utilizarlo. Nuestros componentes funcionan como otras bibliotecas. Importándolos, conseguimos dar acceso al código en el documento donde se realiza dicha importación.

Por cierto, los archivos .jsx que importes, no hace falta que les pongas la extensión. React ya los reconoce. En cambio, si son de otro tipo, como los CSS, les tienes que poner la extensión obligatoriamente para que no lo tome como un archivo .jsx.

 App.js 

import './App.css';
import Cajas from './componentes/caja.jsx'

function App() {
return (
	<div className="App">
	<Cajas />
	</div>
);
}

export default App;

Realizar exportaciones en React

Nos falta una cosa más, realizar la exportación del componente. Esto lo haremos en su propio archivo. Esta exportación, va a permitir importar el archivo fuera de este. En este caso, lo necesitamos, ya que vamos a necesitar la importación del paso anterior.

 React JSX 

import React from 'react';
import "../estilos/caja.css";

function Cajas() {
return(
	<div className='contenedorTexto'>
	<img 
		className='contenedorImagen' 
		src={require('../imagenes/lago.jpg')} 
		alt='Foto de un lago en la montaña' 
		/>
	<h5 className='contenedorTitulo'>Viajes de montaña</h5>
	<p className='contenedorParrafo'>Les presentamos una gran 
		variedad de entornos espectaculares de montaña. Le preparamos todo 
		para que pueda pasar sus vacaciones en la montaña.</p>
	<button className='botonMasInfo'>Ver más información</button>
	</div>
);
}

export default Cajas;

Finalmente, importamos en App.js el archivo con el componente, para que se pueda acceder a él.

import logo from './logo.svg';
import './App.css';
import Cajas from './componentes/caja';

function App() {
return (
	<div className="App">
	<Cajas />
	</div>
);
}

export default App;