Build SharePoint(SPfx) client-side web part using using react.
8/25/2020 12:32:56 PM
Overview of Sharepoint online(SharePoint Framework):
New SPFx (SharePoint Framework ) is a page and web part model which provides full support for client-side SharePoint development, easy integration with its data, and extending Microsoft Teams.
Key features of the SharePoint Framework:
2.The controls are rendered in the normal page DOM.
3.The controls are responsive and accessible by nature.
4.It enables the developer to access the lifecycle in addition to render, load, serialize and deserialize, configuration changes, and more.
6.The developer toolchain is based on popular open-source client development tools such as NPM, TypeScript, Yeoman, webpack, and gulp.
7.Performance is reliable.
8.End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites.
9.SPFx web parts can be added to both classic and modern pages.
10.SPFx solutions can be used to extend Microsoft Teams.
Lets build a hello world web part Sharepoint framework using react.
For Scripting generally Console like cmd promt is use in windows os ,but mostly I used powershell window,because it remembers, I have scripted in last time or in last days,it saves times to write script).
Setup for Sharepoint Development environment:
Sharepoint supports LTS 10.x node js version. Make sure that node version should be same.
Link: Node LTS 10.x
Install a code editor:
We can install any editor that support client side development to build the web part. Few example Code Editors like below:
1. Visual studio code
Mostly Visual studio code(link: https://code.visualstudio.com/) is used ,I also use it.
Install development toolchain prerequisites:
Run in powershell(you can any console) to install the sharepoint development prerequisites.
npm install gulp yo @microsoft/generator-sharepoint --global
npm install gulp --global
Yeoman helps you kick-start new projects, and prescribes best practices and tools to help you stay productive. SharePoint client-side development tools include a Yeoman generator for creating new web parts. The generator provides common build tools, common boilerplate code, and a common playground website to host web parts for testing.
Command to install Yeoman
npm install yo --global
Install Yeoman SharePoint generator:
The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.
npm install @microsoft/generator-sharepoint --global
Install a modern web browser
Sharepoint Framework supports modern web browser like Microsoft Edge, Google Chrome, or Firefox as the development browser.You must install and update to latest one.
Create a new web part project:-
1.Create a new project directory in your favorite location
2. Go to the project directory
3. Create a new HelloWorld web part by running the Yeoman SharePoint Generator
4.When prompted,it should be done like below screenshot:
What is your solution name?: sharepoint-demo
Which baseline packages do you want to target for your component(s)?: SharePoint Online only (latest)
Where do you want to place the files?: Use the current folder
Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites?: N
Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant?: N
Which type of client-side component to create?: WebPart
What is your Web part name?: HelloWorld
What is your Web part description?: HelloWorld description
Which framework would you like to use?: React
5. Trusting the self-signed developer certificate
Sharepoint Framework's local webserver uses HTTPS by default.Self-signed SSL certificates are not trusted by your developer environment. By executing below command, it configure your development environment to trust the certificate.
6.Next open this solution to Visual studio code by
Executing command below
7.Next,Now go to Terminal=>select new terminal
Below Command to run the project.
It will open up like below in local workbench:
8. Click + in mid, search you web part name like hello world
9.Select helloworld web part.
For online webpart:
Part2:- Render google graph chart using sharepoint react from sharpoint list data.(Coming soon =>)
0 Comments on this post
Comments(0)||Login to Comments
- see more..
Issues Resolved (6)
Sitecore 9.3 (1)
International Business (1)
Innovations in Industries (3)
Supply Chain Management (1)
Industrial Engineering (14)
Sitecore 10 (4)
Cloud Computing (1)
Online Courses (1)
Online Resources (2)
Blazor WebAssembly (2)
Sitecore form (1)
MS Sql Server (1)
Angular 11 (2)
Automobile Engineering (5)
Sitecore powershell (1)
Microservice Architecture (1)
Sitecore Interview Questions (2)
Dotnet interview questions (1)
Sitecore useful links (1)
Solr Search (2)