Compilar el primer elemento web del lado cliente de SharePoint (parte 1 de Hello World)Build your first SharePoint client-side web part (Hello World part 1)

Los elementos web del lado cliente son los componentes del lado cliente que se ejecutan en el contexto de una página de SharePoint. Los elementos web del lado cliente se pueden implementar en SharePoint Online y también puede usar las herramientas y bibliotecas modernas de JavaScript para compilarlos.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.

Compatibilidad de elementos web del lado cliente:Client-side web parts support:

  • Compilar con HTML y JavaScript.Building with HTML and JavaScript.
  • Entornos de SharePoint Online y entornos locales.Both SharePoint Online and on-premises environments.

Nota

Antes de seguir los pasos de este artículo, asegúrese de Configurar el entorno de desarrollo.Before following the steps in this article, be sure to Set up your development environment.

También puede seguir estos pasos en el vídeo del canal de YouTube de SharePoint PnP:You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:



Crear un proyecto de elementos webCreate a new web part project

Para crear un proyecto de elementos webTo create a new web part project

  1. Cree un directorio de proyecto en su ubicación favorita.Create a new project directory in your favorite location.

    md helloworld-webpart
    
  2. Vaya al directorio del proyecto.Go to the project directory.

    cd helloworld-webpart
    
  3. Para crear un nuevo elemento web HelloWorld, ejecute el generador de SharePoint de Yeoman.Create a new HelloWorld web part by running the Yeoman SharePoint Generator.

yo @microsoft/sharepoint
  1. Cuando se le pida:When prompted:

    • Acepte el nombre de solución helloworld-webpart predeterminado y presione ENTRAR.Accept the default helloworld-webpart as your solution name, and then select Enter.
    • Seleccione SharePoint Online only (latest) (Solo SharePoint Online [más reciente]) y presione Entrar.Select SharePoint Online only (latest), and select Enter.
    • Seleccione Usar la carpeta actual para colocar los archivos.Select Use the current folder for where to place the files.
    • Seleccione N para permitir que la solución se implemente en todos los sitios de forma inmediata.Select N to allow the solution to be deployed to all sites immediately.
    • Seleccione N en la pregunta si la solución contiene permisos exclusivos.Select N on the question if solution contains unique permissions.
    • Seleccione Elemento web como tipo de componente del lado cliente que se va a crear.Select WebPart as the client-side component type to be created.
  2. En el siguiente conjunto de preguntas, se le pedirá información específica sobre el elemento web:The next set of prompts ask for specific information about your web part:

    • Acepte el nombre de elemento web HelloWorld predeterminado y presione ENTRAR.Accept the default HelloWorld as your web part name, and then select Enter.
    • Acepte la descripción de elemento web HelloWorld description (Descripción de HelloWorld) predeterminada y presione ENTRAR.Accept the default HelloWorld description as your web part description, and then select Enter.
    • Acepte el marco No javascript web framework (Ningún marco web de javascript) predeterminado y presione ENTRAR.Accept the default No javascript web framework as the framework you would like to use, and then select Enter.

    El generador de SharePoint de Yeoman le pide que cree una solución del lado cliente de elementos web

At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the HelloWorld web part. This might take a few minutes.At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the HelloWorld web part. This might take a few minutes.

Una vez completada la operación de scaffolding, verá el siguiente mensaje que indica que se ha realizado correctamente.When the scaffold is complete, you should see the following message indicating a successful scaffold.

Scaffolding realizado correctamente en la solución del lado cliente de SharePoint

Para obtener información sobre cómo solucionar los errores, consulte Problemas conocidos.For information about troubleshooting any errors, see Known issues.

Usar su editor de código favoritoUsing your favorite Code Editor

Dado que la solución del lado cliente de SharePoint está basada en HTML/TypeScript, puede usar cualquier editor de código que admita el desarrollo del lado cliente para compilar el elemento web, por ejemplo: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:

SharePoint Framework documentation uses Visual Studio code in the steps and examples. 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. 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.SharePoint Framework documentation uses Visual Studio code in the steps and examples. 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. 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.

Previsualizar el elemento webPreview the web part

Para previsualizar el elemento web, compílelo y ejecútelo en un servidor web local.To preview your web part, build and run it on a local web server. La cadena de herramientas del lado cliente usa el punto de conexión HTTPS de manera predeterminada.The client-side toolchain uses HTTPS endpoint by default. Esta opción se puede configurar en el archivo serve.json que se encuentra en la carpeta config, pero no le recomendamos que use los valores predeterminados.This setting can be configured in the serve.json file located in the config folder, but we do recommend using the default values.

