Trifulcas

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;

App.js

import logo from './logo.svg';
import './App.css';
import Foto from './componentes/Foto';

function App() {
  return (
    <div className="App">
     <Foto descripcion="Einstein" url="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Albert_Einstein_Head.jpg/330px-Albert_Einstein_Head.jpg"/>
     <Foto descripcion="Marie Curie" url="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbLv9v4IWJ5tPUsHQwLsWLIPhIpznuTZGsNBfoHqXYNLxPSLHf"/>
    </div>
  );
}

export default App;

/componentes/Foto.js

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

export default Foto;

import logo from './logo.svg';
import './App.css';
const Saludo = ({nombre,apellidos="",edad=0}) => {
  console.log(nombre,apellidos,edad)
  return <h1>Hola {nombre+" "+apellidos}, qué tal?</h1>;
}
const gestionarClick = (evt) => {
  
  console.log("clickado",evt);
}
const Despedida = () => {
  let tipo = "compañero"
  return (
    <>
      <h2  onClick={gestionarClick} className='destacado'>Adios {tipo.toUpperCase()}</h2>
      <p >Nos vemos otro día</p>
      <br />
      <img onClick={gestionarClick} className='App-logo' src={logo} />
    </>
  );
}
function App() {
  return (
    <div className="App">
      <Saludo nombre="Juan" apellidos="Pérez" edad="30" />
      <Despedida />
      <Saludo nombre="Ana" />
    </div>
  );
}

export default App;

const Saludo = (props) => {
  console.log("Hola que tal")
  return <h1>Hola {props.nombre}, qué tal?</h1>;
}
const gestionarClick = () => {
  console.log("clickado");
}
const Despedida = () => {
  let tipo = "compañero"
  return (
    <>
      <h2 className='destacado'>Adios {tipo.toUpperCase()}</h2>
      <p onClick={gestionarClick}>Nos vemos otro día</p>
      <br />
      <img className='App-logo' src={logo} />
    </>
  );
}
function App() {
  return (
    <div className="App">
      <Saludo nombre="Juan" />
      <Despedida />
      <Saludo nombre="Ana" />
    </div>
  );
}

utiliades.js

function ordenar(a, b) {
    if (a > b) {
        return [b, a];
    } else {
        return [a, b];
    }
}

function ordenarT(a, b) {
    return a > b ? [b, a] : [a, b];
}

function iniciales(nombre,apellidos){
    return [nombre.at(0)+apellidos.at(0),apellidos.at(0)+nombre.at(0)]
}

export {ordenar,ordenarT,iniciales}

test.js

import { ordenar,iniciales } from "./utilidades.js";

let [a,b]=ordenar(1,8);

console.log(a,b)

let [ini1,ini2]=iniciales("Juan","Pérez");
console.log(ini1)
console.log(ini2)