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.
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.
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';
We will be making use of the above marked files to implement the solution using React.
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.
This file contains the properties that will be accessed across the files and are declared using an Interface as shown below:
The css style used by the web part is defined within this file The CSS used for our web part is given below:
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
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:
The tsx file contents used to retrieve the list items via rest api is given below :
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
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