Cambie a la consola, asegúrese de que todavía esté en el directorio helloworld-webpart y, después, escriba este comando:Switch to your console, ensure that you are still in the helloworld-webpart directory, and then enter the following command:

Nota

El certificado de desarrollador SOLO tiene que instalarse una vez en el entorno de desarrollo, por lo que puede omitir este paso si ya lo ejecutó en su entorno.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

Ahora que ha instalado el certificado de desarrollador, escriba el siguiente comando en la consola para compilar y previsualizar el elemento web: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 ejecuta una serie de tareas de Gulp para crear un servidor HTTPS local basado en nodos en localhost:4321 y. localhost:5432This command executes a series of gulp tasks to create a local, node-based HTTPS server on localhost:4321 and localhost:5432. A continuación, se inicia Workbench en el explorador predeterminado para obtener una vista previa de los elementos Web del entorno de desarrollo local.The workbench is then launched in your default browser to preview web parts from your local dev environment.

Nota

Si se muestren problemas con el certificado en el explorador, vea los detalles sobre cómo instalar un certificado de desarrollador en el artículo Configurar un entorno de desarrollo.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. Si sigue viendo problemas, compruebe que nada más está escuchando en los números de puerto, usando resmon. exe, la pestaña red y buscando puertos de escucha.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.

Proyecto de elementos web de Gulp serve

Las herramientas de desarrollo del lado cliente de SharePoint usan Gulp como ejecutor de tareas para controlar tareas de proceso de compilación, por ejemplo:SharePoint client-side development tools use gulp as the task runner to handle build process tasks such as:

  • Empaquetar y reducir archivos JavaScript y CSS.Bundling and minifying JavaScript and CSS files.
  • Ejecutar herramientas para llamar a las tareas de agrupación y reducción antes de cada compilación.Running tools to call the bundling and minification tasks before each build.
  • Compilar archivos SASS en CSS.Compiling SASS files to CSS.
  • Compilar archivos TypeScript en JavaScript.Compiling TypeScript files to JavaScript.

Visual Studio Code provides built-in support for gulp and other task runners. Select Ctrl+Shift+B on Windows or Cmd+Shift+B on Mac to debug and preview your web part.Visual Studio Code provides built-in support for gulp and other task runners. Select Ctrl+Shift+B on Windows or Cmd+Shift+B on Mac to debug and preview your web part.

SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. 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 is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. 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 en ejecución de forma local

Para usar SharePoint Workbench para previsualizar y probar el elemento webTo use SharePoint Workbench to preview and test your web part

  1. Para agregar el elemento web HelloWorld, seleccione el icono de agregar (este icono aparece al colocar el mouse sobre una sección, como se muestra en la imagen anterior). Abre el cuadro de herramientas, donde se muestra una lista de los elementos web disponibles que puede agregar. En la lista, se incluye el elemento web HelloWorld, así como otros elementos web disponibles localmente en el entorno de desarrollo.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). This opens the toolbox where you can see a list of web parts available for you to add. The list includes the HelloWorld web part as well other web parts available locally in your development environment.

    Cuadro de herramientas de SharePoint Workbench en localhost

  2. Seleccione HelloWorld para agregar el elemento web a la página.Select HelloWorld to add the web part to the page.

    Elemento web HelloWorld en SharePoint Workbench

    Enhorabuena. Acaba de agregar su primer elemento web del lado cliente a una página del lado cliente.Congratulations! You have just added your first client-side web part to a client-side page.

  3. Seleccione el icono del lápiz en el extremo izquierdo del elemento web para mostrar el panel de propiedades del elemento web.Select the pencil icon on the far left of the web part to reveal the web part property pane.

    Panel de propiedades del elemento web HelloWorld

    En el panel de propiedades puede definir las propiedades para personalizar el elemento web. El panel de propiedades se controla del lado cliente y proporciona un diseño coherente en 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 el texto del cuadro de texto Descripción por Los elementos web del lado cliente son increíbles.Modify the text in the Description text box to Client-side web parts are awesome!

    Observe cómo cambia el texto en el elemento web mientras escribe.Notice how the text in the web part also changes as you type.

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. By default, the update behavior is reactive and enables you to see the changes as you edit the properties. The changes are saved instantly when the behavior is reactive.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. By default, the update behavior is reactive and enables you to see the changes as you edit the properties. The changes are saved instantly when the behavior is reactive.

Estructura de proyecto de elementos webWeb part project structure

