Automate Marketing Initiatives with Salesforce Marketing Cloud Learn More

Important Points to Remember While Creating SPFx Web Parts



Published On:

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

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 

A place for big ideas.

Reimagine organizational performance while delivering a delightful experience through optimized operations.

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.


Top Stories

Microsoft Azure Cloud
5 Reasons to Use Microsoft Azure Cloud for Your Enterprise
Cloud computing is the stream of modern computer science technology in which we learn how to deliver different services through the Internet. These services include tools like servers, data storage, databases, networking, and software. Cloud computing is an optimized solution for people and enterprises looking for several benefits, such as
Cloud Computing Platform
What Makes Microsoft Azure a Better Cloud Computing Platform
Microsoft has leveraged its continuously expanding worldwide network of data centers to create Azure cloud, a platform for creating, deploying, and managing services and applications anywhere. Azure provides an ever-expanding array of tools and services designed to fulfill all your needs through one convenient, easy-to-manage Platform. Azure sums up the
Azure Cloud
Things You Should Know About Microsoft Azure Cloud Computing
Microsoft Azure is a cloud computing service provided by Microsoft. Azure has over 600 benefits, but overall, Azure is a web-based platform for building, testing, managing, and deploying applications and services. Azure offers three main functional areas. Virtual machines, cloud services, and application services. Microsoft Azure is a platform for
Microsoft Azure Cloud Computing
What Are the Options for Automation Using Microsoft Azure?
Automation is at the forefront of all enterprise IT solutions. If processes overlap, use technical resources to automate them. If your function takes a long time, find a way to automate it. If the task is of little value and no one needs to work on it, automate it. This
Apache Airflow
How to Create and Run DAGs in Apache Airflow
Apache Airflow is an open source distributed workflow management platform built for data orchestration. Maxime Beauchemin first started his Airflow project on his Airbnb. After the project's success, the Apache Software Foundation quickly adopted his Airflow project. Initially, he was hired as an incubator project in 2016 and later as
Apache Airflow Automation
How Easy is it to Get Started with Apache Airflow?
Apache Airflow is a workflow engine that efficiently plans and executes complex data pipelines. It ensures that each task in your data pipeline runs in the correct order and that each job gets the resources it needs. It provides a friendly UI to monitor and fix any issues. Airflow is


          Keep an eye on your inbox for the PDF, it's on its way!

          If you don't see it in your inbox, don't forget to give your junk folder a quick peek. Just in case. 

              You have successfully subscribed to the newsletter

              There was an error while trying to send your request. Please try again.

              Zehntech will use the information you provide on this form to be in touch with you and to provide updates and marketing.