SharePoint Framework Development Using React JS and REST API



Published: 31 July 2017

This is a continuation post in the SharePoint Framework Development series, In a previous article, we saw how to set up the development environment for SharePoint Framework. We also saw the basic Hello World web part creation and  how to provision SharePoint List with custom Site Columns and Content Type here

In this section, we will see how to create a SharePoint Framework webpart that reads SharePoint List Items using React JS and REST API. This will serve as a starting point for getting started with React JS development in SharePoint Framework. The major code files used for this demo can be downloaded from here.

Let’s get started with the creation of the project by creating a directory. 

md REACTGetItems

cd REACTGetItems 

Run the yeoman generator using the command ‘yo @microsoft/sharepoint’

Yeoman Generator will scaffold the project structure and after sometime we will get a Congratulations message indicating successful completion of the creation of the project structure. 

Edit the web part

Run Code . to  open the project in Visual Studio Code. We will be requiring jQuery to make ajax REST api calls. So let’s install jQuery using NPM as shown below. 

npm install --save jquery

npm install --save @types/jquery 

Later we will import them to the solution in the ReactGetItems.tsx file using:

import * as jquery from 'jquery'; 

Exploring the File Structure

We will be making use of the above marked files to implement the solution using React.

  • IReactgetItemsProps.TS : This will hold the properties that will be accessed by other files in the solution. By default, there is a description property defined, we will add another property ‘siteURL’ as well using the interface.
  • ReactGetItems/modue.scss : This will contain the css styles that are used within the TSX file.
  • ReactGetItems.tsx : This file serves as the major location where the UI and Logic is defined.
  • ReactGetItemsWebPart.ts : This acts as the starting point of the control flow and data rendering phase is initiated from this file using the ReactDom.render method.

ReactGetItemsWebPart.ts

The rendering of the web part is initiated from the ReactGetItemsWebPart TS file . Here ReactDom.render method takes the first parameter as the element that should be rendered (after processing some logic) at the second parameter. The element is defined by the class ‘ReactGetItems’. ReactGetItems extends React.Component in the ReactGetItems.tsx file that contains the major logic processing and UI.

IReactgetItemsProps.TS

This file contains the properties that will be accessed across the files and are declared using an Interface as shown below:

ReactGetItems/modue.scss

The css style used by the web part is defined within this file The CSS used for our web part is given below:

ReactGetItems.tsx

This is the primary file where the logic and UI is written. ReactDOM.render method in the ReactGetItemsWebPart file passes the control over to this file. Class ReactGetItems extends React.Component and implements a constructor where the state objects are initialized. The state object contains the list columns that will be populated using REST API calls. 

The class also contains componentDidMount method implementation which will be called after mounting of the component. We can also make use of componentWillMount which is synchronous in nature. We will make the REST API call within this method to retrieve the list items and add it to the state object. 

Finally, the render method will read the state object and build the UI

Test the Web part in SharePoint Online

Now let’s test the solution in SharePoint Online Workbench. Run Gulp Serve in the node command and head over to the SharePoint Online Workbench URL by appending ‘_layouts/15/workbench.aspx’ to the URL.  

The retrieved data has been displayed as Grid as shown below:

TSX File contents for retrieving list items using REST API and REACT

The tsx file contents used to retrieve the list items via rest api is given below :

Summary

Thus we saw how to create a SharePoint Framework webpart to retrieve and display list items using React JS and REST API. In the upcoming article we will explore how to do the same using KnockoutJS



Join 6,500 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers


About Author

Priyaranjan is a SharePoint Consultant with 7+ years experience in developing and deploying SharePoint Applications.He has worked on various SharePoint iterations starting from MOSS 2007 through SharePoint 2016 and Office 365. He is a frequent contributor at Microsoft TechNet and has won 33 Gold Medals in various TechNet Wiki Guru Monthly Competitions.As a token of appreciation for the TechNet community activities, he was interviewed by Microsoft Program Manager,Ed Price. He has also published 300 Articles and 4 SharePoint Ebooks in different technical communities.You can find his Microsoft TechNet contributions here