Skip to main content

Componentes React - Guía Rápida

Layout y Presentación​

ImagenCompleta​

Imagen de ancho completo con leyenda opcional.

import ImagenCompleta from '@site/src/components/ImagenCompleta';

<ImagenCompleta 
  src={useBaseUrl('/img/foto.svg')} 
  alt="Descripción" 
  leyenda="Texto de la leyenda"
  anchoMax="1200px"  // opcional, default 1200px
/>

LadoALado​

Texto al lado de imagen, responsive (apila en móvil).

import LadoALado from '@site/src/components/LadoALado';

<LadoALado 
  src={useBaseUrl('/img/foto.jpg')} 
  alt="Descripción" 
  width="300px"
  lado="derecha"  // o "izquierda"
  leyenda="Pie de imagen"  // opcional
>
Contenido de texto, listas, ecuaciones...
</LadoALado>

MasInfo​

Sección colapsable con estilo personalizable.

import MasInfo from '@site/src/components/MasInfo';

<MasInfo 
  titulo="Más información"  // default
  color="#66bb6a"  // verde, default
  alto="12px"  // padding, default
  desplegado={false}  // false default, true para abierto
>
Contenido: texto, ecuaciones, imágenes, otros componentes...
</MasInfo>

CollapsibleReferenceSection​

Lista de referencias que cambia de tamaño al hacer clic.

import CollapsibleReferenceSection from '@site/src/components/CollapsibleReferenceSection';

<CollapsibleReferenceSection 
  title="Referencias principales"
  items={[
    "Autor, A. (2020). Título del artículo...",
    "Autor, B. (2021). Otro artículo..."
  ]}
/>

ClickableImage​

Imagen que abre versión ampliada al hacer clic.

import ClickableImage from '@site/src/components/ClickableImage';

<ClickableImage 
  src={useBaseUrl('/img/foto.jpg')} 
  alt="Descripción"
/>

Video​

Incrusta videos de YouTube con responsive automático.

import Video from '@site/src/components/Video';

<Video 
  id="AfsW5lLxOgw" 
  titulo="Flat panel en laboratorio"  // opcional
/>

// Con opciones adicionales
<Video 
  id="POP4Fk947T0" 
  titulo="Thin-layer en invernadero"
  ancho="80%"  // opcional, default 100%
  inicio={30}  // opcional, empieza en segundo 30
/>

Nota: El id es la parte final de la URL de YouTube después de watch?v= o youtu.be/

Interactivos Educativos​

PreguntaQuiz​

Quiz de opción múltiple básico con feedback.

import PreguntaQuiz from '@site/src/components/PreguntaQuiz';

<PreguntaQuiz 
  pregunta="¿Cuál es la ecuación de Beer-Lambert?"
  opciones={[
    "I = I₀ · e^(-k·C·x)",
    "I = I₀ · k · C · x",
    "I = I₀ / (k·C·x)"
  ]}
  correcta={0}  // índice de la respuesta correcta
>
**Explicación:** La ley describe... (se muestra solo si acierta)
</PreguntaQuiz>

PreguntaQuizSarcastico​

Quiz de opción múltiple con mensajes sarcásticos progresivos.

import PreguntaQuizSarcastico from '@site/src/components/PreguntaQuizSarcastico';

<PreguntaQuizSarcastico 
  pregunta="¿Cuál es el valor de μmax?"
  opciones={[
    "0.045 h⁻¹",
    "0.038 h⁻¹",
    "0.052 h⁻¹",
    "0.041 h⁻¹"
  ]}
  correcta={0}
>
**Explicación:** μmax se calcula...
</PreguntaQuizSarcastico>

Comportamiento:

  • Intentos 1-2: Mensajes suaves y alentadores
  • Intentos 3-5: Mensajes sarcásticos
  • Intentos 6+: Mensajes brutalmente honestos
  • Se bloquea al acertar

PreguntaQuizNumerico​

Quiz numérico con opciones aleatorizadas y tolerancia de error.

import PreguntaQuizNumerico from '@site/src/components/PreguntaQuizNumerico';

**Pregunta:** ¿Cuánto vale $\Psi_{CO_2/b}$ cuando la fuente de N es nitrato?

<PreguntaQuizNumerico 
  respuestaCorrecta={1.88}
  cifrasSignificativas={3}
  tolerancia={0.02}  // ±2% por defecto
>
**Explicación:** El coeficiente estequiométrico es...
$$
\Psi_{CO_2/b} = 1.88 \text{ mol CO}_2 / \text{C-mol biomasa}
$$
</PreguntaQuizNumerico>

Características:

  • Genera 4 opciones (1 correcta + 3 incorrectas aleatorias)
  • Al fallar: regenera y baraja opciones (10 seg delay)
  • Mensajes sarcásticos escalados
  • Bloqueo al acertar
  • Pregunta con LaTeX fuera del componente

Calculadoras​

PhotonEnergyCalculator​

Calcula energía de fotones desde longitud de onda.

import PhotonEnergyCalculator from '@site/src/components/PhotonEnergyCalculator';

<PhotonEnergyCalculator />

PhotonFluxCalculator​

Calcula flujo fotónico (dos modos: desde energía o desde fotones).

import PhotonFluxCalculator from '@site/src/components/PhotonFluxCalculator';

<PhotonFluxCalculator />

BiomassCompositionCalculator​

Calcula composición elemental de biomasa.

import BiomassCompositionCalculator from '@site/src/components/BiomassCompositionCalculator';

<BiomassCompositionCalculator />

StoichiometricCoefficientsCalculator​

Calcula coeficientes estequiométricos para reacciones de fotosíntesis.

import StoichiometricCoefficientsCalculator from '@site/src/components/StoichiometricCoefficientsCalculator';

<StoichiometricCoefficientsCalculator />

Notas​

  • Todos los componentes requieren imports en el archivo .mdx
  • useBaseUrl necesario para rutas de imágenes
  • Componentes pueden anidarse (ej: LadoALado dentro de MasInfo)
  • Archivos de versiones antiguas (.v1, .back) son backups, no usar
  • PreguntaQuizNumerico: pregunta va fuera para que LaTeX funcione

Imports típicos​

import useBaseUrl from '@docusaurus/useBaseUrl';
import ImagenCompleta from '@site/src/components/ImagenCompleta';
import LadoALado from '@site/src/components/LadoALado';
import MasInfo from '@site/src/components/MasInfo';
import PreguntaQuiz from '@site/src/components/PreguntaQuiz';
import PreguntaQuizSarcastico from '@site/src/components/PreguntaQuizSarcastico';
import PreguntaQuizNumerico from '@site/src/components/PreguntaQuizNumerico';