Developing SharePoint Framework Web Parts Using ReactJS - Part One

Introduction

 

In this article, you will get an introduction for developing  SharePoint framework webparts using React JavaScript framework.

 

ReactJS

 

React is a front-end JavaScript library developed and licensed by Facebook. React is famous for V (View) in MVC, which helps in building reusable components. It has been used in Delve and new document libraries on Office 365 portals by Microsoft.

 

Let us not get too deep into the framework. The focus will be developing the web parts using the framework.

 

I am assuming you have already set up the basic environment for developing SPFx web parts. In my previous articles, you can learn developing SharePoint framework web parts with out using any third party frameworks like React. Also you can find the steps for setting up prerequisites, CDN and creating the first web part without third party frameworks.

• Developing Web Parts Using SharePoint Framework - Part One
• Developing Web Parts Using SharePoint Framework - Part Two 
• Developing Web Parts Using SharePoint Framework - Part Three 

First, you will see how to create SPFx web part with React JS. 

 

Create SPFx web part using React JS

 

Open the command prompt and run as admin. Navigate to the respective folder and start creating the web part using "yo @microsoft/sharepoint". Provide necessary inputs.

 

The snapshot given below shows the steps for creating the web part. Note, I have selected the "React" as framework for the development.

 

The necessary code files are present under src folder. The folder contains webpart property definition file, web part file, and manifest file. The component sub folder contains the local properties, custom react javascript file, style and style config files. 

 

React Components 

• The react components are written inside .tsx file.
• The .tsx file contains a class which extends React.Component with necessary properties and state objects.
• The properties are inherited from properties definition file.
• The state object is defined using the interface. The state stores the data in multiple forms.
• The render method creates virtual DOM to display the data. 

Web Part Components

• The web part file contains class which inherits BaseClientSideWebPart, with render method and property pane definition method.
• The render method in the web part file has React.createElement, which is the entry point for the react components.
• It has three parameters. They are type, props and children. The type can be class or string. The props contain the properties for the web part. 

Summary

 

Thus, you have seen the basics about developing the SPFx web parts using react javascript framework.  

 

What Next?

 

In my next article, you will learn developing SPFx web part to retrieve and render list items using react framework.