Empiece a realizar un seguimiento de su progreso
Inicio de Trailhead
Inicio de Trailhead

Crear un componente web Lightning Hello World

Ahora que ya configuró su entorno de desarrollo, podrá crear un componente web Lightning sencillo.

Crear un proyecto de Salesforce DX

  1. En Visual Studio Code, abra la paleta de comandos. Para ello, pulse Ctrl+Mayús+P (Windows) o Cmd+Mayús+P (macOS).
  2. Ingrese SDFX.
  3. Seleccione SFDX: Create Project.
  4. Pulse Entrar para aceptar la opción estándar.
  5. Ingrese HelloWorldLightningWebComponent como nombre de proyecto.
  6. Pulse Entrar.
  7. Seleccione una carpeta para almacenar el proyecto.
  8. Haga clic en Create Project. Su configuración de base será similar a la que se muestra a continuación.
    Visual Studio Code con la carpeta HelloWorldLightningWebComponent que se acaba de crear.

Autorizar su Trailhead Playground

  1. En Visual Studio Code, abra la paleta de comandos. Para ello, pulse Ctrl+Mayús+P (Windows) o Cmd+Mayús+P (macOS).
  2. Ingrese SDFX.
  3. Seleccione SFDX: Authorize an Org.
  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.
    Esta acción abre el inicio de sesión de Salesforce en una ventana de navegador separada.
  6. Inicie sesión con sus credenciales de Trailhead Playground.
  7. Si se le pregunta si desea permitir el acceso, haga clic en Permitir.
    Cuadro de diálogo Permitir acceso.
  8. Tras autenticarse en el navegador, la CLI recordará sus credenciales. Cuando el proceso se complete con éxito, se mostrará un mensaje similar al siguiente:
    Mensaje que indica que la autorización de la organización se realizó correctamente.

Crear un componente web Lightning

  1. En Visual Studio Code, abra la paleta de comandos. Para ello, pulse Ctrl+Mayús+P (Windows) o Cmd+Mayús+P (macOS).
  2. Ingrese SDFX.
  3. Seleccione SFDX: Create Lightning Web Component. No utilice SFDX: Create Lightning Component. (Este crea un componente Aura.)
  4. Ingrese helloWorld como nombre para el nuevo componente.
  5. Pulse Entrar para aceptar la ubicación force-app/main/default/lwc predeterminada.
  6. Pulse Entrar.
  7. Visualice los archivos que acaba de crear en Visual Studio Code.
    Jerarquía de archivos de un componente web Lightning 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>45.0</apiVersion>
      <isExposed>true</isExposed>
      <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
      </targets>
    </LightningComponentBundle>
  13. Guarde el archivo.

Implementación en su Trailhead Playground.

  1. Haga clic con el botón derecho en la carpeta default bajo force-app/main.
    Al hacer clic con el botón derecho sobre la carpeta default, aparecerá resaltada la opción SFDX: Deploy Source to Org en la lista de opciones.
  2. Haga clic en SFDX: Deploy Source to Org.
  3. En la ficha Resultados del terminal integrado, compruebe los resultados de su implementación. También debe haber recibido el aviso siguiente: SFDX: Deploy Source to Org ... ended with exit code 0. Esto indica que el comando se ejecutó correctamente.
    Ficha Resultado que muestra los resultados con el código de salida 0 que indica que la operación se realizó correctamente.

Agregar un componente a una aplicación en Lightning Experience

  1. En Visual Studio Code, abra la paleta de comandos. Para ello, pulse Ctrl+Mayús+P (Windows) o Cmd+Mayús+P (macOS).
  2. Ingrese SDFX.
  3. Seleccione SFDX: Open Default Org.
    Esta acción abre su Trailhead Playground en un navegador separado.
  4. Desde el Iniciador de aplicación (Iniciador de aplicación), encuentre y seleccione Ventas.
  5. Haga clic en Engranaje de Configuración y luego seleccione Modificar página.
  6. Arrastre el componente web Lightning helloWorld desde el área personalizada de la lista Componentes Lightning a la parte superior del lienzo de la página. Generador de aplicaciones Lightning con el componente web Lightning HelloWorld en la columna de la derecha.
  7. Haga clic en Guardar.
  8. Haga clic en Activate (Activar).
  9. Haga clic en Asignar como predeterminado de la organización.
  10. Haga clic en Guardar.
  11. Vuelva a hacer clic en Guardar y, a continuación, haga clic en Flecha Atrás para volver a la página.
  12. Actualice la página para ver el nuevo componente.

Página de inicio con el componente web Lightning HelloWorld.

Con esto ya puede decir que creó oficialmente su primer componente web Lightning.

¿Qué es lo siguiente?

Consulte las aplicaciones de muestra en https://trailhead.salesforce.com/sample-gallery. Agregue más contenido a su componente helloWorld, consulte otros componentes de muestra y cree sus propios componentes. A medida que vaya probando, utilice la Referencia de componente para obtener más información sobre cómo codificar componentes web Lightning.