Compilar sua primeira web part do lado do cliente do SharePoint (Hello World parte 1)Build your first SharePoint client-side web part (Hello World part 1)

As web parts do lado do cliente são componentes do lado do cliente que são executados no contexto de uma página do SharePoint. As web parts do lado do cliente podem ser implantadas no SharePoint Online e você também pode usar bibliotecas e ferramentas modernas do JavaScript para compilá-las.Client-side web parts are client-side components that run inside the context of a SharePoint page. Client-side web parts can be deployed to SharePoint Online, and you can also use modern JavaScript tools and libraries to build them.

Suporte a web parts do lado do cliente:Client-side web parts support:

  • Como compilar com HTML e JavaScript.Building with HTML and JavaScript.
  • Ambientes do SharePoint Online e no local.Both SharePoint Online and on-premises environments.

Observação

Antes de seguir as etapas neste artigo, não se esqueça de Configurar seu ambiente de desenvolvimento.Before following the steps in this article, be sure to Set up your development environment.

Você também pode seguir estas etapas assistindo a este vídeo no canal do SharePoint PnP no YouTube:You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:



Criar um novo projeto de web partCreate a new web part project

Para criar um novo projeto de web partTo create a new web part project

  1. Crie um novo diretório de projeto em seu local favorito.Create a new project directory in your favorite location.

    md helloworld-webpart
    
  2. Vá para o diretório do projeto.Go to the project directory.

    cd helloworld-webpart
    
  3. Crie uma nova web part HelloWorld executando o gerador Yeoman do SharePoint.Create a new HelloWorld web part by running the Yeoman SharePoint Generator.

yo @microsoft/sharepoint
  1. Quando solicitado:When prompted:

    • Aceite o padrão helloworld-webpart como o nome da solução e selecione Enter.Accept the default helloworld-webpart as your solution name, and then select Enter.
    • Selecione Somente SharePoint Online (mais recente) e selecione Enter.Select SharePoint Online only (latest), and select Enter.
    • Escolha Usar a pasta atual como o local para colocar os arquivos.Select Use the current folder for where to place the files.
    • Selecione N para permitir que a solução seja implantada em todos os sites imediatamente.Select N to allow the solution to be deployed to all sites immediately.
    • Selecione N na pergunta se a solução contiver permissões exclusivas.Select N on the question if solution contains unique permissions.
    • Selecione WebPart como o tipo de componente do lado do cliente a ser criado.Select WebPart as the client-side component type to be created.
  2. O próximo conjunto de prompts solicitará informações específicas sobre a web part:The next set of prompts ask for specific information about your web part:

    • Aceite o padrão HelloWorld como o nome da web part e selecione Enter.Accept the default HelloWorld as your web part name, and then select Enter.
    • Aceite o padrão descrição do HelloWorld como a descrição da web part e selecione Enter.Accept the default HelloWorld description as your web part description, and then select Enter.
    • Aceite o padrão Sem estrutura da Web do JavaScript como a estrutura que você gostaria de usar e selecione Enter.Accept the default No javascript web framework as the framework you would like to use, and then select Enter.

    O gerador Yeoman do SharePoint solicita a criação de uma solução do lado do cliente da web part

Neste ponto, o Yeoman instala as dependências necessárias e estrutura os arquivos da solução juntamente com a web part HelloWorld.At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the HelloWorld web part. Isso pode levar alguns minutos.This might take a few minutes.

Quando a estruturação for concluída, você verá a seguinte mensagem indicando que ela foi bem-sucedida.When the scaffold is complete, you should see the following message indicating a successful scaffold.

Solução do lado do cliente do SharePoint estruturada com êxito

Para obter informações sobre como solucionar erros, confira Problemas conhecidos.For information about troubleshooting any errors, see Known issues.

Como usar meu Editor de Código preferidoUsing your favorite Code Editor

Como a solução do lado do cliente do SharePoint é baseada em HTML/TypeScript, você pode usar qualquer editor de código que suporte o desenvolvimento do lado do cliente para compilar sua Web Part, como:Because the SharePoint client-side solution is HTML/TypeScript based, you can use any code editor that supports client-side development to build your web part, such as:

