Criar um componente Web do Lightning Hello World

Agora que você configurou seu ambiente de desenvolvimento, poderá criar um componente Web do Lightning simples.

Criar um projeto do Salesforce DX

  1. No Visual Studio Code, abra a paleta de comandos ao pressionar Ctrl+Shift+P (Windows) ou Cmd+Shift+P (macOS).
  2. Digite SFDX.
  3. Selecione SFDX: Create Project.
  4. Pressione Enter para aceitar a opção padrão.
  5. Insira HelloWorldLightningWebComponent como o nome do projeto.
  6. Pressione Enter.
  7. Selecione uma pasta para armazenar o documento.
  8. Clique em Create Project (Criar projeto). Como sua configuração básica, você deve ver algo assim.
    Visual Studio Code com a pasta HelloWorldLightningWebComponent recém-criada

Autorizar seu Trailhead Playground

  1. No Visual Studio Code, abra a paleta de comandos ao pressionar Ctrl+Shift+P (Windows) ou Cmd+Shift+P (macOS).
  2. Digite SFDX.
  3. Selecione SFDX: Authorize an Org.
  4. Pressione Enter para aceitar a opção de URL de login padrão do projeto.
  5. Pressione Enter para aceitar o alias padrão.
    O login do Salesforce abre em uma janela de navegador separada.
  6. Entre usando suas credenciais do Trailhead Playground.
  7. Se for pedida a permissão de acesso, clique em Permitir.
    Diálogo Permitir acesso
  8. Depois de autenticar no navegador, a CLI se lembrará das suas credenciais. A mensagem de sucesso terá o seguinte formato:
    Mensagem de sucesso da autorização de uma organização

Criar um componente Web do Lightning

  1. No Visual Studio Code, abra a paleta de comandos ao pressionar Ctrl+Shift+P (Windows) ou Cmd+Shift+P (macOS).
  2. Digite SFDX.
  3. Selecione SFDX: Create Lightning Web Component. Não use SFDX: Create Lightning Component. (Isso cria um componente do Aura.)
  4. Digite helloWorld como nome do novo componente.
  5. Pressione Enter para aceitar o local force-app/main/default/lwc padrão.
  6. Pressione Enter.
  7. Exiba os arquivos recém-criados no Visual Studio Code.
    Hierarquia de arquivos de componente Web do Lightning no Visual Studio Code
  8. No arquivo HTML, helloWorld.html, copie e cole o código a seguir.
    <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. Salve o arquivo.
  10. No arquivo JavaScript, hellowWorld.js, copie e cole o código a seguir.
    import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
  greeting = 'World';
  changeHandler(event) {
    this.greeting = event.target.value;
  }
}
  11. Salve o arquivo.
  12. No arquivo XML, hellowWorld.js-meta.xml, copie e cole o código a seguir.
    <?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. Salve o arquivo.

Implantar no seu Trailhead Playground

  1. Clique com o botão direito do mouse na pasta padrão em force-app/main.
    Com a pasta padrão clicada com o botão direito do mouse, SFDX: Deploy Source to Org está selecionada na lista de opções.
  2. Clique em SFDX: Deploy Source to Org.
  3. Na guia Output (Saída) do terminal integrado, exiba os resultados de sua implantação. Você também deve ter recebido um aviso que diz: SFDX: Deploy Source to Org ... ended with exit code 0. Isso significa que o comando foi executado com êxito.
    A guia Output (Saída) exibindo os resultados com o código de saída 0 como êxito.

Adicionar componente ao aplicativo no Lightning Experience

  1. No Visual Studio Code, abra a paleta de comandos ao pressionar Ctrl+Shift+P (Windows) ou Cmd+Shift+P (macOS).
  2. Digite SFDX.
  3. Selecione SFDX: Open Default Org.
    Seu Trailhead Playground abre em um navegador separado.
  4. No Iniciador de aplicativos (Iniciador de aplicativos), encontre e selecione Sales (Vendas).
  5. Clique em Engrenagem de configuração e selecione Edit Page (Editar página).
  6. Arraste o componente Web do Lightning helloWorld da área Personalizado da lista Componentes do Lightning para a parte de cima da tela de página. Criador de aplicativo Lightning com o componente Web do Lightning HelloWorld na coluna à direita.
  7. Clique em Save (Salvar).
  8. Clique em Activate (Ativar).
  9. Clique em Assign as Org Default (Atribuir como padrão da organização).
  10. Clique em Save (Salvar).
  11. Clique em Save (Salvar) novamente e clique em Seta para voltar para retornar à página.
  12. Atualize a página para exibir seu novo componente.

Página inicial com o componente Web do Lightning HelloWorld.

Você criou oficialmente seu primeiro componente Web do Lightning!

O que vem a seguir?

Confira os aplicativos de exemplo em https://trailhead.Salesforce.com/Sample-Gallery. Adicione outros elementos ao seu componente HelloWorld, confira os outros componentes de exemplo e crie seus próprios componentes! Durante a experimentação, use a referência de componente para saber mais sobre como codificar componentes Web do Lightning.