HTML Course 16.4 HTML in template and framework environments (Blade, JSX, etc. at a high level)

HTML Course 16.4: HTML in Template and Framework Environments (Blade, JSX, etc.)

This section explores how HTML is integrated into popular templating engines and component frameworks. We cover:

• Blade (Laravel PHP)
• JSX (React)
• Brief notes on other environments (Vue, Angular, Handlebars)

1. Blade (Laravel PHP)

Blade is Laravel’s server-side templating engine. It compiles templates into plain PHP. Key concepts:

• Directives: @if, @foreach, @csrf, etc.
• Escaping: {{ $var }} auto‐escapes; {!! $var !!} outputs raw HTML.
• Layouts & Sections: @extends, @section, @yield.
• Components: Reusable Blade components with @component or tags.

Example: A layout with a content section and a loop.

{{-- resources/views/layouts/app.blade.php --}}



  
  


  

    {{-- Include a navigation component --}}
    @include('partials.nav')
  

  

    {{-- This section will be filled by child views --}}
    @yield('content')
  


  

{{-- resources/views/users/index.blade.php --}}
{{-- Extends the base layout --}}
@extends('layouts.app')

{{-- Define the 'title' section --}}
@section('title', 'User List')

{{-- Define the main 'content' section --}}
@section('content')
  
User List

  {{-- Loop through users --}}
  

    @foreach($users as $user)
      

        {{-- Auto-escaped for safety --}}
        {{ $user->name }} 
        {{-- Raw HTML output (use sparingly) --}}
        {!! $user->profile_html !!}
      
    @endforeach
  
@endsection
  

2. JSX (React)

JSX is a syntax extension that mixes JavaScript with HTML-like tags. It compiles to React.createElement calls.

• JS Expressions: Use { } to embed variables or expressions.
• Attribute names: className instead of class, htmlFor instead of for.
• Children: Elements can nest other elements or fragments (<>…</>).
• Conditional rendering: Ternaries or && within braces.

// ExampleComponent.jsx
import React from 'react';

function ExampleComponent({ items }) {
  return (
    <>
      {/* Fragment: avoids extra wrapper */}
      
Item List
      

        {items.length > 0
          ? items.map(item => (
              

                {/* Dynamic content */}
                {item.name}
              
            ))
          : 
No items found.
        }
      
    
  );
}

export default ExampleComponent;
  

Behind the scenes, the JSX above compiles to JavaScript calls:

// Compiled form (simplified)
React.createElement(
  React.Fragment,
  null,
  React.createElement('h2', { className: 'title' }, 'Item List'),
  React.createElement('ul', null,
    items.length > 0
      ? items.map(item =>
          React.createElement('li', { key: item.id }, item.name)
        )
      : React.createElement('li', null, 'No items found.')
  )
);
  

3. Other Template/Framework Environments

4. Best Practices

• Keep HTML semantics clear even inside templates or JSX.
• Escape user input by default; use raw HTML output only when safe.
• Modularize with components or partials to improve maintainability.
• Leverage linting tools (e.g., ESLint for JSX, BladeSniffer for Blade).
• Use consistent naming conventions for classes/IDs and component names.