Para usar Visual Studio Code para explorar la estructura del proyecto de elementos webTo use Visual Studio Code to explore the web part project structure

  1. En la consola, interrumpa el procesamiento; para ello, seleccione Ctrl+C.In the console, break the processing by selecting Ctrl+C.

  2. Escriba el siguiente comando para abrir el proyecto de elementos web en Visual Studio Code (o use el editor que prefiera):Enter the following command to open the web part project in Visual Studio Code (or use your favorite editor):

    code .
    

    Estructura del proyecto HelloWorld

Si recibe un error, es posible que tenga que instalar el comando de código en PATH.If you get an error, you might need to install the code command in PATH.

TypeScript es el lenguaje principal para compilar elementos web del lado cliente de SharePoint. TypeScript es un superconjunto con tipo de JavaScript que se compila en JavaScript sin formato. Las herramientas de desarrollo del lado cliente de SharePoint se crean mediante clases, módulos e interfaces de TypeScript para ayudar a los desarrolladores a compilar elementos web del lado cliente sólidos.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.

Aquí tiene algunos archivos clave del proyecto.The following are some key files in the project.

Clase de elemento webWeb part class

HelloWorldWebPart.ts in the src\webparts\helloworld folder defines the main entry point for the web part. The web part class HelloWorldWebPart extends the BaseClientSideWebPart. Any client-side web part should extend the BaseClientSideWebPart class to be defined as a valid web part.HelloWorldWebPart.ts in the src\webparts\helloworld folder defines the main entry point for the web part. The web part class HelloWorldWebPart extends the BaseClientSideWebPart. Any client-side web part should extend the BaseClientSideWebPart class to be defined as a valid web part.

BaseClientSideWebPart implements the minimal functionality that is required to build a web part. 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.BaseClientSideWebPart implements the minimal functionality that is required to build a web part. 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.

Observe que la clase de elemento web se define para aceptar un tipo de propiedad IHelloWorldWebPartProps.Notice that the web part class is defined to accept a property type IHelloWorldWebPartProps.

El tipo de propiedad se define como interfaz antes de la clase HelloWorldWebPart en el archivo HelloWorldWebPart.ts.The property type is defined as an interface before the HelloWorldWebPart class in the HelloWorldWebPart.ts file.

export interface IHelloWorldWebPartProps {
    description: string;
}

Esta definición de propiedad se usa para definir tipos de propiedad personalizados para el elemento web, que se describe en la sección del panel de propiedades más adelante.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 representación de elementos webWeb part render method

El elemento DOM en que se debe representar el elemento web está disponible en el método render. Este método se usa para representar el elemento web dentro de ese elemento DOM. En el elemento web HelloWorld, el elemento DOM está establecido en un DIV. Los parámetros del método incluyen el modo de presentación (Leer o Editar) y las propiedades configuradas del elemento web, si las tiene: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 es flexible, de modo que se puedan compilar elementos web en cualquier marco de JavaScript y cargar en el 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 el panel de propiedades del elemento webConfigure the Web part property pane

El panel de propiedades se define en la clase HelloWorldWebPart. Tiene que definir el panel de propiedades en la propiedad getPropertyPaneConfiguration.The property pane is defined in the HelloWorldWebPart class. The getPropertyPaneConfiguration property is where you need to define the property pane.

Al definir las propiedades, puede tener acceso a ellas en el elemento web mediante this.properties.<property-value>, como se muestra en el 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>

Notice that we are performing an HTML escape on the property's value to ensure a valid string. 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.Notice that we are performing an HTML escape on the property's value to ensure a valid string. 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.

Let's now add a few more properties to the property pane: a check box, a drop-down list, and a toggle. We first start by importing the respective property pane fields from the framework.Let's now add a few more properties to the property pane: a check box, a drop-down list, and a toggle. We first start by importing the respective property pane fields from the framework.

  1. Desplácese a la parte superior del archivo y agregue lo siguiente a la sección de importación de @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
    

    La sección de importación completa será similar a la siguiente:The complete import section looks like the following:

    import {
      IPropertyPaneConfiguration,
      PropertyPaneTextField,
      PropertyPaneCheckbox,
      PropertyPaneDropdown,
      PropertyPaneToggle
    } from '@microsoft/sp-property-pane';
    
  2. Update the web part properties to include the new properties. This maps the fields to typed objects.Update the web part properties to include the new properties. This maps the fields to typed objects.

  3. Reemplace la interfaz IHelloWorldWebPartProps por el código siguiente.Replace the IHelloWorldWebPartProps interface with the following code.

    export interface IHelloWorldWebPartProps {
        description: string;
        test: string;
        test1: boolean;
        test2: string;
        test3: boolean;
    }
    
  4. Guarde el archivo.Save the file.

  5. Reemplace el método getPropertyPaneConfiguration por el siguiente código para agregar los nuevos campos del panel de propiedades y asignarlos a sus respectivos objetos con 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. Después de agregar las propiedades al elemento web, puede acceder a las propiedades de la misma forma en la que ha accedido a la propiedad 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 establecer el valor predeterminado de las propiedades, debe actualizar el contenedor de propiedades properties del manifiesto del elemento web.To set the default value for the properties, you need to update the web part manifest's properties property bag.

  7. Abra HelloWorldWebPart.manifest.json y modifique properties por:Open HelloWorldWebPart.manifest.json and modify the properties to:

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