A documentação da Estrutura do SharePoint usa o código do Visual Studio nas etapas e exemplos.SharePoint Framework documentation uses Visual Studio code in the steps and examples. O Visual Studio Code é um editor de código-fonte leve e eficiente da Microsoft que é executado na sua área de trabalho e está disponível para Windows, Mac e Linux.Visual Studio Code is a lightweight but powerful source code editor from Microsoft that runs on your desktop and is available for Windows, Mac, and Linux. Ele vem com suporte integrado para JavaScript, TypeScript e Node.js e possui um rico ecossistema de extensões para outros idiomas (como C++, C#, Python, PHP) e tempos de execução.It comes with built-in support for JavaScript, TypeScript, and Node.js, and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtimes.

Visualizar a web partPreview the web part

Para visualizar sua Web Part, crie e execute-a em um servidor Web local.To preview your web part, build and run it on a local web server. Por padrão, a cadeia de ferramentas do lado do cliente usa o ponto de extremidade HTTPS.The client-side toolchain uses HTTPS endpoint by default. Essa configuração pode ser definida no arquivo serve.json localizado na pasta config. No entanto, recomendamos o uso dos valores padrão.This setting can be configured in the serve.json file located in the config folder, but we do recommend using the default values.

Alterne para o console, verifique se você ainda está no diretório helloworld-webpart e insira o seguinte comando:Switch to your console, ensure that you are still in the helloworld-webpart directory, and then enter the following command:

Observação

O certificado de desenvolvedor deve ser instalado SOMENTE uma vez em seu ambiente de desenvolvimento, portanto, ignore esta etapa, se isso já tiver sido executado em seu ambiente.Developer certificate has to be installed ONLY once in your development environment, so you can skip this step, if you have already executed that in your environment.

gulp trust-dev-cert

Agora que já instalamos o certificado de desenvolvedor, insira o seguinte comando no console para compilar e visualizar a web part:Now that we have installed the developer certificate, enter the following command in the console to build and preview your web part:

gulp serve

Este comando executa uma série de tarefas do Gulp para criar um servidor HTTPS local e baseado em nó no localhost:4321 e localhost:5432no.This command executes a series of gulp tasks to create a local, node-based HTTPS server on localhost:4321 and localhost:5432. Em seguida, o Workbench é iniciado no navegador padrão para visualizar Web Parts do ambiente de desenvolvimento local.The workbench is then launched in your default browser to preview web parts from your local dev environment.

Observação

Se você estiver vendo problemas com o certificado no navegador, confira detalhes sobre a instalação de um certificado de desenvolvedor no artigo Configurar seu ambiente de desenvolvimento.If you are seeing issues with the certificate in browser, please see details on installing a developer certificate from the Set up your development environment article. Se você ainda estiver vendo problemas, verifique se não há mais em escuta dos números de porta, usando o resmon. exe, a guia rede e procurando portas de escuta.If you are still seeing issues, please check nothing else is listening on the port numbers, by using resmon.exe, the network tab and looking at Listening Ports.

Projeto da web part do gulp serve

As ferramentas de desenvolvimento do lado do cliente do SharePoint usam o gulp como o executor de tarefas que manipula tarefas de processo de compilação como:SharePoint client-side development tools use gulp as the task runner to handle build process tasks such as:

  • Agrupar e diminuir os arquivos CSS e JavaScript.Bundling and minifying JavaScript and CSS files.
  • Executar ferramentas para chamar as tarefas de agrupamento e diminuição antes de cada build.Running tools to call the bundling and minification tasks before each build.
  • Compilar arquivos SASS para CSS.Compiling SASS files to CSS.
  • Compilar arquivos TypeScript para JavaScript.Compiling TypeScript files to JavaScript.

O Visual Studio Code fornece suporte interno para o gulp e outros executores de tarefas.Visual Studio Code provides built-in support for gulp and other task runners. Selecione Ctrl+Shift+B no Windows ou Cmd+Shift+B no Mac para depurar e visualizar a web part.Select Ctrl+Shift+B on Windows or Cmd+Shift+B on Mac to debug and preview your web part.

O SharePoint Workbench é uma área de design do desenvolvedor que permite visualizar e testar web parts com rapidez, sem a necessidade de implantá-las no SharePoint.SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. O SharePoint Workbench inclui a página e a tela do lado do cliente, onde você pode adicionar, excluir e testar suas web parts que se encontram em desenvolvimento.SharePoint Workbench includes the client-side page and the client-side canvas in which you can add, delete, and test your web parts in development.

SharePoint Workbench sendo executado localmente

Para usar o SharePoint Workbench para visualizar e testar a web partTo use SharePoint Workbench to preview and test your web part

  1. Para adicionar a Web Part HelloWorld, escolha o ícone d adição (este ícone aparece quando você passa o mouse sobre uma seção como mostrado na imagem anterior).To add the HelloWorld web part, select the add icon (this icon appears when you mouse hovers over a section as shown in the previous image). Isso abre a caixa de ferramentas que contém uma lista de web parts disponíveis para adição.This opens the toolbox where you can see a list of web parts available for you to add. A lista inclui a web part HelloWorld, além de outras web parts disponíveis localmente em seu ambiente de desenvolvimento.The list includes the HelloWorld web part as well other web parts available locally in your development environment.

    Caixa de ferramentas do SharePoint Workbench no localhost

  2. Selecione HelloWorld para adicionar a web part à página.Select HelloWorld to add the web part to the page.

    web part HelloWorld no SharePoint Workbench

    Parabéns! Você acabou de adicionar sua primeira web part do lado do cliente a uma página do lado do cliente.Congratulations! You have just added your first client-side web part to a client-side page.

  3. Selecione o ícone de lápis na extremidade esquerda da web part para revelar o painel de propriedades da web part.Select the pencil icon on the far left of the web part to reveal the web part property pane.

    Painel de propriedades da web part HelloWorld

    O painel de propriedades é onde você pode definir propriedades para personalizar a Web Part. O painel de propriedades é acionado no lado do cliente e fornece um design consistente em todo o SharePoint.The property pane is where you can define properties to customize your web part. The property pane is client-side driven and provides a consistent design across SharePoint.

  4. Modifique o texto na caixa de texto Descrição para As Web Parts do lado do cliente são fantásticas!Modify the text in the Description text box to Client-side web parts are awesome!

    Observe como o texto na Web Part também é alterado à medida que você digita.Notice how the text in the web part also changes as you type.

Um dos novos recursos disponíveis no painel de propriedades é a configuração do comportamento da atualização que pode ser definido como reativo ou não reativo.One of the new capabilities available to the property pane is to configure its update behavior, which can be set to reactive or non-reactive. Por padrão, o comportamento da atualização é reativo e permite ver as alterações conforme as propriedades são editadas.By default, the update behavior is reactive and enables you to see the changes as you edit the properties. As alterações são salvas instantaneamente quando o comportamento é reativo.The changes are saved instantly when the behavior is reactive.

Estrutura do projeto da web partWeb part project structure

Para usar o Visual Studio Code para explorar a estrutura do projeto da web partTo use Visual Studio Code to explore the web part project structure

  1. No console, quebre o processamento selecionando Ctrl+C.In the console, break the processing by selecting Ctrl+C.

  2. Insira o seguinte comando para abrir o projeto da web part no Visual Studio Code (ou use seu editor favorito):Enter the following command to open the web part project in Visual Studio Code (or use your favorite editor):

    code .
    

    Estrutura do projeto HelloWorld

Se você receber um erro, talvez precise instalar o comando do código em PATH.If you get an error, you might need to install the code command in PATH.

TypeScript é a principal linguagem para compilar Web Parts do lado do cliente do SharePoint. TypeScript é um superconjunto tipado de JavaScript que é compilado para JavaScript simples. As ferramentas de desenvolvimento do lado do cliente do SharePoint são criadas usando classes, módulos e interfaces para ajudar os desenvolvedores a compilar Web Parts robustas do lado do cliente.TypeScript is the primary language for building SharePoint client-side web parts. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. SharePoint client-side development tools are built using TypeScript classes, modules, and interfaces to help developers build robust client-side web parts.

Veja a seguir alguns arquivos principais do projeto.The following are some key files in the project.

Classe da web partWeb part class

HelloWorldWebPart.ts na pasta src\webparts\helloworld define o ponto de entrada principal para a web part.HelloWorldWebPart.ts in the src\webparts\helloworld folder defines the main entry point for the web part. A classe HelloWorldWebPart da web part estende a BaseClientSideWebPart.The web part class HelloWorldWebPart extends the BaseClientSideWebPart. Qualquer web part do lado do cliente deve estender a classe BaseClientSideWebPart para ser definida como uma web part válida.Any client-side web part should extend the BaseClientSideWebPart class to be defined as a valid web part.

BaseClientSideWebPart implementa a funcionalidade mínima necessária para compilar uma web part.BaseClientSideWebPart implements the minimal functionality that is required to build a web part. Essa classe também fornece muitos parâmetros para validar e acessar propriedades somente leitura, como displayMode, propriedades da web part, o contexto da web part, a web part instanceId, a web part domElement e muito mais.This class also provides many parameters to validate and access read-only properties such as displayMode, web part properties, web part context, web part instanceId, the web part domElement, and much more.

A classe da web part está definida para aceitar um tipo de propriedade IHelloWorldWebPartProps.Notice that the web part class is defined to accept a property type IHelloWorldWebPartProps.

O tipo de propriedade é definido como uma interface antes da classe HelloWorldWebPart no arquivo HelloWorldWebPart.ts.The property type is defined as an interface before the HelloWorldWebPart class in the HelloWorldWebPart.ts file.

export interface IHelloWorldWebPartProps {
    description: string;
}

Essa definição de propriedade é usada para definir os tipos de propriedades personalizadas da web part descritos posteriormente na seção do painel de propriedades.This property definition is used to define custom property types for your web part, which is described in the property pane section later.

Método de renderização da Web PartWeb part render method

O elemento DOM onde a Web Part deve ser processada está disponível no método render. Esse método é usado para renderizar a Web Part dentro desse elemento DOM. Na Web Part HelloWorld, o elemento DOM está definido como uma DIV. Os parâmetros do método incluem o modo de exibição (Ler ou Editar) e as propriedades configuradas da Web Part, se houver alguma:The DOM element where the web part should be rendered is available in the render method. This method is used to render the web part inside that DOM element. In the HelloWorld web part, the DOM element is set to a DIV. The method parameters include the display mode (either Read or Edit) and the configured web part properties if any:

public render(): void {
  this.domElement.innerHTML = `
    <div class="${ styles.helloWorld }">
      <div class="${ styles.container }">
        <div class="${ styles.row }">
          <div class="${ styles.column }">
            <span class="${ styles.title }">Welcome to SharePoint!</span>
            <p class="${ styles.subTitle }">Customize SharePoint experiences using web parts.</p>
            <p class="${ styles.description }">${escape(this.properties.description)}</p>
            <a href="https://aka.ms/spfx" class="${ styles.button }">
              <span class="${ styles.label }">Learn more</span>
            </a>
          </div>
        </div>
      </div>
    </div>`;
}

Este modelo é suficientemente flexível para que as Web Parts possam ser compiladas em qualquer estrutura JavaScript e carregadas no elemento DOM.This model is flexible enough so that web parts can be built in any JavaScript framework and loaded into the DOM element.

Configurar o painel de propriedades da Web PartConfigure the Web part property pane

O painel de propriedades é definido na classe HelloWorldWebPart. A propriedade getPropertyPaneConfiguration é o local onde o painel de propriedades deve ser definido.The property pane is defined in the HelloWorldWebPart class. The getPropertyPaneConfiguration property is where you need to define the property pane.

Quando as propriedades são definidas, você pode acessá-las na web part usando this.properties.<property-value>, conforme mostrado no método render:When the properties are defined, you can access them in your web part by using this.properties.<property-value>, as shown in the render method:

<p class="${styles.description}">${escape(this.properties.description)}</p>

Observe que estamos executando um escape HTML no valor da propriedade para garantir uma cadeia de caracteres válida.Notice that we are performing an HTML escape on the property's value to ensure a valid string. Para saber mais sobre como trabalhar com o painel de propriedades e os tipos de campo do painel de propriedades, confira Torne configurável a web part do SharePoint do lado do cliente.To learn more about how to work with the property pane and property pane field types, see Make your SharePoint client-side web part configurable.

Agora, vamos adicionar mais algumas propriedades ao painel de propriedades: uma caixa de seleção, um menu suspenso e um botão ativar/desativar.Let's now add a few more properties to the property pane: a check box, a drop-down list, and a toggle. Primeiro, importamos os respectivos campos do painel de propriedade do Framework.We first start by importing the respective property pane fields from the framework.

  1. Role até o início do arquivo e adicione o seguinte à seção de importação do @microsoft/sp-property-pane:Scroll to the top of the file and add the following to the import section from @microsoft/sp-property-pane:

    PropertyPaneCheckbox,
    PropertyPaneDropdown,
    PropertyPaneToggle
    

    A seção de importação preenchida tem a seguinte aparência:The complete import section looks like the following:

    import {
      IPropertyPaneConfiguration,
      PropertyPaneTextField,
      PropertyPaneCheckbox,
      PropertyPaneDropdown,
      PropertyPaneToggle
    } from '@microsoft/sp-property-pane';
    
  2. Atualize as propriedades da web part para incluir as novas propriedades.Update the web part properties to include the new properties. Isso mapeia os campos para os objetos inseridos.This maps the fields to typed objects.

  3. Substitua a interface IHelloWorldWebPartProps pelo código a seguir.Replace the IHelloWorldWebPartProps interface with the following code.

    export interface IHelloWorldWebPartProps {
        description: string;
        test: string;
        test1: boolean;
        test2: string;
        test3: boolean;
    }
    
  4. Salve o arquivo.Save the file.

  5. Substitua o método getPropertyPaneConfiguration pelo código a seguir, que adiciona os novos campos do painel de propriedades e os mapeia para os respectivos objetos com tipo.Replace the getPropertyPaneConfiguration method with the following code, which adds the new property pane fields and maps them to their respective typed objects.

    protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
      return {
        pages: [
          {
            header: {
              description: strings.PropertyPaneDescription
            },
            groups: [
              {
                groupName: strings.BasicGroupName,
                groupFields: [
                PropertyPaneTextField('description', {
                  label: 'Description'
                }),
                PropertyPaneTextField('test', {
                  label: 'Multi-line Text Field',
                  multiline: true
                }),
                PropertyPaneCheckbox('test1', {
                  text: 'Checkbox'
                }),
                PropertyPaneDropdown('test2', {
                  label: 'Dropdown',
                  options: [
                    { key: '1', text: 'One' },
                    { key: '2', text: 'Two' },
                    { key: '3', text: 'Three' },
                    { key: '4', text: 'Four' }
                  ]}),
                PropertyPaneToggle('test3', {
                  label: 'Toggle',
                  onText: 'On',
                  offText: 'Off'
                })
              ]
              }
            ]
          }
        ]
      };
    }
    
  6. Depois de adicionar suas propriedades às propriedades da Web Part, você pode, agora, acessar as propriedades da mesma maneira que acessou a propriedade description anteriormente:After you add your properties to the web part properties, you can now access the properties in the same way you accessed the description property earlier:

    <p class="${ styles.description }">${escape(this.properties.test)}</p>
    

    Para definir o valor padrão das propriedades, é preciso atualizar o recipiente de propriedades properties do manifesto da web part.To set the default value for the properties, you need to update the web part manifest's properties property bag.

  7. Abra o arquivo HelloWorldWebPart.manifest.json e altere as properties para:Open HelloWorldWebPart.manifest.json and modify the properties to:

    "properties": {
      "description": "HelloWorld",
      "test": "Multi-line text field",
      "test1": true,
      "test2": "2",
      "test3": true
    }
    

