Developing SharePoint Web Parts With ReactJS - Part Two

Introduction

In this article, you will learn how to develop SharePoint web parts using React JavaScript library and with the help of offline React compilers.

In my previous article, you have learned the basics, prerequisites, and the environment setup for developing SharePoint web parts using React offline compilers.


Steps Involved

Create/ Open project


Open the project using IDE - in this case, Visual Studio code. If you don't have any IDE, you can simply use notepad to create necessary files.


Create necessary files

HTML file to hold the html elements.

  1. <div id="welcomespuser"></div>  

  2. <script src="https://unpkg.com/react@latest/dist/react.js">

  3. </script>  <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js">

  4. </script>  <script type="text/javascript" src="../Style Library/scripts/hiworld.js">

  5. </script>  

Create folder to hold the React components (.jsx files).

Create a .jsx file to put the React data (sample.jsx).

  1. class GetUserDetails extends React.Component{      

  2. constructor(props) {  

  3. super(props);  

  4. this.state = {              

  5. user:""         

  6. };      

  7. }      

  8. componentWillMount(){  

  9. this.GetListItems();      

  10. }       

  11. GetListItems(){  

  12. var reactHandler = this;  

  13. var request = new XMLHttpRequest();