Skip to main content

Implement SPFx component with ReactJS in few Steps


The web part is running on the browser that runs in the context of a SharePoint page.

And required only clients side scripting languages to make it run.

It can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, to build them.

Support:

  • It can be built with HTML and JavaScript with a specific framework.

  •  It supports SharePoint Online and on-premises.

 

Create a new web part using Visual Studio Code to

Below are the step

  • Go to the Open folder by clicking on the File section

  • Create a folder and open it.      

  • Click into the terminal and select new terminal 
  • Write the script there in the new terminal
Yo @microsoft/Sharepoint
  • You see at the terminal window, a new promote open, here you need to give a  new for the solution, in my case I give It the name HelloLife.
                         



  • Then it will ask you to select the folder

  • Then showing, in my case I select N
                           


   Then again, I select N

   Now the things are almost done, now, you got three options

  • WebPart 
  • Extension
  • Library

    So, now we select the first option, to create WebPart           



Now the new screen appearing and saying to select one of the frameworks from default there office 365 give the freedom to developers to choose any of the frameworks from default or you can select No JavaScript framework. 

after selecting and pressing enter it will start the process of downloading all the required packages and library’s, it will take some time to download

Once it is completed, a new screen appears, now you can see the complete structure of the solution, in the below images

Inside the src/components folder, you can get the file structure name as we gave to the component name 




 Now, all is done and need to run some more command by opening the terminal window

 gulp build (Used to build the structure)
 gulp serve (to start the server)

After the server going to start, on the terminal a screen showing lines of text and open a web page with localhost workbench.

Here you can see, our web part appearing on the new web part area







So, this is the very basic of SPFx, I hope you get it informative, In the next post, I will tell you how we can add custom logic inside the web parts.

 

 



Comments

Popular posts from this blog

Interview Questions of SPFx SharePoint

What is SPFx? The SharePoint Framework (SPFx) is a web part model that provides full support for client-side SharePoint development, it is easy to integrate with SharePoint data, and extend Microsoft Teams. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready. Scenario Based asking Scenario 1: Scenario: Your team is developing a SharePoint Framework (SPFx) web part that needs to retrieve data from an external API and display it on a SharePoint site. The API requires authentication using OAuth 2.0. The web part should also allow users to refresh the data manually. Question 1: How would you approach implementing this functionality in an SPFx web

Interview Question of Advanced SharePoint SPFx

1. What is WebPack? A module bundling system built on top of Node. js framework is known as a WebPack. It is capable to handle the combination and minification of JavaScript and CSS files, also other files such as images by using plugins. WebPack is the recommended way of bundling the files in JS framework and .Net frameworks. In the SPFx it is used with React Js. 2. What is PowerShell.? PowerShell is a platform introduced by Microsoft to perform cross-platform task automation and configuration management framework, it is made up of a command-line shell, a scripting language. it can be run on Windows, Linux, and macOS. 3. What is bundling and Minification? The terms bundling and minification are the processes of code compressing, which is used to improve the load and request time, It is used in modern JavaScript frameworks and .Net frameworks. It improves the load time by reducing the number of requests to the s

Top20 - SharePoint Framework (SPFx) Interview Questions

1.  Which tool we can use to generate a SharePoint Framework (SPFx) solution? Developers can use  Yeoman to generate SharePoint Framework (SPFx) solution, it is a client-side scaffolding open-source tool to help in web-based development. 2. How developer can ensure that the solution deployed was immediately available to all site collections in SPFx?  To ensure the availability of the deployed solution on all the site collections developer has to configure  skipFeatureDeployment: true  in package-solution.json {     "solution" : {       "name" : "theultimateresources-deployment-client-side-solution" ,       "id" : "as3feca4-4j89-47f1-a0e2-78de8890e5hy" ,       "version" : "2.0.0.0" ,       "skipFeatureDeployment" : true     },     "paths" : {       "zippedPackage" : "solution/theultimateresources-deploy-true.sppkg"     }  }