Create Client Webpart that Displays SharePoint List Items Using React JS and REST API



Published: 2 November 2017

In this section, we will see how to create a webpart that reads SharePoint List Items using React JS .This will serve as a starting point for getting started with React JS development in SharePoint. In the upcoming article we will see how we can use ReactJS within SharePoint Framework. 


 Elements are the smallest building blocks of React apps.It describes what we want to see on the UI Say : 

const element = <h1>Display me at root node</h1>; 

reactdom.render is the starting point of the React component. Let's say we have a <div> somewhere in our HTML file: 

<div id="root"></div> 

so as to render our React element into the above root DOM node,we will pass both to ReactDOM.render() as : 

const element = <h1>Display me at root node</h1>;

ReactDOM.render(

  element,

  document.getElementById('root')

); 

This will display the message at root div.In our case we will be displaying the data retrieved from 'ProductSales' list in the div named 'CarSalesData'

ReactDOM.render(<ReactSP />, document.getElementById('CarSalesData'));

 

ReactSP represents the component that will be rendered at the CarSalesData div. ReactSP which is the component name is defined as plain javascript class which extends React.Component abstract class.We will also define at least one render method within it and will be defining the UI within this render method. 

Within the class we will also have a constructor which is the right place to initialize state. We will update this state with SharePoint data at a later point in the react lifecycle. If we don't have to initialize state and we are not binding any methods, we don't need to implement a constructor for our React component. 

Each component has several "lifecycle methods" that we can override to run the code at a particular time of the process. Methods that are prefixed with 'will' are called just before some event happens, and methods prefixed with 'did' are called just after an event happens. We will be making use of the 'componentDidMount' method to fetch data from SharePoint List and we will update the state with this data. In the render method, we will then read the state data and display it in the UI.

REACT and REST API script to display SharePoint data as Grid

To test the code implementation, copy the below code to a Content Editor Webpart in SharePoint. Ensure that you have the List with the specific columns as in the below code. 

Summary

Thus we explored how to implement a client webpart in SharePoint using REST API and React JS. In the upcoming article we will see how to integrate ReactJS with SharePoint Framework




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