Skip to main content

Crear un componente web Lightning de Hello World

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 (SFDX: 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.
    Visual Studio Code con la carpeta HelloWorldLightningWebComponent recién creada
Note

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 (SFDX: Autorizar una organización).
  4. Pulse Entrar para aceptar la opción de URL de inicio de sesión predeterminada del proyecto.
  5. Pulse Enter (Entrar) para aceptar el alias predeterminado.
    Esta acción abre el inicio de sesión de Salesforce en una ventana de navegador independiente.
  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).
    Cuadro de diálogo de permitir acceso
  1. 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:
    Mensaje de operación correcta tras autorizar una organización

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 (SFDX: Crear componente web Lightning).
  4. Escriba helloWorld como nombre del componente nuevo.
  5. Pulse 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.
    Jerarquía de archivos del componente web Lightning en Visual Studio Code
  1. 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>
  2. Guarde el archivo.
  3. 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;
        }
}
  4. Guarde el archivo.
  5. 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>63.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
  6. Guarde el archivo.

Implementar su Trailhead Playground

  1. Haga clic con el botón derecho en la carpeta default en 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 (Implementar fuente en organización) en la lista de opciones.
  1. Haga clic en SFDX: Deploy This Source to Org (SFDX: Implementar este código fuente en la organización).
  2. 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 (SFDX: Abrir organización predeterminada).
    De esta manera, se abre su Trailhead Playground en un navegador independiente.
  4. Haga clic en Configuracióny 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 Quick Find (Búsqueda rápida), introduzca Session (Sesión) y, a continuación, seleccione Session Settings (Configuración de sesión).
  8. Anule la selección de Enable secure and persistent browser caching to improve performance (Activar el almacenamiento en caché seguro y persistente para mejorar el rendimiento). De esta manera, podrá visualizar los cambios en la página más rápido.
  9. Haga clic en Save (Guardar).
  10. En Iniciador de aplicación ), busque y seleccione Sales (Ventas).
  11. Haga clic en Configuración y seleccione Edit Page (Modificar página).
  12. 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. 
    El Generador de aplicaciones Lightning con el componente web Lightning HelloWorld en la columna derecha.
  1. Haga clic en Save (Guardar).
  2. Haga clic en Activate (Activar).
  3. Haga clic en Assign as Org Default (Asignar como predeterminado de la organización).
  4. Haga clic en Save (Guardar).
  5. Haga clic en Save (Guardar) otra vez y haga clic en Back (Atrás) para volver a la página.
  6. Actualice la página para ver el componente nuevo.

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

¡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.

Comparta sus comentarios sobre Trailhead en la Ayuda de Salesforce.

Nos encantaría conocer su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios cuando quiera desde el sitio de la Ayuda de Salesforce.

Más información Continuar para compartir comentarios