Create a Hello World Lightning Web Component

Nota

¿Su idioma de aprendizaje es español? En esta insignia, las validaciones de los retos prácticos de Trailhead funcionan en inglés. Las traducciones se incluyen entre paréntesis a modo de referencia. En su Trailhead Playground, asegúrese de (1) cambiar la configuración regional a Estados Unidos, (2) cambiar el idioma a inglés y (3) copiar y pegar únicamente los valores en inglés. Siga las instrucciones descritas aquí.

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

Seguir la ruta marcada por Trail Together

¿Desea contar con la ayuda de un instructor a medida que trabaja en este paso? Eche un vistazo a este vídeo, que forma parte de la serie Trail Together en Trailhead Live.

(Este clip comienza en la marca del minuto 11:49, en caso de que desee volver atrás y ver el comienzo del paso de nuevo).

Crear un proyecto de Salesforce DX

Ahora que ya ha configurado su entorno de desarrollo, puede crear un componente web Lightning simple.

1. En Visual Studio Code, pulse Ctrl + Mayús + P en Windows o Comando + Mayús + P en macOS para abrir la paleta de comandos.
   
2. Escriba SFDX.
   
3. Seleccione SFDX: Create Project (Crear proyecto).
   
4. Pulse Entrar para aceptar la opción estándar.
   
5. Escriba HelloWorldLightningWebComponent a modo de nombre del proyecto.
   
6. Pulse Entrar.
   
7. Seleccione una carpeta para guardar el proyecto.
   
8. Haga clic en Create Project (Crear proyecto). Esta es la configuración básica que debería ver en la pantalla.
   
   
   

Si aparece una solicitud de permiso con el mensaje "¿Confía en los autores de los archivos de esta carpeta?", seleccione Yes (Sí).

Autorizar su Trailhead Playground

1. En Visual Studio Code, pulse Ctrl + Mayús + P en Windows o Comando + Mayús + P en macOS para abrir la paleta de comandos.
   
2. Escriba SFDX.
   
3. Seleccione SFDX: Authorize an Org (Autorizar una organización).
   
4. Pulse Entrar para aceptar la opción de URL de inicio de sesión predeterminada del proyecto.
   
5. Pulse Entrar para aceptar el alias predeterminado.
   Se abrirá el inicio de sesión de Salesforce en otra ventana del navegador.
   
6. Inicie sesión con las credenciales de su Trailhead Playground.
   
7. Si se le solicita que permita el acceso, haga clic en Allow (Permitir).
   
   
8. Después de autenticarse en el navegador, la CLI recordará sus credenciales. El mensaje de operación correcta debería tener un aspecto similar a este:
   
   

Crear un componente web Lightning

1. En Visual Studio Code, pulse Ctrl + Mayús + P en Windows o Comando + Mayús + P en macOS para abrir la paleta de comandos.
   
2. Escriba SFDX.
   
3. Seleccione SFDX: Create Lightning Web Component (Crear un componente web Lightning).
   
4. Escriba helloWorld como nombre del componente nuevo.
   
5. Pulse Enter (Entrar) para aceptar la ruta predeterminada force-app/main/default/lwc.
   
6. Pulse Entrar.
   
7. Puede ver los archivos recién creados en Visual Studio Code.
   
   
8. En el archivo HTML, helloWorld.html, copie y pegue el código siguiente.
   
   

   <template>
     <lightning-card title="HelloWorld" icon-name="custom:custom14">
       <div class="slds-m-around_medium">
         <p>Hello, {greeting}!</p>
         <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
       </div>
     </lightning-card>
   </template>

9. Guarde el archivo.
   
10. En el archivo JavaScript, helloWorld.js, copie y pegue el código siguiente.
    
    

    import { LightningElement } from 'lwc';
    export default class HelloWorld extends LightningElement {
            greeting = 'World';
            changeHandler(event) {
            this.greeting = event.target.value;
            }
    }

11. Guarde el archivo.
    
12. En el archivo XML, helloWorld.js-meta.xml, copie y pegue el código siguiente.
    
    

    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
        <apiVersion>58.0</apiVersion>
        <isExposed>true</isExposed>
        <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        </targets>
    </LightningComponentBundle>

13. Guarde el archivo.
    

Implementar su Trailhead Playground

1. Haga clic con el botón derecho en la carpeta default en force-app/main.
   
   
2. Haga clic en SFDX: Deploy Source to Org (Implementar fuente en organización).
   
3. En la ficha Output (Resultados) de la ventana terminal integrada, revise los resultados de su implementación. Si el comando se ha ejecutado correctamente, aparecerá el mensaje Deployed Source (Fuente implementada) con los tres archivos que se cargaron en la organización.
   

Agregar un componente a una aplicación en Lightning Experience

1. En Visual Studio Code, pulse Ctrl + Mayús + P en Windows o Comando + Mayús + P en macOS para abrir la paleta de comandos.
   
2. Escriba SFDX.
   
3. Seleccione SFDX: Open Default Org (Abrir organización predeterminada).
   Se abrirá su Trailhead Playground en una ventana de navegador independiente.
   
4. Haga clic en y seleccione Setup (Configuración).
   
5. En Quick Find (Búsqueda rápida), introduzca Home (Inicio) y, a continuación, seleccione Home (Inicio) en la sección Feature Settings (Configuración de funciones).
   
6. En Advanced Seller Home (Inicio de Advanced Seller), cambie la configuración a Inactive (Inactivo).
   
7. En Iniciador de aplicación ), busque y seleccione Sales (Ventas).
   
8. Haga clic en y seleccione Edit Page (Modificar página).
   
9. Arrastre el componente web Lightning helloWorld desde el área personalizada de la lista de componentes Lightning hasta la parte superior del lienzo de la página. 
   
   
10. Haga clic en Save (Guardar).
    
11. Haga clic en Activate (Activar).
    
12. Haga clic en Assign as Org Default (Asignar como predeterminado de la organización).
    
13. Haga clic en Save (Guardar).
    
14. Haga clic en Save (Guardar) otra vez y haga clic en  para volver a la página.
    
15. Actualice la página para ver el componente nuevo.
    

¡Ya ha creado oficialmente su primer componente web Lightning!

¿Qué viene a continuación?

Consulte los códigos de ejemplo y los SDK en https://developer.salesforce.com/code-samples-and-sdks. Agregue más elementos a su componente helloWorld, eche un vistazo al resto de componentes de muestra y cree sus propios componentes. A medida que experimente, utilice la Referencia de componentes para aprender a codificar componentes web Lightning.