Hello World Client Web Part with SPFx and Reactjs framework

By | August 8, 2018

This post will explain how to create a simple hello world client web part in Visual Studio Code.

First, Start Command Prompt and navigate to your projects folder.

  1. Type below commands in CMD and enter

md HelloWorldWebPart

cd HelloWorldWebPart

Create the web part using Yeoman SharePoint Generator.

yo @microsoft/sharepoint

Select the default values, web part type, reactjs framework, SharePoint Online as shown in the below screenshot and enter.

It takes a while to create the solution for you, be little patient at this step.

You will see below Congratulations message once the client web part solution is created successfully.

Now, to build and test the web part in the local work bench,

  • first, we need to install the developer certificate locally by executing below command
  • When it prompts, click yes to install the certificate

gulp trust-dev-cert

  • Second, execute the below command to run the series of gulp tasks

gulp serve

SharePoint Workbench helps us to test the client web parts without deploying them to SharePoint directly.

  • finally, click on the + sign to add the web part to the page.

Open Visual Studio Code and open HelloWorldWebpart project to examine the project folder hierarchy.

So, we now know how to create the SPFx client web part and test it in SharePoint Online.

In the next post, I will discuss about playing with data in client web part and how to create a production ready client web part.

2 thoughts on “Hello World Client Web Part with SPFx and Reactjs framework

  1. Nelson Mittman

    Hey there, You’ve done a great job. I will definitely digg it and personally recommend to my friends. I’m confident they’ll be benefited from this site.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *