Implementing SharePoint Operations Using React.js

Introduction

In this article series, you will learn how to implement basic SharePoint operations using React JavaScript libraries.

In this article, you will learn the React JavaScript library basics required for implementing SharePoint operations.

ReactJS

React is a front-end library developed and licensed by Facebook.
React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
It is famous for 'V' in MVC, which handles view layer on the web.
Using ReactJS, we can build reusable components.

There are multiple ways of implementing the React JavaScript logic into SharePoint. In this article, I will use the React JavaScript libraries stored on the web. Additionally, Babel compiler is required for compiling the JSX content.

The library files referenced are,

react.js
react-dom.js
babel.min.js

JSX

The core functionality is written on JSX. Here, Babel compiler is used to transform the JSX content to JS.

JSX content is embedded with in the script tag, which is of the type text/babel.
JSX contains JavaScript with HTML/XML in it.
JSX is faster, type safe and object-oriented programming language.
JSX is not the globally accepted standard, so it is not supported on browsers.

Some of the React JavaScript basics used for our implementation are explained below.

Components
Components help us split the code/UI in multiple pieces. The component contains a constructor and methods.
State
State stores the data. The data can be in multiple forms. The data can be a string, number, array, etc.
Props
Props are attributes defined in the components. These are immutable and passed as arguments for rendering the HTML. propTypes are used for validating the props.
Render
It is a method, which returns the HTML content that needs to be displayed on the page.
Constructor
Constructor declares the variables, handlers and the methods.
Component Life cycle
There are predefined set of methods executed when the component is executed. The life cycle methods are componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate, and componentWillUnmount.

The React JavaScript library basics can be found on the official site https://facebook.github.io/react.

Prerequisites

In the sample, I will refer the React JavaScript and Babel plugins directly on the content editor webpart.

The sample JSX content will look like below.

class Sample extends React.Component {
constructor(){
super();
this.state = {
data:''
}
}
componentWillMount(){
}
componentDidMount() {
}
// Other Life Cycle Methods
render(){
return(
<div>
HTML
</div>
);
}
}
ReactDOM.render(<Sample />, document.getElementById('divid'));

Summary

Thus, you have learned the basics of React JavaScript library to be implemented for SharePoint operations. In my next article, I will explain how to implement the SharePoint functionalities using React JavaScript libraries.

5 Comments

Join the conversation! Your thoughts help the community grow.

Vijay Chavan7y ago
Nicely explain, Thanks
Parthipan S8y ago
How to use textbox component and date picker component.
Neha Wahi8y ago
Hi, nice article. I have a question. What can I do to add the same react component on two different sharepoint webparts on the same page. How can i identify where to render dom in respective webparts
Prasad p9y ago
Where is the splist name or doc lib name? how 2 read data from list columns / doc lib columns? and any idea how to get/consume data from a wcf service ? whether reactjs supports calling wcf service ? if yes, whats the API for achieivining this ? thnx in advance!
Humayun Kabir Mamun9y ago
Thanks for this nice article...