Post
Ask Question

SharePoint Framework - CRUD Operations Using ReactJS

Overview

In the article Develop First Client-Side Web Part, we developed a basic SharePoint client web part which can run independently without any interaction with SharePoint.

In this article, we will explore how to interact with the SharePoint list for CRUD (Create, Read, Update, and Delete) operations using React JS. React JS is natively supported by SharePoint Framework.

Brief info about React JS

React is a JavaScript library developed and licensed by Facebook. It represents V (View) in MVC (Model View Controller). React JS can react to changes in application state. SharePoint Framework itself is built using React JS. Read more about React JS at here.

Create SPFx Solution

Open a command prompt. Create a directory for SPFx solution
  1. md spfx-crud-reactjs  
Navigate to the above-created directory
  1. cd spfx-crud-reactjs  
Run Yeoman SharePoint Generator to create the solution
  1. yo @microsoft/sharepoint  
Yeoman generator will present you with the wizard by asking questions about the solution to be created.

SharePoint Framework CRUD Operations Using ReactJS 
 
Solution Name

Hit enter to have a default name (spfx-crud-reactjs in this case) or type in any other name for your solution.

Selected choice - Hit enter
 
Target for component

Here, we can select the target environment where we are planning to deploy the client web part; i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).

Selected choice - SharePoint Online only (latest)
 
Place of files

We may choose to use the same folder or create a subfolder for our solution.

Selected choice - Same folder
 
Deployment option

Selecting Y will allow the app to be deployed instantly to all sites and will be accessible everywhere.

Selected choice - N (install on each site explicitly)
 
Type of client-side component to create

We can choose to create a client-side web part or an extension. Choose web part option.

Selected choice - WebPart
 
Web part name

Hit enter to select the default name or type in any other name.

Selected choice - ReactCRUD
 
Web part description

Hit enter to select the default description or type in any other value.

Selected choice - CRUD operations with React JS
 
Framework to use

Select any JavaScript framework to develop the component. Available choices are (No JavaScript Framework, React, and Knockout)

Selected choice - React
 
Yeoman generator will perform a scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.

Once the scaffolding process is completed, lock down the version of project dependencies by running the below command
  1. npm shrinkwrap  
In the command prompt type the below command to open the solution in the code editor of your choice.
  1. code .  
Configure Property for List Name

SPFx solution by default has description property created. Let us change the property to list name. We will use this property to configure the list name on which the CRUD operation is to perform.
 
Step 1

Open mystrings.d.ts under "\src\webparts\reactCrud\loc\" folder

Step 2

Rename DescriptionFieldLabel to ListNameFieldLabel
 
SharePoint Framework CRUD Operations Using ReactJS  
  1. declare interface IReactCrudWebPartStrings {  
  2.   PropertyPaneDescription: string;  
  3.   BasicGroupName: string;  
  4.   ListNameFieldLabel: string;  
  5. }  
  6.   
  7. declare module 'ReactCrudWebPartStrings' {  
  8.   const strings: IReactCrudWebPartStrings;  
  9.   export = strings;  
  10. }  
Step 3

In en-us.js file under "\src\webparts\reactCrud \loc\" folder set the display name for listName property

SharePoint Framework CRUD Operations Using ReactJS  
  1. define([], function() {  
  2.   return {  
  3.     "PropertyPaneDescription": "Description",  
  4.     "BasicGroupName": "Group Name",  
  5.     "ListNameFieldLabel": "List Name"  
  6.   }  
  7. });  
Step 4

In the interface IReactCrudProps.ts under "\src\webparts\reactCrud\components\", set the member name to listName

SharePoint Framework CRUD Operations Using ReactJS  
  1. export interface IReactCrudProps {  
  2.   listName: string;  
  3. }  
Step 5

Open the main webpart file (ReactCrudWebPart.ts) under "\src\webparts\reactCrud" folder.

Step 6

Rename description property pane field to listName

