Skip to main content

Crear un componente web Lightning de Hello World

Nota

Nota

¿Su idioma de aprendizaje es español? Comience el reto en un Trailhead Playground en español y utilice las traducciones proporcionadas entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto se basan en los datos en inglés. Si no aprueba el reto en su organización en español, le recomendamos que (1) cambie la configuración regional a Estados Unidos, (2) cambie el idioma a inglés, siga las instrucciones descritas aquí y, a continuación, (3) vuelva a hacer clic en el botón Check Challenge (Comprobar el reto).

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

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).
    Cuadro de diálogo de permitir acceso
  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:
    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 (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.
    Jerarquía de archivos del 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>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.
    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.
  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 Setup (Configuración)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 Setup (Configuración) 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. 
    El Generador de aplicaciones Lightning con el componente web Lightning HelloWorld en la columna derecha.
  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 Back (Atrás) para volver a la página.
  15. 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