Agora, o painel de propriedades da web part tem esses valores padrão para essas propriedades.The web part property pane now has these default values for those properties.

Manifesto da web partWeb part manifest

O arquivo HelloWorldWebPart.manifest.json define os metadados da Web Part como versão, identificação, nome para exibição, ícone e descrição.The HelloWorldWebPart.manifest.json file defines the web part metadata such as version, id, display name, icon, and description. Toda web part deve conter esse manifesto.Every web part must contain this manifest.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "fbcf2c6a-7df9-414c-b3f5-37cab6bb1280",
  "alias": "HelloWorldWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart"],

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "HelloWorld" },
    "description": { "default": "HelloWorld description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "HelloWorld",
      "test": "Multi-line text field",
      "test1": true,
      "test2": "2",
      "test3": true
    }
  }]
}

Agora que apresentamos as novas propriedades, hospede novamente a web part do ambiente de desenvolvimento local executando o comando a seguir.Now that we have introduced new properties, ensure that you are again hosting the web part from the local development environment by executing the following command. Isso também garante que as alterações anteriores tenham sido aplicadas corretamente.This also ensures that the previous changes were correctly applied.

gulp serve

Visualizar a web part no SharePointPreview the web part in SharePoint

O SharePoint Workbench também está hospedado no SharePoint para que você possa visualizar e testar suas web parts locais que se encontram em desenvolvimento.SharePoint Workbench is also hosted in SharePoint to preview and test your local web parts in development. A principal vantagem é que agora você está executando no contexto do SharePoint e pode interagir com os dados do SharePoint.The key advantage is that now you are running in SharePoint context and you are able to interact with SharePoint data.

  1. Acesse a seguinte URL: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspxGo to the following URL: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx

    Observação

    Se você não tiver o certificado de desenvolvedor da SPFx instalado, o Workbench avisará que ele está configurado para não carregar scripts do localhost.If you do not have the SPFx developer certificate installed, Workbench notifies you that it is configured not to load scripts from localhost. Interrompa o processo que está em execução na janela do console e execute o comando gulp trust-dev-cert no console do diretório do seu projeto para instalar o certificado de desenvolvedor antes de executar o comando gulp serve novamente.Stop the currently running process in the console window, and execute the gulp trust-dev-cert command in your project directory console to install the developer certificate before running the gulp servecommand again. Confira os detalhes sobre como instalar um certificado de desenvolvedor no artigo Configurar seu ambiente de desenvolvimento.See details on installing a developer certificate from the Set up your development environment article.

    SharePoint Workbench sendo executado em um site do SharePoint Online

  2. Observe que o SharePoint Workbench agora tem a barra de navegação do Pacote do Office 365.Notice that the SharePoint Workbench now has the Office 365 Suite navigation bar.

  3. Selecione o ícone adicionar na tela para revelar a caixa de ferramentas.Select the add icon in the canvas to reveal the toolbox. A caixa de ferramentas agora exibe as web parts disponíveis no site onde o SharePoint Workbench está hospedado juntamente com a HelloWorldWebPart.The toolbox now shows the web parts available on the site where the SharePoint Workbench is hosted along with your HelloWorldWebPart.

    Caixa de ferramentas do SharePoint Workbench sendo executada em um site do SharePoint Online

  4. Adicione HelloWorld da caixa de ferramentas.Add HelloWorld from the toolbox. Agora você está executando a Web Part em uma página hospedada no SharePoint!Now you're running your web part in a page hosted in SharePoint!

    web part HelloWorld sendo executada no SharePoint Workbench em um site do SharePoint Online