SharePoint Framework CRUD Operations Using ReactJS 
  1. export interface IReactCrudWebPartProps {  
  2.   listName: string;  
  3. }  
  4.   
  5. export default class ReactCrudWebPart extends BaseClientSideWebPart<IReactCrudWebPartProps> {  
  6.   
  7.   public render(): void {  
  8.     const element: React.ReactElement<IReactCrudProps > = React.createElement(  
  9.       ReactCrud,  
  10.       {  
  11.         listName: this.properties.listName,  
  12.         spHttpClient: this.context.spHttpClient,  
  13.         siteUrl: this.context.pageContext.web.absoluteUrl  
  14.       }  
  15.     );  
  16.   
  17.     ReactDom.render(element, this.domElement);  
  18.   }  
  19.   
  20.   protected onDispose(): void {  
  21.     ReactDom.unmountComponentAtNode(this.domElement);  
  22.   }  
  23.   
  24.   protected get dataVersion(): Version {  
  25.     return Version.parse('1.0');  
  26.   }  
  27.   
  28.   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {  
  29.     return {  
  30.       pages: [  
  31.         {  
  32.           header: {  
  33.             description: strings.PropertyPaneDescription  
  34.           },  
  35.           groups: [  
  36.             {  
  37.               groupName: strings.BasicGroupName,  
  38.               groupFields: [  
  39.                 PropertyPaneTextField('listName', {  
  40.                   label: strings.ListNameFieldLabel  
  41.                 })  
  42.               ]  
  43.             }  
  44.           ]  
  45.         }  
  46.       ]  
  47.     };  
  48.   }  
  49. }  
Step 7

The UI in React gets served from component ReactCrud.tsx under "\src\webparts\reactCrud\components\ReactCrud.tsx". Make the changes for listName property in the component.

SharePoint Framework CRUD Operations Using ReactJS 
  1. import * as React from 'react';  
  2. import styles from './ReactCrud.module.scss';  
  3. import { IReactCrudProps } from './IReactCrudProps';  
  4. import { escape } from '@microsoft/sp-lodash-subset';  
  5.   
  6. export default class ReactCrud extends React.Component<IReactCrudProps, {}> {  
  7.   public render(): React.ReactElement<IReactCrudProps> {  
  8.     return (  
  9.       <div className={ styles.reactCrud }>  
  10.         <div className={ styles.container }>  
  11.           <div className={ styles.row }>  
  12.             <div className={ styles.column }>  
  13.               <span className={ styles.title }>Welcome to SharePoint!</span>  
  14.               <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>  
  15.               <p className={ styles.description }>{escape(this.props.listName)}</p>  
  16.               <a href="https://aka.ms/spfx" class="${ styles.button }">  
  17.                 <span class="${ styles.label }">Learn more</span>  
  18.               </a>  
  19.             </div>  
  20.           </div>  
  21.         </div>  
  22.       </div>  
  23.     );  
  24.   }  
  25. }  
Step 8

In the command prompt, type “gulp serve”

Step 9

In the SharePoint local workbench page, add the web part.

Step 10

Edit the web part to ensure the listName property pane field is getting reflected.

SharePoint Framework CRUD Operations Using ReactJS 

Model for List Item

Step 1

Add a class (IListItem.ts) representing the list item.

SharePoint Framework CRUD Operations Using ReactJS 
  1. export interface IListItem {  
  2.     Title?: string;  
  3.     Id: number;  
  4. }  
Step 2

React JS acts on the state change. Let us add a state to our solution.

SharePoint Framework CRUD Operations Using ReactJS  
  1. import { IListItem } from './IListItem';  
  2.   
  3. export interface IReactCrudState {  
  4.   status: string;  
  5.   items: IListItem[];  
  6. }  
Step 3

Configure ReactCrud.tsx for this state

