Use React with SPFx for Building Dynamic Sharepoint Apps

Setting up a SharePoint Framework (SPFx) project involves installing Node.js, Yeoman, and Gulp, followed by using the SPFx generator to create a new project. Developers can then build React components that interact with SharePoint data via REST API.

The process involves setting up the development environment, generating a new SPFx project, and building React components that interact with SharePoint data (using REST API ).

React’s state and props manage dynamic data, while SPFx handles the deployment to SharePoint. This combination enables the creation of responsive, data-driven applications in SharePoint.

Here are the steps.

1. Install Node.js: Ensure you have the LTS version of Node.js installed, as SPFx projects work best with it.
2. Install Yeoman and Gulp

   npm install -g yo gulp
   

3. Install SPFx Generator

   npm install -g @microsoft/generator-sharepoint
   

4. Create a New SPFx Project

   yo @microsoft/sharepoint
   

5. When prompted
   • Solution name: Choose your project Integration name.
   • Target: SharePoint Online only (latest version).
   • Deployment: Choose if you want to deploy to all sites immediately.
   • Component type: WebPart.
   • Framework: React
6. Develop a React Component: Navigate to the components folder inside your web part and create React components.
   • Example: Dynamic data rendering in a DynamicComponent.tsx file.

     import * as React from 'react';
     interface IDynamicComponentProps {
       items: string[];
     }
     const DynamicComponent: React.FC<IDynamicComponentProps> = (props) => {
       return (
         <div>
           <h3>Dynamic List</h3>
           <ul>
             {props.items.map((item, index) => (
               <li key={index}>{item}</li>
             ))}
           </ul>
         </div>
       );
     };
     export default DynamicComponent;
     

7. Use the React Component in the WebPart: Modify your web part's main file to pass data into the React component. In <YourWebPart>.ts, instantiate your DynamicComponent and pass in any dynamic data, such as from an API or SharePoint list.

   import * as React from 'react';
   import * as ReactDom from 'react-dom';
   import { Version } from '@microsoft/sp-core-library';
   import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
   import DynamicComponent from './components/DynamicComponent';
   export default class YourWebPart extends BaseClientSideWebPart<{}> {
     public render(): void {
       const items: string[] = ['Item 1', 'Item 2', 'Item 3']; // Sample dynamic data
       const element: React.ReactElement<{}> = React.createElement(
         DynamicComponent,
         {
           items: items
         }
       );
       ReactDom.render(element, this.domElement);
     }
     protected get dataVersion(): Version {
       return Version.parse('1.0');
     }
   }
   

8. Run and Test Your App

   gulp serve
   

9. Output: When you run the web part in the SharePoint workbench or after deployment, the DynamicComponent will render the list of items passed as props.
   
10. Build and Deploy to SharePoint

    gulp bundle --ship
    gulp package-solution --ship