Introducción a los componentes de React

Echemos un vistazo a cualquier sitio web. Está compuesto por un conjunto de bloques independientes: header, barras laterales, footer, contenido. Podemos decir que estos bloques son componentes en el sentido en que se entiende en React.

Si miramos el mismo header, ¿qué se puede distinguir en él? Un bloque con el logotipo, un bloque de contactos, un bloque con el menú y así sucesivamente. Es decir, los componentes pueden consistir en otros subcomponentes.

De manera análoga es como funciona en React: el sitio web se construye a partir de un conjunto de componentes, que a su vez pueden contener otros componentes.

En React, cada componente representa un módulo separado. Normalmente el desarrollo comienza con el componente principal App, que contiene dentro los demás.

Vamos a practicar creando nuevos componentes.

Supongamos que, por ejemplo, necesitamos un componente que muestre los datos de un producto. Para ello, necesitamos crear en la carpeta de trabajo un archivo Product.js y agregar en él el siguiente código:

import React from 'react';

function Product() {
	return <p>
		product
	</p>;
}

export default Product;

Como puedes ver, actualmente nuestro componente devuelve un párrafo con texto. En las próximas lecciones ajustaremos este texto para que devuelva los datos del producto, formateados en el maquetado que necesitamos. Pero por ahora, para calentar, dejaremos simplemente un párrafo con un texto de ejemplo.

Ahora mostremos nuestro componente creado en el componente App. Supongamos que actualmente nuestro App tiene el siguiente código:

import React from 'react';

function App() {
	return <div>
		text
	</div>;
}

export default App;

Primero, necesitamos importar el componente de producto que creamos:

import React from 'react';
import Product from './Product'; // importamos el producto

function App() {
	return <div>
		text
	</div>;
}

export default App;

Después de importarlo, dentro del componente App se puede usar el componente Product.