SharePoint Framework CRUD Operations Using ReactJS 
  1. import * as React from 'react';  
  2. import styles from './ReactCrud.module.scss';  
  3. import { IReactCrudProps } from './IReactCrudProps';  
  4. import { IReactCrudState } from './IReactCrudState';  
  5. import { escape } from '@microsoft/sp-lodash-subset';  
  6.   
  7. export default class ReactCrud extends React.Component<IReactCrudProps, IReactCrudState> {  
  8.   
  9.   constructor(props: IReactCrudProps, state: IReactCrudState) {  
  10.     super(props);  
  11.   
  12.     this.state = {  
  13.       status: 'Ready',  
  14.       items: []  
  15.     };  
  16.   }  
  17.   
  18.   public render(): React.ReactElement<IReactCrudProps> {  
  19.     return (  
  20.       <div className={ styles.reactCrud }>  
  21.         <div className={ styles.container }>  
  22.           <div className={ styles.row }>  
  23.             <div className={ styles.column }>  
  24.               <span className={ styles.title }>Welcome to SharePoint!</span>  
  25.               <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>  
  26.               <p className={ styles.description }>{escape(this.props.listName)}</p>  
  27.               <a href="https://aka.ms/spfx" class="${ styles.button }">  
  28.                 <span class="${ styles.label }">Learn more</span>  
  29.               </a>  
  30.             </div>  
  31.           </div>  
  32.         </div>  
  33.       </div>  
  34.     );  
  35.   }  
  36. }  
Add Controls to WebPart

Step 1

Open ReactCrud.tsx under \src\webparts\reactCrud\components\ReactCrud.tsxfolder.

Step 2

Modify Render method to include buttons for CRUD operations and add event handlers to each of the buttons

SharePoint Framework CRUD Operations Using ReactJS  
  1. import * as React from 'react';  
  2. import styles from './ReactCrud.module.scss';  
  3. import { IReactCrudProps } from './IReactCrudProps';  
  4. import { IReactCrudState } from './IReactCrudState';  
  5. import { escape } from '@microsoft/sp-lodash-subset';  
  6. import { IListItem } from './IListItem';  
  7. import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';  
  8.   
  9. export default class ReactCrud extends React.Component<IReactCrudProps, IReactCrudState> {  
  10.   
  11.   constructor(props: IReactCrudProps, state: IReactCrudState) {  
  12.     super(props);  
  13.   
  14.     this.state = {  
  15.       status: 'Ready',  
  16.       items: []  
  17.     };  
  18.   }  
  19.   
  20.   public render(): React.ReactElement<IReactCrudProps> {  
  21.     const items: JSX.Element[] = this.state.items.map((item: IListItem, i: number): JSX.Element => {  
  22.       return (  
  23.         <li>{item.Title} ({item.Id}) </li>  
  24.       );  
  25.     });  
  26.   
  27.     return (  
  28.       <div className={ styles.reactCrud }>  
  29.         <div className={ styles.container }>  
  30.           <div className={ styles.row }>  
  31.             <div className={ styles.column }>  
  32.               <span className={ styles.title }>Welcome to SharePoint!</span>  
  33.               <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>  
  34.               <p className={ styles.description }>{escape(this.props.listName)}</p>  
  35.                 
  36.               <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>  
  37.                 <div className='ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1'>  
  38.                   <a href="#" className={`${styles.button}`} onClick={() => this.createItem()}>  
  39.                     <span className={styles.label}>Create item</span>  
  40.                   </a>   
  41.                   <a href="#" className={`${styles.button}`} onClick={() => this.readItem()}>  
  42.                     <span className={styles.label}>Read item</span>  
  43.                   </a>  
  44.                 </div>  
  45.               </div>  
  46.   
  47.               <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>  
  48.                 <div className='ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1'>  
  49.                   <a href="#" className={`${styles.button}`} onClick={() => this.updateItem()}>  
  50.                     <span className={styles.label}>Update item</span>  
  51.                   </a>   
  52.                   <a href="#" className={`${styles.button}`} onClick={() => this.deleteItem()}>  
  53.                     <span className={styles.label}>Delete item</span>  
  54.                   </a>  
  55.                 </div>  
  56.               </div>  
  57.   
  58.               <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>  
  59.                 <div className='ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1'>  
  60.                   {this.state.status}  
  61.                   <ul>  
  62.                     {items}  
  63.                   </ul>  
  64.                 </div>  
  65.               </div>  
  66.   
  67.             </div>  
  68.           </div>  
  69.         </div>  
  70.       </div>  
  71.     );  
  72.   }  
  73.   
  74.   private createItem(): void {  
  75.   }  
  76.   
  77.   private readItem(): void {  
  78.   }  
  79.   
  80.   private updateItem(): void {  
  81.   }  
  82.   
  83.   private deleteItem(): void {  
  84.   }  
  85. }   
