Criar um componente Web do Lightning Hello World

Nota

Deseja aprender em português (Brasil)? Comece o desafio em um Trailhead Playground de português (Brasil) e use as traduções fornecidas entre parênteses para navegar. Copie e cole somente os valores em inglês porque as validações dos desafios dependem de dados em inglês. Se você não passar no desafio em sua organização de português (Brasil), recomendamos que (1) mude o local para os Estados Unidos, (2) mude o idioma para inglês, seguindo as instruções aqui, e (3) clique novamente no botão “Validar o desafio”.

Consulte o emblema Trailhead no seu idioma para saber mais sobre como aproveitar a experiência de Trailhead em outros idiomas.

Acompanhar com o Trail Together

Deseja acompanhar um especialista enquanto trabalha nesta etapa? Veja este vídeo que faz parte da série Trail Together no Trailhead Live.

(Este clipe começa na marca dos 11:49 minutos, caso você queira retroceder e ver o início da etapa novamente.)

Criar um projeto do Salesforce DX

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

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.
   
   

Se você receber a mensagem sobre permissões “Do you trust the authors of the files in this folder?” (Você confia nos autores dos arquivos nessa pasta?), selecione Yes (Sim).

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 (Autorizar uma organização).
   
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 Allow (Permitir).
   
   
8. Depois de autenticar no navegador, a CLI se lembrará das suas credenciais. A mensagem de sucesso terá o seguinte formato:
   
   

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 (Criar componente Web do Lightning).
   
4. Digite helloWorld como nome do novo componente.
   
5. Pressione Enter para aceitar a predefinição force-app/main/default/lwc.
6. Pressione Enter.
   
7. Exiba os arquivos recém-criados 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, helloWorld.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, helloWorld.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>58.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 default (padrão) em force-app/main.
   
   
2. Clique em SFDX: Deploy Source to Org (Implantar fonte na organização).
   
3. Na guia Output (Saída) do terminal integrado, exiba os resultados de sua implantação. Se o comando foi executado com sucesso, é exibida a mensagem Deployed Source (Fonte implantada) listando os três arquivos que foram carregados na organização.
   

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 (Abrir organização padrão).
   Seu Trailhead Playground abre em um navegador separado.
   
4. Clique em e selecione Setup (Configuração).
   
5. Em Busca rápida, insira Home (Início) e selecione Home (Início) na seção Feature Settings (Configurações).
   
6. Para Advanced Seller Home (Início avançado do vendedor), mude a configuração para Inactive (Inativo).
   
7. No Iniciador de aplicativos (), encontre e selecione Sales (Vendas).
   
8. Clique em e selecione Edit Page (Editar página).
   
9. Arraste o componente Web do Lightning helloWorld da área Custom (Personalizado) da lista Lightning Components (Componentes do Lightning) para a parte de cima da tela de página. 
   
   
10. Clique em Save (Salvar).
    
11. Clique em Activate (Ativar).
    
12. Clique em Assign as Org Default (Atribuir como padrão da organização).
    
13. Clique em Save (Salvar).
    
14. Clique em Save (Salvar) novamente e clique em para retornar à página.
    
15. Atualize a página para exibir seu novo componente.
    

Você criou oficialmente seu primeiro componente Web do Lightning!

O que vem a seguir?

Confira os exemplos de código e SDK em https://developer.salesforce.com/code-samples-and-sdks. 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.