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;