Step 3

In the command prompt type “gulp serve” to see the buttons on web part.

SharePoint Framework CRUD Operations Using ReactJS 
 
Step 4

The read, update and delete operations will be performed on the latest item. Update interface IReactCrudProps.ts at "\src\webparts\reactCrud\components\ " to include site URL and spHttpClient

SharePoint Framework CRUD Operations Using ReactJS 
  1. import { SPHttpClient } from '@microsoft/sp-http';  
  2.   
  3. export interface IReactCrudProps {  
  4.   listName: string;  
  5.   spHttpClient: SPHttpClient;  
  6.   siteUrl: string;  
  7. }   
Step 5

Update "\src\webparts\reactCrud\ReactCrudWebPart.ts" to initiate site url and spHttpClient

SharePoint Framework CRUD Operations Using ReactJS 
  1. export default class ReactCrudWebPart extends BaseClientSideWebPart<IReactCrudWebPartProps> {  
  2.   
  3.   public render(): void {  
  4.     const element: React.ReactElement<IReactCrudProps > = React.createElement(  
  5.       ReactCrud,  
  6.       {  
  7.         listName: this.properties.listName,  
  8.         spHttpClient: this.context.spHttpClient,  
  9.         siteUrl: this.context.pageContext.web.absoluteUrl  
  10.       }  
  11.     );  
  12.   
  13.     ReactDom.render(element, this.domElement);  
  14.   }  
  15.   
  16.   protected onDispose(): void {  
  17.     ReactDom.unmountComponentAtNode(this.domElement);  
  18.   }  
  19. }  
Step 6

