Now, we will create a Lightning Web Component to encapsulate our success message – a component that could, for example, be the basis of a more reusable one for general informational messages:

1. Within the Visual Studio code project you created earlier, locate the /force-app/main/default/lwc folder in the Explorer pane and right-click on it, selecting the SFDX: Create Lightning Web Component menu option.
2. Give your component the name mycomponent and press Enter to accept the defaults.

3. Take the markup contained with the aura:application tag in the myapp.app file and paste the contents into your new template tag in the new mycomponent.html file, while also modifying the message, as shown here:

<template> 
  <div class="slds-notify_container"> 
    <div class="slds-notify slds-notify--alert 
                slds-theme--success 
                slds-theme--alert-texture" role="alert"> 
      <span class="slds-assistive-text">Success</span> 
      <h2>Success your first Lightning Component</h2> 
    </div> 
  </div> 
</template> 

4. Finally, modify the myapp.app file to use your new component:

<aura:applicationextends="force:slds"> 
  <c:mycomponent/> 
</aura:application> 

Refresh the browser and you will see the following:

The preceding code is the basic introduction to Lightning component development, intended to help you understand the high-level architecture of Lightning and how it fits into the standard HTML page model used by the internet. It is also providing an introduction to the styling and design framework that is the SLDS.

The Lightning component created here was created with the Lightning Web Component framework (the successor to the Lightning Aura Component framework). This means it uses the new modern browser standards, such ECMAScript, web components, templates, and shadow DOM. This means that you get a better return on the investment of your time when learning how to use Lightning Web Components, and if you are hiring, you get access to a broader set of already skilled applicants. 

You can read more about these technologies at the following resources:

• https://www.ecma-international.org/ecma-262/9.0/index.html
• https://developer.mozilla.org/en-US/docs/Web/Web_Components
• https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
• https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
• https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM