Skip to main content

Crear un componente web Lightning Hello World

Crear un proyecto de Salesforce DX

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

  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. Escriba SFDX.
  3. Seleccione SFDX: Create Project (SFDX: Crear proyecto).
  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 (Crear proyecto). 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.
Note

Si recibe el mensaje de permisos “Do you trust the authors of the files in this folder?” (¿Confía en los autores de los archivos de esta carpeta?), seleccione Yes (Sí).

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. 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 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 Allow (Permitir).
    Cuadro de diálogo Allow Access (Permitir acceso).
  1. 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. Escriba SFDX.
  3. Seleccione SFDX: Create Lightning Web Component (SFDX: Crear componente web Lightning).
  4. Ingrese helloWorld como nombre para el nuevo componente.
  5. Pulse Enter (Entrar) para aceptar la ubicación force-app/main/default/lwc predeterminada.
  6. Pulse Enter (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.
  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.

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 (Implementar fuente en organización) en la lista de opciones.
  1. Haga clic en SFDX: Deploy This Source to Org (SFDX: Implementar esta fuente en la organización).
  2. En la ficha Output (Resultados) del terminal integrado, compruebe los resultados de su implementación. Si el comando se ejecutó correctamente, aparece el mensaje Deployed Source (Fuente implementada), que enumera 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, abra la paleta de comandos. Para ello, pulse Ctrl+Mayús+P (Windows) o Cmd+Mayús+P (macOS).
  2. Escriba SFDX.
  3. Seleccione SFDX: Open Default Org (SFDX: Abrir organización predeterminada).
    Esta acción abre su Trailhead Playground en un navegador separado.
  4. Haga clic en Configuración y, luego, seleccione Setup (Configuración).
  5. En el cuadro de búsqueda rápida, ingrese Home (Inicio) y, luego, seleccione Home (Inicio) en la sección Feature Settings (Configuración de funciones).
  6. En la función Advanced Seller Home (Inicio de vendedores avanzados), active la opción Inactive (Inactivo).
  7. En el cuadro de búsqueda rápida, ingrese Session (Sesión) y, luego, seleccione Session Settings (Configuración de la sesión).
  8. Anule la selección de la casilla Enable secure and persistent browser caching to improve performance (Active el almacenamiento en caché seguro y persistente para aumentar el desempeño). De esta forma, puede ver los cambios en la página más rápido.
  9. Haga clic en Save (Guardar).
  10. Desde el Iniciador de aplicación (), encuentre y seleccione Sales (Ventas).
  11. Haga clic en Configuración y luego seleccione Edit Page (Modificar página).
  12. Arrastre el componente web Lightning helloWorld desde el área personalizada de la lista Lightning Components (Componentes Lightning) hacia 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.
  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. Vuelva a hacer clic en Save (Guardar) y, a continuación, haga clic en Atrás para volver a la página.
  6. 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 muestras de código y SDK en https://developer.salesforce.com/code-samples-and-sdks. 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.

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantaría saber más sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

Más información Continuar a Compartir comentarios