In ReactCrud.tsx implement generic method which will return the id of the latest item from the given list.
  1. private getLatestItemId(): Promise<number> {  
  2.   return new Promise<number>((resolve: (itemId: number) => void, reject: (error: any) => void): void => {  
  3.     this.props.spHttpClient.get(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items?$orderby=Id desc&$top=1&$select=id`,  
  4.       SPHttpClient.configurations.v1,  
  5.       {  
  6.         headers: {  
  7.           'Accept': 'application/json;odata=nometadata',  
  8.           'odata-version': ''  
  9.         }  
  10.       })  
  11.       .then((response: SPHttpClientResponse): Promise<{ value: { Id: number }[] }> => {  
  12.         return response.json();  
  13.       }, (error: any): void => {  
  14.         reject(error);  
  15.       })  
  16.       .then((response: { value: { Id: number }[] }): void => {  
  17.         if (response.value.length === 0) {  
  18.           resolve(-1);  
  19.         }  
  20.         else {  
  21.           resolve(response.value[0].Id);  
  22.         }  
  23.       });  
  24.   });  
  25. }   
Implement Create Operation

We will use the REST API to add the item to list.
  1. private createItem(): void {  
  2.   this.setState({  
  3.     status: 'Creating item...',  
  4.     items: []  
  5.   });  
  6.   
  7.   const body: string = JSON.stringify({  
  8.     'Title': `Item ${new Date()}`  
  9.   });  
  10.   
  11.   this.props.spHttpClient.post(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items`,  
  12.   SPHttpClient.configurations.v1,  
  13.   {  
  14.     headers: {  
  15.       'Accept': 'application/json;odata=nometadata',  
  16.       'Content-type': 'application/json;odata=nometadata',  
  17.       'odata-version': ''  
  18.     },  
  19.     body: body  
  20.   })  
  21.   .then((response: SPHttpClientResponse): Promise<IListItem> => {  
  22.     return response.json();  
  23.   })  
  24.   .then((item: IListItem): void => {  
  25.     this.setState({  
  26.       status: `Item '${item.Title}' (ID: ${item.Id}) successfully created`,  
  27.       items: []  
  28.     });  
  29.   }, (error: any): void => {  
  30.     this.setState({  
  31.       status: 'Error while creating the item: ' + error,  
  32.       items: []  
  33.     });  
  34.   });  
  35. }  
Implement Read Operation

We will use the REST API to read the latest item.
  1. private readItem(): void {  
  2.   this.setState({  
  3.     status: 'Loading latest items...',  
  4.     items: []  
  5.   });  
  6.   
  7.   this.getLatestItemId()  
  8.     .then((itemId: number): Promise<SPHttpClientResponse> => {  
  9.       if (itemId === -1) {  
  10.         throw new Error('No items found in the list');  
  11.       }  
  12.   
  13.       this.setState({  
  14.         status: `Loading information about item ID: ${itemId}...`,  
  15.         items: []  
  16.       });  
  17.       return this.props.spHttpClient.get(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items(${itemId})?$select=Title,Id`,  
  18.         SPHttpClient.configurations.v1,  
  19.         {  
  20.           headers: {  
  21.             'Accept': 'application/json;odata=nometadata',  
  22.             'odata-version': ''  
  23.           }  
  24.         });  
  25.     })  
  26.     .then((response: SPHttpClientResponse): Promise<IListItem> => {  
  27.       return response.json();  
  28.     })  
  29.     .then((item: IListItem): void => {  
  30.       this.setState({  
  31.         status: `Item ID: ${item.Id}, Title: ${item.Title}`,  
  32.         items: []  
  33.       });  
  34.     }, (error: any): void => {  
  35.       this.setState({  
  36.         status: 'Loading latest item failed with error: ' + error,  
  37.         items: []  
  38.       });  
  39.     });  
  40. }  
Implement Update Operation

We will use the REST API to update the latest item.
  1. private updateItem(): void {  
  2.   this.setState({  
  3.     status: 'Loading latest items...',  
  4.     items: []  
  5.   });  
  6.   
  7.   let latestItemId: number = undefined;  
  8.   
  9.   this.getLatestItemId()  
  10.     .then((itemId: number): Promise<SPHttpClientResponse> => {  
  11.       if (itemId === -1) {  
  12.         throw new Error('No items found in the list');  
  13.       }  
  14.   
  15.       latestItemId = itemId;  
  16.       this.setState({  
  17.         status: `Loading information about item ID: ${latestItemId}...`,  
  18.         items: []  
  19.       });  
  20.         
  21.       return this.props.spHttpClient.get(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items(${latestItemId})?$select=Title,Id`,  
  22.         SPHttpClient.configurations.v1,  
  23.         {  
  24.           headers: {  
  25.             'Accept': 'application/json;odata=nometadata',  
  26.             'odata-version': ''  
  27.           }  
  28.         });  
  29.     })  
  30.     .then((response: SPHttpClientResponse): Promise<IListItem> => {  
  31.       return response.json();  
  32.     })  
  33.     .then((item: IListItem): void => {  
  34.       this.setState({  
  35.         status: 'Loading latest items...',  
  36.         items: []  
  37.       });  
  38.   
  39.       const body: string = JSON.stringify({  
  40.         'Title': `Updated Item ${new Date()}`  
  41.       });  
  42.   
  43.       this.props.spHttpClient.post(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items(${item.Id})`,  
  44.         SPHttpClient.configurations.v1,  
  45.         {  
  46.           headers: {  
  47.             'Accept': 'application/json;odata=nometadata',  
  48.             'Content-type': 'application/json;odata=nometadata',  
  49.             'odata-version': '',  
  50.             'IF-MATCH': '*',  
  51.             'X-HTTP-Method': 'MERGE'  
  52.           },  
  53.           body: body  
  54.         })  
  55.         .then((response: SPHttpClientResponse): void => {  
  56.           this.setState({  
  57.             status: `Item with ID: ${latestItemId} successfully updated`,  
  58.             items: []  
  59.           });  
  60.         }, (error: any): void => {  
  61.           this.setState({  
  62.             status: `Error updating item: ${error}`,  
  63.             items: []  
  64.           });  
  65.         });  
  66.     });  
  67. }  
Implement Delete Operation

We will use the REST API to delete the latest item.
  1. private deleteItem(): void {  
  2.   if (!window.confirm('Are you sure you want to delete the latest item?')) {  
  3.     return;  
  4.   }  
  5.   
  6.   this.setState({  
  7.     status: 'Loading latest items...',  
  8.     items: []  
  9.   });  
  10.   
  11.   let latestItemId: number = undefined;  
  12.   let etag: string = undefined;  
  13.   this.getLatestItemId()  
  14.     .then((itemId: number): Promise<SPHttpClientResponse> => {  
  15.       if (itemId === -1) {  
  16.         throw new Error('No items found in the list');  
  17.       }  
  18.   
  19.       latestItemId = itemId;  
  20.       this.setState({  
  21.         status: `Loading information about item ID: ${latestItemId}...`,  
  22.         items: []  
  23.       });  
  24.   
  25.       return this.props.spHttpClient.get(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items(${latestItemId})?$select=Id`,  
  26.         SPHttpClient.configurations.v1,  
  27.         {  
  28.           headers: {  
  29.             'Accept': 'application/json;odata=nometadata',  
  30.             'odata-version': ''  
  31.           }  
  32.         });  
  33.     })  
  34.     .then((response: SPHttpClientResponse): Promise<IListItem> => {  
  35.       etag = response.headers.get('ETag');  
  36.       return response.json();  
  37.     })  
  38.     .then((item: IListItem): Promise<SPHttpClientResponse> => {  
  39.       this.setState({  
  40.         status: `Deleting item with ID: ${latestItemId}...`,  
  41.         items: []  
  42.       });  
  43.   
  44.       return this.props.spHttpClient.post(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items(${item.Id})`,  
  45.         SPHttpClient.configurations.v1,  
  46.         {  
  47.           headers: {  
  48.             'Accept': 'application/json;odata=nometadata',  
  49.             'Content-type': 'application/json;odata=verbose',  
  50.             'odata-version': '',  
  51.             'IF-MATCH': etag,  
  52.             'X-HTTP-Method': 'DELETE'  
  53.           }  
  54.         });  
  55.     })  
  56.     .then((response: SPHttpClientResponse): void => {  
  57.       this.setState({  
  58.         status: `Item with ID: ${latestItemId} successfully deleted`,  
  59.         items: []  
  60.       });  
  61.     }, (error: any): void => {  
  62.       this.setState({  
  63.         status: `Error deleting item: ${error}`,  
  64.         items: []  
  65.       });  
  66.     });  
  67. }  
Test the WebPart
  1. On the command prompt, type “gulp serve”
  2. Open SharePoint site
  3. Navigate to /_layouts/15/workbench.aspx
  4. Add the webpart to page.
  5. Edit web part, in the properties pane, type the list name
  6. Click the buttons (Create Item, Read Item, Update Item, and Delete Item) one by one to test the web part
  7. Verify the operations are taking place in the SharePoint list.
Create Operation

SharePoint Framework CRUD Operations Using ReactJS 
 
Read Operation

SharePoint Framework CRUD Operations Using ReactJS 
 
Update Operation

SharePoint Framework CRUD Operations Using ReactJS 
 
Delete Operation

SharePoint Framework CRUD Operations Using ReactJS 

Troubleshooting

In some cases, SharePoint workbench (https://[tenant].sharepoint.com/_layouts/15/workbench.aspx) shows the below error although “gulp serve” is running.

SharePoint Framework CRUD Operations Using ReactJS 
 
Open below URL in the next tab of the browser. Accept the warning message.

https://localhost:4321/temp/manifests.js

Summary

React JS is natively supported by SharePoint framework. SPFx generates all needed React components for you to get started with the development. React JS supports the application to be broken down into small React components, which simplifies development and maintenance. React JS focuses more on UI development, in contrast to Angular which is more famous for creating SPA (Single Page Applications).


Similar Articles