Introducción al enfoque de componentes en React

Supongamos que tenemos un sitio web. En este sitio podemos destacar algunos bloques: el encabezado, el contenido, la barra lateral, el pie de página y así sucesivamente. Cada bloque se puede dividir en subbloques más pequeños. Por ejemplo, en el encabezado normalmente se puede distinguir el logotipo, el menú, el bloque de contactos, etc.

En React, cada uno de estos bloques se denomina componente. Cada componente puede contener dentro de sí componentes más pequeños, que a su vez contienen otros aún más pequeños y así sucesivamente.

A cada componente en React le corresponde un módulo ES6, ubicado en la carpeta src. El nombre del archivo del módulo se escribe con mayúscula y debe coincidir con la función que está ubicada en el código de este módulo.

Por ejemplo, el archivo llamado App.js debe contener en su interior la función App:

import React from 'react';

function App() {
	// código del componente
}

export default App;

Uno de los componentes debe ser el principal - aquel al que se añaden los demás componentes. En React, por defecto, este componente será el componente App. A este componente se conectarán otros componentes. Cómo se hace esto - lo analizaremos más adelante en el tutorial.