Magento Frontend UI Components
Create the most basic UI Component
Free Preview 
app/code/Macademy/FreeShippingPromo/view/frontend/layout/default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- Reference the parent with referenceContainer or referenceBlock -->
        <referenceContainer name="header.container">
            <!-- This is a standard block with a reference to our template -->
            <block
                name="free.shipping.banner"
                template="Macademy_FreeShippingPromo::free-shipping-banner.phtml"
                before="-"
            >
                <!-- Within the block you are targeting create arguments node -->
                <arguments>
                    <!-- jsLayout is the argument to target -->
                    <argument name="jsLayout" xsi:type="array">
                        <!-- "components" is an array of UI Components... -->
                        <item name="components" xsi:type="array">
                            <!-- ...add your own UI Component to the array -->
                            <item name="free-shipping-banner" xsi:type="array">
                                <!--
                                Reference your component with the format
                                Namespace_Module/js/your-file (no extenstion).
                                
                                Namespace_Module/ is relative to module dir
                                app/code/Namespace/Module/view/frontend/web/
                                -->
                                <item name="component" xsi:type="string">Macademy_FreeShippingPromo/js/free-shipping-banner</item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>
app/code/Macademy/FreeShippingPromo/view/frontend/web/js/free-shipping-banner.js
/**
 * Most UI Component implementations use "uiComponent" for the base class.
 * This is technically the same as referencing the "uiCollection" class.
 * The class is then commonly aliased in Magento code as "Component".
 * 
 */
define([
    'uiComponent'
], function(
    Component
) {
    'use strict';

    // This code executes before the component has been initialized.
    console.log('Free Shipping Banner UI Component has been loaded');

    // You'd normally always return Component.extend(), then pass the
    // configuration as JSON into this parent class.
    return Component;
});
app/code/Macademy/FreeShippingPromo/view/frontend/templates/free-shipping-banner.phtml
<?php
/* @var $block Magento\Framework\View\Element\Template */
?>
<div id="free-shipping-banner">
    Free Shipping Banner
</div>

<script type="text/x-magento-init">
    /**
     * Within this x-magento-init tag, use an element selector to target the
     * related DOM element. #free-shipping-banner targets the above div element
     * with the attribute id="free-shipping-banner".
     * 
     * The call to $block->getJsLayout() calls the configuration that was just
     * defined within the new Layout XML file. This passes the config to
     * Magento_Ui/js/core/app, which in turn resolves back to
     * vendor/magento/module-ui/view/base/web/js/core/app.js, and then this
     * script bootstraps the UI Component initialization process.
     */
    {
        "#free-shipping-banner": {
            "Magento_Ui/js/core/app": <?= $block->getJsLayout() ?>
        }
    }
</script>
Download Snippet
Want to learn more?

Visit M.academy to learn much more about Magento, Laravel, PHP, Javascript, & Docker.

M.academy logo