El panel de propiedades del elemento web ahora tiene estos valores predeterminados para las propiedades.The web part property pane now has these default values for those properties.

Manifiesto de elemento webWeb part manifest

The HelloWorldWebPart.manifest.json file defines the web part metadata such as version, id, display name, icon, and description. Every web part must contain this manifest.The HelloWorldWebPart.manifest.json file defines the web part metadata such as version, id, display name, icon, and description. 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
    }
  }]
}

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. This also ensures that the previous changes were correctly applied.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. This also ensures that the previous changes were correctly applied.

gulp serve

Previsualizar el elemento web en SharePointPreview the web part in SharePoint

SharePoint Workbench is also hosted in SharePoint to preview and test your local web parts in development. The key advantage is that now you are running in SharePoint context and you are able to interact with SharePoint data.SharePoint Workbench is also hosted in SharePoint to preview and test your local web parts in development. The key advantage is that now you are running in SharePoint context and you are able to interact with SharePoint data.

  1. Vaya a la siguiente dirección URL: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx.Go to the following URL: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx

    Nota

    Si no tiene instalado el certificado de desarrollador de SPFx, Workbench le indicará que está configurado para no cargar scripts de localhost.If you do not have the SPFx developer certificate installed, Workbench notifies you that it is configured not to load scripts from localhost. Detenga el proceso actualmente en ejecución en la ventana de la consola y ejecute el comando gulp trust-dev-cert en la consola del directorio del proyecto para instalar el certificado de desarrollador antes de ejecutar de nuevo el comando gulp serve.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. Vea los detalles sobre cómo instalar un certificado de desarrollador en el artículo Configurar un entorno de desarrollo.See details on installing a developer certificate from the Set up your development environment article.

    SharePoint Workbench en ejecución en un sitio de SharePoint Online

  2. Observe que SharePoint Workbench tiene ahora la barra de navegación del conjunto de aplicaciones de Office 365.Notice that the SharePoint Workbench now has the Office 365 Suite navigation bar.

  3. Select the add icon in the canvas to reveal the toolbox. The toolbox now shows the web parts available on the site where the SharePoint Workbench is hosted along with your HelloWorldWebPart.Select the add icon in the canvas to reveal the toolbox. The toolbox now shows the web parts available on the site where the SharePoint Workbench is hosted along with your HelloWorldWebPart.

    Cuadro de herramientas de SharePoint Workbench en ejecución en un sitio de SharePoint Online

  4. Add HelloWorld from the toolbox. Now you're running your web part in a page hosted in SharePoint!Add HelloWorld from the toolbox. Now you're running your web part in a page hosted in SharePoint!

    Elemento web HelloWorld en ejecución en SharePoint Workbench en ejecución en un sitio de SharePoint Online

Nota

The color of the web part depends on the colors of the site. 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.The color of the web part depends on the colors of the site. 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 todavía está desarrollando y probando el elemento web, no es necesario empaquetarlo e implementarlo en SharePoint.Because you are still developing and testing your web part, there is no need to package and deploy your web part to SharePoint.

Pasos siguientesNext steps

Enhorabuena por ejecutar su primer elemento web Hello World.Congratulations on getting your first Hello World web part running!

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. You will use the same Hello World web part project and add the ability to interact with SharePoint List REST APIs. 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). You can continue to let it run while you go to the next article.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. You will use the same Hello World web part project and add the ability to interact with SharePoint List REST APIs. 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). You can continue to let it run while you go to the next article.

Nota

Si encuentra un problema en la documentación o en SharePoint Framework, informe al servicio de ingeniería de SharePoint; para hacerlo, use la lista de problemas en el repositorio de sp-dev-docs, o bien agregue un comentario a este artículo. Le agradecemos de antemano su participación.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. Thanks for your input in advance.