Curso HTML 16.4 HTML en entornos de plantillas y frameworks (Blade, JSX, etc. a alto nivel)

Punto 16.4: HTML en entornos de plantillas y frameworks

En este apartado veremos cómo se integra el marcado HTML en dos de los entornos más populares: Blade (Laravel) y JSX (React). También haremos una breve mención a Vue.js y Angular para ilustrar las diferencias en el manejo de sintaxis y directivas.

1. Blade (Laravel)

Blade es el sistema de plantillas de Laravel. Permite escribir HTML mezclado con directivas específicas para control de flujo, herencia de plantillas y componentes reutilizables.

• Herencia de plantillas: Permite definir una plantilla base y extenderla.
• Secciones y yield: Definen lugares en la plantilla base donde se inyectará contenido.
• Interpolación de variables: Con {{ $variable }} o sin escapar con {!! $html !!}.
• Directivas de control: @if, @foreach, @switch, etc.
• Componentes: Clases o archivos blade dedicados a piezas reutilizables (<x-componente />).

1.1 Ejemplo de plantilla base y extensión

  
  


  <!-- Cabecera común -->
  <header> 
    <h1>Mi App</h1>
  </header>

  <nav>
    <ul>
      <li><a href='/'>Inicio</a></li>
      <li><a href='/contacto'>Contacto</a></li>
    </ul>
  </nav>

  <main>
    @yield('content')
  </main>

  <footer>Pie de página</footer>

@extends('layouts.app')

@section('title', 'Página de Inicio')

@section('content')
  <h2>Bienvenido, <?= auth()->user()->name ?></h2>
  <p>Este es el contenido principal de la página de inicio.</p>
@endsection

1.2 Control de flujo y escape

@php
  $items = ['manzana','pera','naranja'];
@endphp

<ul>
  @foreach($items as $item)
    <li>{{ $item }}</li>
  @endforeach
</ul>

@if(count($items) > 3)
  <p>Hay muchas frutas.</p>
@else
  <p>Pocas frutas.</p>
@endif

<!-- Salida sin escape (HTML raw) -->
{!! 'Texto en negrita desde HTML crudo' !!}

1.3 Componentes Blade

@props(['type' => 'info'])

<div class='alert alert-{{ $type }}' role='alert'>
  {{ $slot }}
</div>


<x-alert type='warning'>
  ¡Atención! Esto es una advertencia.
</x-alert>

2. JSX (React)

JSX es una sintaxis que extiende JavaScript para escribir XML/HTML-like en archivos .jsx o .js. Se transforma en llamadas a React.createElement mediante Babel.

• Elementos y componentes: Se combinan etiquetas nativas (<div>) con componentes (<MyComponent />).
• Expresiones dentro de llaves: Puedes incrustar cualquier expresión JS.
• Atributos camelCase: className en lugar de class, htmlFor en vez de for.
• Estilos en línea: Se pasan como objeto JS: style={{ color: 'red' }}.
• Fragments: Agrupar sin elemento extra: <>…</>.

2.1 Componente funcional básico

import React from 'react';

function Greeting(props) {
  return (
    <div>
      <h2>Hola, {props.name}!</h2>
      <p>Hoy es {new Date().toLocaleDateString()}</p>
    </div>
  );
}

export default Greeting;

2.2 Condicionales y listas

function FruitList({ fruits }) {
  return (
    <div>
      {fruits.length === 0
        ? <p>No hay frutas</p>
        : <ul>
            {fruits.map((fruit, i) => (
              <li key={i}>{fruit}</li>
            ))}
          </ul>
      }
    </div>
  );
}

2.3 Uso de Fragment y estilo inline

function Card({ title, children }) {
  return (
    <React.Fragment>
      <div style={{ border: '1px solid #ccc', padding: '1rem' }}>
        <h3>{title}</h3>
        {children}
      </div>
    </React.Fragment>
  );
}

3. Otros entornos: Vue.js y Angular

Aquí un cuadro comparativo rápido:

4. Buenas prácticas

• Separar lógica y presentación: componentes pequeños y enfocados.
• Escapar datos del usuario para evitar XSS ({{ }} en Blade o Mustache).
• Reutilizar plantillas y componentes para mantener consistencia.
• Prefijar o namespear estilos globales y clases para evitar colisiones.
• Documentar directivas y patrones en tu equipo para agilizar el desarrollo.

Con esta visión de alto nivel y ejemplos prácticos, podrás integrar tu conocimiento de HTML al trabajar con plantillas Blade, JSX y otros frameworks de forma segura, mantenible y eficiente.