Aprende react

[ivancas84]

Crear y anidar componentes Estilos Mostrar datos

[ivancas84]

Crear y anidar componentes

function MyButton() {
  return (
    <button>
      Soy un botón
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Bienvenido a mi aplicación</h1>
      <MyButton />
    </div>
  );
}

JSX: Envolver en <div></div> o <></>

[ivancas84]

Estilos

<img className="avatar" />

[ivancas84]

Mostrar datos

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Foto de ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}