Создание первой клиентской веб-части SharePoint (Hello World, часть 1)Build your first SharePoint client-side web part (Hello World part 1)

Клиентские веб-части — это клиентские компоненты, которые запускаются в контексте страницы SharePoint. Клиентские веб-части можно развертывать в SharePoint Online, а для их создания также можно использовать современные инструменты и библиотеки JavaScript.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.

Поддержка клиентских веб-частей:Client-side web parts support:

  • Создание при помощи HTML и JavaScript.Building with HTML and JavaScript.
  • Как SharePoint Online, так и локальные среды.Both SharePoint Online and on-premises environments.

Примечание

Прежде чем выполнять действия, описанные в этой статье, обязательно настройте среду разработки.Before following the steps in this article, be sure to Set up your development environment.

Эти действия также показаны в видео на канале SharePoint PnP в YouTube:You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:



Создание проекта веб-частиCreate a new web part project

Создание проекта веб-частиTo create a new web part project

  1. Создайте каталог проекта в любом расположении.Create a new project directory in your favorite location.

    md helloworld-webpart
    
  2. Перейдите к каталогу проекта.Go to the project directory.

    cd helloworld-webpart
    
  3. Создайте веб-часть HelloWorld, запустив генератор Yeoman для SharePoint.Create a new HelloWorld web part by running the Yeoman SharePoint Generator.

yo @microsoft/sharepoint
  1. Когда появится запрос, сделайте следующее:When prompted:

    • Оставьте имя по умолчанию (helloworld-webpart) для своего решения и нажмите клавишу ВВОД.Accept the default helloworld-webpart as your solution name, and then select Enter.
    • Выберите SharePoint Online only (latest) (Только SharePoint Online, последняя версия) и нажмите клавишу ВВОД.Select SharePoint Online only (latest), and select Enter.
    • Выберите вариант Use the current folder (Использовать текущую папку) для размещения файлов.Select Use the current folder for where to place the files.
    • Выберите N , чтобы разрешить развертывание решения на всех сайтах немедленно.Select N to allow the solution to be deployed to all sites immediately.
    • Выберите N для данного вопроса, если решение содержит уникальные разрешения.Select N on the question if solution contains unique permissions.
    • Выберите WebPart в качестве типа создаваемого клиентского компонента.Select WebPart as the client-side component type to be created.
  2. Ниже требуется указать информацию о веб-части:The next set of prompts ask for specific information about your web part:

    • Оставьте имя по умолчанию (HelloWorld) для своей веб-части и нажмите клавишу ВВОД.Accept the default HelloWorld as your web part name, and then select Enter.
    • Оставьте описание HelloWorld по умолчанию для своей веб-части и нажмите клавишу ВВОД.Accept the default HelloWorld description as your web part description, and then select Enter.
    • Оставьте выбранным параметр No javascript web framework (Не использовать платформу веб-решений на базе JavaScript) и нажмите клавишу ВВОД.Accept the default No javascript web framework as the framework you would like to use, and then select Enter.

    Генератор Yeoman для SharePoint предлагает создать клиентскую веб-часть

После этого Yeoman установит необходимые зависимости и сформирует шаблоны файлов решения, а также веб-части HelloWorld.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.

После успешного формирования шаблона должно появиться следующее сообщение:When the scaffold is complete, you should see the following message indicating a successful scaffold.

"Формирование шаблона клиентского решения SharePoint успешно выполнено".

Сведения об устранении неполадок см. в статье Известные проблемы.For information about troubleshooting any errors, see Known issues.

Использование удобного редактора кодаUsing your favorite Code Editor