Observação

A cor da web part depende das cores do site.The color of the web part depends on the colors of the site. Por padrão, as web parts herdam as cores principais do site fazendo referência dinamicamente aos estilos do Office UI Fabric Core usados no site onde a web part está hospedada.By default, web parts inherit the core colors from the site by dynamically referencing Office UI Fabric Core styles used in the site where the web part is hosted.

Como você ainda está desenvolvendo e testando sua web part, não é necessário empacotar e implantar sua web part no SharePoint.Because you are still developing and testing your web part, there is no need to package and deploy your web part to SharePoint.

Próximas etapasNext steps

Parabéns por começar a executar sua primeira web part Hello World!Congratulations on getting your first Hello World web part running!

Agora que sua web part está em execução, você pode continuar compilando a web part Hello World no próximo tópico, Conecte sua web part ao SharePoint.Now that your web part is running, you can continue building out your Hello World web part in the next topic, Connect your web part to SharePoint. Você usará o mesmo projeto da web part Hello World e adicionará a capacidade de interagir com APIs REST da Lista do SharePoint.You will use the same Hello World web part project and add the ability to interact with SharePoint List REST APIs. O comando gulp serve ainda está em execução na janela do console (ou no Visual Studio Code, caso você esteja usando-o como editor).Notice that the gulp serve command is still running in your console window (or in Visual Studio Code if you are using that as editor). Você pode deixá-lo em execução enquanto acessa o próximo artigo.You can continue to let it run while you go to the next article.

Observação

Se você encontrar um problema na documentação ou na Estrutura do SharePoint, informe a engenharia do SharePoint usando a lista de problemas no repositório sp-dev-docs ou adicionando um comentário neste artigo.If you find an issue in the documentation or in the SharePoint Framework, please report that to SharePoint engineering by using the issue list at the sp-dev-docs repository or by adding a comment to this article. Agradecemos antecipadamente pela informação.Thanks for your input in advance.