Tutorial on how to create SPFx webPart with ReactJS for SharePoint 2016 On-Premise environment

sharepoint framework example reactjs
InfoPath alternatives for form designing SharePoint

Here in this post we will discuss how we can create SPFx webpart using ReactJS for SharePoint 2016 on premise environment.

The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling. 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 from day one.

Follow below steps:

1. Install
1.1. Prerequisites:
1.2. Install CMDer, See Benefits
1.3. Install on global layers following :
See installed globally packages with npm list –g –depth=0

sharepoint framework example
sharepoint framework example



OR

– npm install -g npm@3
– npm install -g yo gulp @microsoft/generator-sharepoint@latest

1.4. Install Project template with yo:

sharepoint framework client web part
sharepoint framework client web part

You must choose -> SharePoint 2016 onwards, including SharePoint Online

1.5. Use react project template

sharepoint framework web parts
sharepoint framework web parts

A short way to Install

sharepoint framework example
sharepoint framework example

yo @microsoft/sharepoint –solutionName “hello-world” –framework “react” –componentType “webpart” –componentName “HelloWorld” –componentDescription “HelloWorld web part” –environment “onprem”

2. After install project template
Use:
– “code .” – open current folder in VS Code
– “explorer .” – open current folder in Window explorer
– “yo @microsoft/sharepoint” – add new webpart in project

sharepoint framework example reactjs
sharepoint framework example reactjs

Hope this article will be helpful.

Similar SharePoint 2013 Tutorials


About Georgi Krystev

I'm SharePoint Developer primary focused on SharePoint Framework for On-Premise environment.

View all posts by Georgi Krystev →

Leave a Reply