SharePoint React Tutorial

In this tutorial, we will be exploring how to build a SharePoint site using React. We will go over the basics of building a SharePoint site with React, as well as some best practices for working with Microsoft’s popular platform.

Before we get started, let’s make sure that you have the necessary tools and software installed on your computer. You should have:

• Node.js (or another JavaScript runtime environment)
• npm (Node Package Manager) or yarn
• Visual Studio Code (or another code editor of your choice)
• SharePoint Online (or an on-premises installation)

Now, let’s get started with the tutorial!

Step 1: Set up Your Environment

To start building our SharePoint site with React, we need to set up our environment. This includes installing the necessary dependencies and setting up our project structure.

First, create a new folder for your project and navigate into it using the command line or terminal. Then, run the following command to initialize a new npm project:

npm init -y

This will prompt you to enter some basic information about your project. Once you have completed this step, you should see a file called package.json in your project directory.

Next, install the necessary dependencies for our SharePoint site using the following command:

npm install @pnp/sp @pnp/react –save

The @pnp/sp package is used to interact with the SharePoint REST API, while the @pnp/react package provides React-specific functionality for working with SharePoint.

Step 2: Set up Your Project Structure

Now that we have our environment set up, let’s create a basic project structure for our SharePoint site. Create a new folder in your project directory called src, and inside this folder, create the following subfolders:

• components
• containers
• config
• services

The components folder will hold our reusable React components, while the containers folder will contain our top-level React components that wrap our application logic. The config folder will hold any configuration files for our app, and the services folder will contain utility functions or APIs that we can use in our React code.

Step 3: Create Your SharePoint Site

Now that we have our project structure set up, let’s create a new SharePoint site using the SharePoint REST API. We’ll use the @pnp/sp package to do this.

Create a new file called sp.js in your project directory and add the following code:

import { sp } from '@pnp/sp';

sp().then(context => {
  // Create a new site
  context.site.createSite('My Site', 'https://your-sharepoint-site.sharepoint.com/sites/MySite');
});

This code uses the @pnp/sp package to create a new SharePoint site. Replace https://your-sharepoint-site.sharepoint.com/sites/MySite with the URL of your SharePoint site.

Step 4: Create Your React Components

Now that we have our SharePoint site set up, let’s create some React components to display data from our site. Create a new file called header.js in your project directory and add the following code:

import React from 'react';
import { Web } from '@pnp/sp';

const Header = () => {
  const [siteTitle, setSiteTitle] = useState('');

  useEffect(() => {
    Web('https://your-sharepoint-site.sharepoint.com/sites/MySite').then(web => {
      setSiteTitle(web.title);
    });
  }, []);

  return (
    <header>
      <h1>{siteTitle}</h1>
    </header>
  );
};

export default Header;

This code uses the useState hook to store the title of our SharePoint site, and the useEffect hook to fetch this data from the SharePoint REST API. We then display this data in an <h1> tag.

Step 5: Create Your React Container

Now that we have our React component set up, let’s create a container to wrap it. Create a new file called App.js in your project directory and add the following code:

import React from 'react';
import Header from './header';

const App = () => {
  return (
    <div>
      <Header />
    </div>
  );
};

export default App;

This code simply renders our Header component.

Step 6: Run Your Application

Now that we have all the pieces in place, let’s run our application using the following command:

npm start

This will start a development server for our React app. You can now navigate to http://localhost:3000 in your web browser to see our SharePoint site with React.

In this tutorial, we learned how to set up our environment, create a basic project structure, and build a SharePoint site using React. We also learned how to fetch data from the SharePoint REST API and display it in our React components.

That’s it! I hope you enjoyed this tutorial and are now ready to start building your own SharePoint sites with React.