Minipágina React

Yo tengo varias cosas.

En public tengo una carpeta img con diferentes imágenes. Si dentro de mi programa pongo ruta absoluta ‘/img/…’ React va a buscar esa imagen en la carpeta.

Tengo mi App como siempre, que en general es el punto de entrada de cualquier web.

import './App.css'; // Estilos propios del componente 
import Tarjeta from './componentes/Tarjeta'; // Importo la tarjeta


function App() {

  // Devuelvo un div con las tarjetas que quiera
  // la Tarjeta tiene unas propiedades que se pasan al componente
  // Pasamos el nombre y la url de la imagen
  return (
    <div className="App"> 
      <Tarjeta nombre="Einstein" url='/img/einstein.jpg' />
    </div>
  );
}

export default App;

El componente ‘Tarjeta’ es un componente compuesto, importa otros componentes:

import Foto from './Foto'; // Importo Foto
import Cabecera from './Cabecera'; // Importo Cabecera

// Tarjeta le paso las propiedades nombre y url
// Esto va dentro de props pero uso destructuring
function Tarjeta({nombre, url}) {
    // En el div es donde pongo la clase, porque es elemento html
    // Uso los componentes Cabecera y Foto
    return (
        <div className="tarjeta">
            <Cabecera nombre={nombre}/>
            <Foto  descripcion={nombre} url={url}/>
        </div>
    )
}

export default Tarjeta;

Cabecera.js

function Cabecera({nombre}) {
    return <h1>{nombre}</h1>;
}

export default Cabecera;

Fotos.js

function Foto({url,descripcion}) {
    return <img className="foto" src={url} alt={descripcion} />
}

export default Foto;