Getting Started with React SPFx CRUD & Search WebPart

This blog explains how you can clone my GitHub repository, install dependencies, and run the SPFx React web part for:

✅ CRUD operations on SharePoint list items
✅ Searching list items
✅ Selecting list name from the property pane

👉 GitHub Repo: ReactSPFx

📌 Step 1 – Prerequisites

Before you start, make sure you have:

  • Office 365 / M365 tenant with SharePoint Online

  • Node.js (LTS) compatible with SPFx version in the project

  • npm (comes with Node.js)

  • Yeoman and gulp installed globally

  • Access to App Catalog if you want to deploy

📌 Step 2 – Clone Repository

Open your terminal and run:

install git to run below command

  • git clone https://github.com/sunilshetty07/ReactSPFx.git 
  • cd ReactSPFx


📌 Step 3 – Install Dependencies

Run the following inside the folder:

  • npm install

This installs React, SPFx controls, PnP libraries, Fluent UI, etc.

📌 Step 4 – Run in Local Workbench

Start the local dev server:

  • gulp serve

Now open the SharePoint Workbench:

  • Local: https://localhost:4321/temp/workbench.html

  • Online: https://<your-tenant>.sharepoint.com/sites/<yoursite>/_layouts/15/workbench.aspx



📌 Step 5 – Configure Property Pane

  1. Add the webpart to the page.

  2. Open the Property Pane.

  3. Select a List Name from the dropdown.

  4. Now you can perform CRUD operations and search items.





📌 Step 6 – Package & Deploy (Optional)

When ready to deploy:

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

This will create a .sppkg file inside:

sharepoint/solution

Upload this file to the App Catalog and deploy.



Go to any site page, edit the page, add the webpart, update the Property Pane settings as needed, and then republish the page to see it in action.

✅ Quick Commands Recap

git clone https://github.com/sunilshetty07/ReactSPFx.git

cd ReactSPFx

npm install

gulp serve

# For deployment

gulp bundle --ship

gulp package-solution --ship

🎯 Conclusion

That’s it! 🎉 You now have a working React SPFx WebPart with CRUD, search, and property pane list selection.

👉 Try cloning the repo here: ReactSPFx GitHub

Comments

Post a Comment

Popular posts from this blog

Step-by-Step Guide: Power Automate Custom Connector Using Graph API from Azure App Service

Image
Step 1: Open Power Automate, navigate to the Custom Connectors tab, and select Create from blank as shown in the image below. custom connector(click image for better resolution) Step 2: In the General tab, upload an icon (less than 1MB), add a description, select the correct scheme (in my case, HTTPS ), and provide the host name. For example, if your API URL is https://graph.microsoft.com/v1.0/users/{email} , the host name will be the highlighted part — graph.microsoft.com . Step 3: Go to the Security tab. Here, you need to select the authentication method. Choose OAuth 2.0 as the authentication type, as shown in the image below. Step 4: Select the Identity Provider as Azure Active Directory . Check the box Enable Service Principal Support . This option allows you to create a connection using a Client ID and Client Secret instead of using the user's own authentication. Next, provide the Client ID , Client Secret , Tenant ID , and other required details as shown in t...
Read more

Calling Microsoft Graph API from Power Automate Using Azure App Services – Step-by-Step Guide

Image
Step 1: You should have an Azure subscription, or if you have access to the Microsoft Entra Admin Center, you can create an app from there. This app can then be used in Power Automate to connect to Microsoft Graph API. Step 2: Click on "New registration" , provide a name for your app, assign the required API permissions (such as Microsoft Graph permissions), and then click "Register" to complete the app registration process. Step 3: After registration, you'll be redirected to the app's overview page. From there, navigate to the API permissions tab and click "Add a permission" to assign the necessary Microsoft Graph API permissions. Step 4: Select Microsoft Graph as the API, and based on your requirements, choose the appropriate permissions. In my case, I selected Application permissions , which do not require user sign-in and are suitable for background services or automation. Step 5: Select the required Microsoft Graph API permissions. Yo...
Read more

Step-by-Step: Give Unique Permissions to OneDrive Files Using Power Automate and Graph API (No Premium License Needed)

Image
We are uploading files through Power Apps using the Attachment control. In the backend, a Power Automate flow uploads these files to OneDrive and assigns unique permissions . Since Power Automate does not have a built-in connector to directly assign unique permissions in OneDrive, we are handling this through the Microsoft Graph API (without using a custom connector). Step 1: Create a Blank Power Apps Application Open Power Apps Studio. Select New app > Start with a page design as shown below. Step 2 :  select Blank Canvas  Step 3: Add an Attachment Control In Power Apps, the Attachment control is not available directly from the standard controls list. To get the Attachment control: Add an Edit Form to your app. Connect the form to a SharePoint list . Once connected, the form will automatically include the Attachments field. You can then use this Attachment control to upload files. Step 4: Keep Only the Attachment Control Since we only need th...
Read more