SharePoint Framework is the new development model in which lots of work has been going on in the past year. It went to General Availability on Feb 23, 2017. It is a page and Web Part model that provides full support for client-side SharePoint development, easy integration with SharePoint data and support for open source tooling. With SharePoint Framework, you can use modern Web technologies and tools in your preferred development environment to build productive experiences and apps in SharePoint.

In this article, we will see how to create a client Web Part, using SharePoint Framework and React JS that displays SharePoint List data , which is retrieved, using REST API. The major project files used in this solution have been zipped and uploaded at Microsoft TechNet Gallery. Feel free to download it.

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

md REACTGetItemscd REACTGetItems

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

Edit the Web Part

Run the code to create the scaffolding and open the project in Visual Studio Code. We will be requiring jQuery to make AJAX REST API calls. Thus, let’s install jQuery, using NPM, as shown below.

npm install --save jquerynpm 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.

TS- This will hold the properties, which will be accessed by other files in the solution. By default, there is a defined description property, which we will add to another property ‘siteURL’ as well using the interface.

ReactGetItems/modue.scss- This will contain the CSS styles, which are used within the TSX file.

tsx- This file serves as the major location, where the UI and Logics are defined.

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, which 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 contains the major logic processing and UI.

This file contains the properties, which will be accessed across the files and are declared, using an Interface, as shown below.

exportinterface IReactGetItemsProps {

description: string;

siteurl: string;

}

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.

.tableStyle{

display: table ;

margin-left : 100px ;

}

.panelStyle{

background: lightblue ;

}

.divStyle{

background: #eee ;

padding: 20px ;

margin: 20px ;

}

.headerCaptionStyle{

background: #4B6978 ;

display: table-row ;

border: solid ;

text-align : center ;

width : 420px ;

height : 30px ;

padding-top : 3px ;

color : white ;

margin-left : 100px ;

display : block ;

}

.headerStyle{

background: #4B6978 ;

display: table-row ;

border: solid ;

text-align : center ;

width : 100px ;

height : 30px ;

padding-top : 10px ;

color : white ;

}

.tableCaptionStyle{

background:#4B6978 ;

display: block ;

font-size : 20px ;

font-weight: bold ;

border: solid ;

text-align : center ;

width : 650px ;

height : 30px ;

padding-top : 3px ;

border-radius: 25px ;

margin-left : 30px ;

margin-top : 20px ;

color:white;

}

.rowCaptionStyle{

width : 600px ;

display : table-caption ;

background: #4B6978 ;

text-align : center ;

padding: 20px ;

font-size : 20px ;

font-weight : bold ;

color : white ;

}

.rowStyle{

display : table-row ;

background: #eee ;

padding: 20px ;

margin: 20px ;

font-weight : bold ;

}

.CellStyle{

display: table-cell ;

border: solid ;

border-color : white ;

text-align : center ;

width : 100px ;

height : 30px ;

padding-top : 10px ;

}

ReactGetItems.tsx

This is the primary file, where the logic and UI are 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, which 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 REST API call within this method to retrieve the list items and add it to the state object.

Thus, we saw how to create a SharePoint Framework Client Web Part that retrieves and displays List Items, using REST API and React JS.The major project files used in this solution have been zipped and uploaded at Microsoft TechNet Gallery. Feel free to download it.