Так как клиентские решения SharePoint созданы с помощью HTML и TypeScript, для разработки веб-части можно использовать любой редактор кода, который поддерживает клиентское программирование, например: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, используется Visual Studio Code.SharePoint Framework documentation uses Visual Studio code in the steps and examples. Visual Studio Code — мощный редактор исходного кода от корпорации Майкрософт, который занимает мало места на диске и работает на компьютерах с Windows, Mac OS и 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. Он изначально поддерживает JavaScript, TypeScript и Node.js, а также предусматривает использование богатой экосистемы расширений для других языков (например, C++, C#, Python, PHP) и сред выполнения.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.

Предварительный просмотр веб-частиPreview the web part

Чтобы просмотреть веб-часть, выполните сборку и запустите ее на локальном веб-сервере.To preview your web part, build and run it on a local web server. В клиентской цепочке инструментов по умолчанию используется конечная точка HTTPS.The client-side toolchain uses HTTPS endpoint by default. Этот параметр можно настроить в файле serve.json, расположенном в папке config, но мы рекомендуем использовать значения по умолчанию.This setting can be configured in the serve.json file located in the config folder, but we do recommend using the default values.

Перейдите в консоль, убедитесь, что по-прежнему выбран каталог helloworld-webpart, и введите следующую команду:Switch to your console, ensure that you are still in the helloworld-webpart directory, and then enter the following command:

Примечание

Сертификат разработчика устанавливается в среде разработки ВСЕГО один раз, поэтому вы можете пропустить этот шаг, если вы уже выполнили в своей среде эту команду.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

Теперь, когда вы установили сертификат разработчика, введите в консоли следующую команду для сборки и предварительного просмотра веб-части:Now that we have installed the developer certificate, enter the following command in the console to build and preview your web part:

gulp serve

Эта команда выполняет ряд задач gulp для создания локального сервера HTTPS на localhost:4321 основе узла и. localhost:5432This command executes a series of gulp tasks to create a local, node-based HTTPS server on localhost:4321 and localhost:5432. После этого Workbench запускается в браузере по умолчанию для просмотра веб-частей в локальной среде разработки.The workbench is then launched in your default browser to preview web parts from your local dev environment.

Примечание

Если вы обнаружили проблемы с сертификатом в браузере, ознакомьтесь с информацией об установке сертификата разработчика в этой статье.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. Если вы по-прежнему видите проблемы, убедитесь, что все остальные порты прослушиваются с помощью ресмон. exe, вкладки Сеть и просмотрев порты прослушивания.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.

Проект веб-части gulp serve

Инструменты клиентской разработки SharePoint используют Gulp как средство запуска таких задач по сборке, как:SharePoint client-side development tools use gulp as the task runner to handle build process tasks such as:

  • объединение и минификация файлов JavaScript и CSS;Bundling and minifying JavaScript and CSS files.
  • запуск инструментов для вызова задач по объединению и минификации перед каждой сборкой;Running tools to call the bundling and minification tasks before each build.
  • компиляция файлов SASS в CSS;Compiling SASS files to CSS.
  • компиляция файлов TypeScript в JavaScript.Compiling TypeScript files to JavaScript.

Visual Studio Code поддерживает Gulp и другие средства запуска задач.Visual Studio Code provides built-in support for gulp and other task runners. Нажмите клавиши CTRL+SHIFT+B в Windows или CMD+SHIFT+B в Mac OS для отладки и просмотра веб-части.Select Ctrl+Shift+B on Windows or Cmd+Shift+B on Mac to debug and preview your web part.

SharePoint Workbench — это рабочая область конструирования для разработчиков, которая позволяет быстро просматривать и проверять веб-части, не развертывая их в SharePoint.SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. SharePoint Workbench включает клиентскую страницу и клиентский холст, на которых можно добавлять, удалять и проверять веб-части, которые находятся в разработке.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, запущенная локально

Предварительный просмотр и тестирование веб-части с помощью SharePoint WorkbenchTo use SharePoint Workbench to preview and test your web part

  1. Чтобы добавить веб-часть HelloWorld, выберите значок добавления (этот значок появляется, когда вы наводите курсор мыши на раздел, как показано на предыдущем изображении).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. Список включает веб-часть HelloWorld, а также другие веб-части, доступные локально в среде разработки.The list includes the HelloWorld web part as well other web parts available locally in your development environment.

    Панель элементов SharePoint Workbench по адресу localhost

  2. Выберите пункт HelloWorld, чтобы добавить эту веб-часть на страницу.Select HelloWorld to add the web part to the page.

    Веб-часть HelloWorld в SharePoint Workbench

    Поздравляем! Вы только что добавили свою первую клиентскую веб-часть на клиентскую страницу.Congratulations! You have just added your first client-side web part to a client-side page.

  3. Выберите значок карандаша в крайнем левом углу веб-части, чтобы открыть панель свойств веб-части.Select the pencil icon on the far left of the web part to reveal the web part property pane.

    Панель свойств веб-части HelloWorld

    На панели свойств можно задавать свойства для настройки веб-части. Панель свойств запускается на стороне клиента и имеет одинаковый дизайн для всех веб-частей 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. Измените текст в поле Описание на текст Клиентские веб-части — это великолепно!Modify the text in the Description text box to Client-side web parts are awesome!

    Обратите внимание, что при вводе текст в веб-части также меняется.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.

Структура проекта веб-частиWeb part project structure

Анализ структуры проекта веб-части с помощью Visual Studio CodeTo use Visual Studio Code to explore the web part project structure

  1. В консоли остановите обработку, нажав CTRL+C.In the console, break the processing by selecting Ctrl+C.

  2. Введите следующую команду, чтобы открыть проект веб-части в Visual Studio Code (или используйте другой редактор):Enter the following command to open the web part project in Visual Studio Code (or use your favorite editor):

    code .
    

    Структура проекта HelloWorld

Если возникла ошибка, задайте команду code в PATH.If you get an error, you might need to install the code command in PATH.

TypeScript — это основной язык для создания клиентских веб-частей SharePoint. TypeScript — это типизированная расширенная версия языка JavaScript. Код TypeScript компилируется в обычный JavaScript. Клиентские средства разработки SharePoint основаны на классах, модулях и интерфейсах TypeScript, что позволяет разработчикам создавать надежные клиентские веб-части.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.

Ниже приведены некоторые ключевые файлы в проекте.The following are some key files in the project.

Класс веб-частиWeb part class

HelloWorldWebPart.ts в папке src\webparts\helloworld определяет основную точку входа для веб-части.HelloWorldWebPart.ts in the src\webparts\helloworld folder defines the main entry point for the web part. Класс веб-части HelloWorldWebPart расширяет класс BaseClientSideWebPart.The web part class HelloWorldWebPart extends the BaseClientSideWebPart. Чтобы клиентская веб-часть была допустимой, она должна расширять класс BaseClientSideWebPart.Any client-side web part should extend the BaseClientSideWebPart class to be defined as a valid web part.

Класс BaseClientSideWebPart обеспечивает минимальную функциональность, необходимую для создания веб-части.BaseClientSideWebPart implements the minimal functionality that is required to build a web part. Он также предоставляет много параметров для проверки и доступа к свойствам, доступным только для чтения (например, displayMode), другим свойствам веб-частей, контексту веб-частей, а также свойствам instanceId и domElement.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.

Обратите внимание, что класс веб-части определяется как принимающий свойство типа IHelloWorldWebPartProps.Notice that the web part class is defined to accept a property type IHelloWorldWebPartProps.

Тип свойства определяется как интерфейс перед классом HelloWorldWebPart в файле HelloWorldWebPart.ts.The property type is defined as an interface before the HelloWorldWebPart class in the HelloWorldWebPart.ts file.

export interface IHelloWorldWebPartProps {
    description: string;
}

С помощью этого определения свойства задаются типы настраиваемых свойств для веб-части. Дополнительные сведения см. в разделе, посвященном области свойств, ниже.This property definition is used to define custom property types for your web part, which is described in the property pane section later.

Метод отрисовки веб-частиWeb part render method

Элемент DOM, в котором должна отрисовываться веб-часть, доступен в методе render. Этот метод используется для отрисовки веб-части в этом элементе DOM. В веб-части HelloWorld элемент DOM присвоен переменной DIV. Параметры метода включают режим отображения (чтение или редактирование) и настроенные свойства веб-части, если они есть: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>`;
}

Эта модель достаточно гибкая — в элемент DOM можно загружать веб-части, созданные на любой платформе JavaScript.This model is flexible enough so that web parts can be built in any JavaScript framework and loaded into the DOM element.

Настройка области свойств веб-частиConfigure the Web part property pane

Область свойств определяется в классе HelloWorldWebPart. Панель свойств нужно настраивать в свойстве getPropertyPaneConfiguration.The property pane is defined in the HelloWorldWebPart class. The getPropertyPaneConfiguration property is where you need to define the property pane.

Когда свойства заданы, вы можете получить к ним доступ в веб-части, используя строку this.properties.<property-value>, как показано в примере с методом 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>

Обратите внимание, что мы выполняем управляющий код HTML для значения свойства, чтобы убедиться, что строка является допустимой.Notice that we are performing an HTML escape on the property's value to ensure a valid string. Дополнительные сведения о работе с областью свойств и типами ее полей см. в статье Сделайте клиентскую веб-часть SharePoint настраиваемой.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.

  1. Перейдите к верхней части файла и добавьте приведенный ниже код в раздел импорта из @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
    

    Полный раздел импорта выглядит следующим образом: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.

  3. Замените интерфейс IHelloWorldWebPartProps на приведенный ниже код.Replace the IHelloWorldWebPartProps interface with the following code.

    export interface IHelloWorldWebPartProps {
        description: string;
        test: string;
        test1: boolean;
        test2: string;
        test3: boolean;
    }
    
  4. Сохраните файл.Save the file.

  5. Замените метод getPropertyPaneConfiguration указанным ниже кодом, который добавляет новые поля области свойств и сопоставляет их с соответствующими типизированными объектами.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. После добавления свойств веб-части к ним можно получить доступ так же, как к свойству description: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>
    

    Чтобы задать значение по умолчанию для этих свойств, необходимо обновить контейнер свойств properties манифеста веб-части.To set the default value for the properties, you need to update the web part manifest's properties property bag.

  7. Откройте файл HelloWorldWebPart.manifest.json и замените properties следующим кодом:Open HelloWorldWebPart.manifest.json and modify the properties to:

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

Теперь для указанных свойств области свойств веб-части заданы эти значения по умолчанию.The web part property pane now has these default values for those properties.

Манифест веб-частиWeb part manifest

Файл HelloWorldWebPart.manifest.json определяет метаданные веб-части, такие как версия, идентификатор, отображаемое имя, значок и описание.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.

gulp serve

Просмотр веб-части в SharePointPreview the web part in SharePoint

В SharePoint размещается рабочая область SharePoint Workbench, чтобы вы могли просматривать и проверять локальные веб-части, которые находятся в разработке.SharePoint Workbench is also hosted in SharePoint to preview and test your local web parts in development. Ее основное преимущество состоит в том, что веб-части запускаются в контексте SharePoint, и вы можете работать с данными SharePoint.The key advantage is that now you are running in SharePoint context and you are able to interact with SharePoint data.

  1. Перейдите по следующему URL-адресу: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspxGo to the following URL: https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx

    Примечание

    Если у вас не установлен сертификат разработчика SPFx, Workbench сообщит вам, что он не загружает сценарии из localhost.If you do not have the SPFx developer certificate installed, Workbench notifies you that it is configured not to load scripts from localhost. Остановите процесс, выполняющийся в данный момент в окне консоли, выполните команду gulp trust-dev-cert в консоли каталога проекта, чтобы установить сертификат разработчика, а затем выполните команду 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. Ознакомьтесь с информацией об установке сертификата разработчика в статье Настройка среды разработки.See details on installing a developer certificate from the Set up your development environment article.

    Версия SharePoint Workbench, запущенная на сайте SharePoint Online

  2. Обратите внимание, что SharePoint Workbench теперь включает панель навигации 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. В панели элементов теперь отображаются веб-части, доступные на сайте с SharePoint Workbench, а также веб-часть HelloWorldWebPart.The toolbox now shows the web parts available on the site where the SharePoint Workbench is hosted along with your HelloWorldWebPart.

    Панель элементов в версии SharePoint Workbench, запущенной на сайте SharePoint Online

  4. Добавьте HelloWorld из панели элементов.Add HelloWorld from the toolbox. Теперь ваша веб-часть работает на странице в SharePoint.Now you're running your web part in a page hosted in SharePoint!

    Веб-часть HelloWorld в версии SharePoint Workbench, запущенной на сайте SharePoint Online

Примечание

Цвет веб-части зависит от цвета сайта.The color of the web part depends on the colors of the site. По умолчанию веб-часть наследует основные цвета с сайта, на котором она размещена, с помощью динамических ссылок на используемые там стили Office UI Fabric Core.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.

Так как ваша веб-часть по-прежнему находится на этапе разработки и тестирования, ее не нужно упаковывать и развертывать в SharePoint.Because you are still developing and testing your web part, there is no need to package and deploy your web part to SharePoint.

Дальнейшие действияNext steps

Поздравляем с запуском вашей первой веб-части Hello World!Congratulations on getting your first Hello World web part running!

Теперь, когда веб-часть работает, вы можете продолжить ее разработку, ознакомившись со статьей Подключение веб-части к 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. В ней рассказывается, как добавить в веб-часть Hello World возможность взаимодействия с REST API для списков SharePoint.You will use the same Hello World web part project and add the ability to interact with SharePoint List REST APIs. Обратите внимание, что команда gulp serve по-прежнему запущена в окне консоли (или в Visual Studio Code, если вы используете этот редактор).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.

Примечание

Если вы обнаружили ошибку в документации или SharePoint Framework, сообщите о ней разработчикам SharePoint, указав в списке проблем для репозитория sp-dev-docs или добавив комментарий к этой статье.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.