Important Points to Remember While Creating SPFx Web Parts

SPFx WebParts

Sharepoint Framework  

The SharePoint Framework (SPFx) is a web page and web part-based model. It offers complete assistance for client-aspect SharePoint development,  clean integration with SharePoint records,  and extending Microsoft groups. 

Further, we’ll learn how to make a web part with SharePoint Framework and how to create our first SPFx web part.

Setting Up SPFX Development Environment 

Install:  
1.node js 
2. Install any code editor that supports client-side development to create webpart: like Visual studio code
3. yeoman and gulp: npm install -g yo gulp 
4. Yeoman SharePoint generator: – npm install -g @microsoft/generator-sharepoint 

To get the node, gulp, and yeoman versions used: –  npm list -g –depth=0 

Create the First Web Part 

Web components are UI blocks that can be shown on a SharePoint page. 

By following the guidelines, let’s create a new  SPFx web part project.

  • Open the command prompt and
  • Create the folder where you want to create your webpart solution: md demoWebpart 
  • Enter in the folder: cd demoWebpart 
Further, to create a new solution on the present location, use the following command in the terminal

yo @microsoft/sharepoint  
After that generator will ask for the following user input: 

  • What is your solution name? (spfx-webpart): demowebpart 
  • Which type of client-side component to create?: webpart 
  • What is your Web part name?: demoWebpart 
  • Which template would you like to use: noframework 

Following this procedure, your demo Web Part will be created. Further, we can test the Web Part on a workbench after creating the solution.

Use gulp serve to test the web part on the workbench.

To deploy the build: 
gulp bundle –ship 
gulp package-solution –ship 

Web Part Using React Framework:

React components contain many functionalities and provides ability to receive properties. Components can transfer information among each other through properties. As a result, in this way you can control which view of web part will be display at any specific time slot.


For instance, the multiple views are built individually to make the programming and maintenance easier. Further, this also makes it easy for a group of developers to work on the same web part at the same time. Meanwhile, splitting the multiple views into independent React components, on the other hand, allows switching between them much easier. 

Creating Web Part Using React Framework:  

yo @microsoft/sharepoint 
What is your solution name? (spfx-webpart): webpartWithReact 
Which type of client-side component to create?: webpart 
What is your Web part name?: webpartWithReact 
Which template would you like to use: React

After this, your web part will be created.

In webpart, three files are created in src/webpart/component 
WebpartWithReactProp.ts: in this, we declare the properties 
WebpartWithReact.tsx: in this, we can use properties that are declared in WebpartWithReactProp.ts file 
WebpartWithReact.module.scss: write the CSS

Therefore, SharePoint web parts provide functionality for web developers to create an extremely efficient and user-friendly solution. Further, Web parts can display lists and libraries, data from external data sources, and content from other sites. To sum up, with versatility and inter-combinability SharePoint web part is an immensely powerful means to build up the content.

Related post

Zabbix 6.2

Zabbix 6.2 – More Powerful, Featureful, & Secure

The focus of infrastructure monitoring software company Zabbix has always been on innovation. Over the past 6 versions, the software company has made some necessary big and minor changes in its front end and back end to enhance usability and overall user experience.  

Read More »