SharePoint Framework using React JS

Introduction

In the previous installment of this series, we covered an introduction to the SharePoint Framework, the development cycle, necessary skills and tools, and Node configurations. Prior to delving into SPFx web parts, it's essential to grasp the various types of development solutions. This article will begin by addressing these diverse development solutions.

If you haven't read part one, I recommend going through it to ensure a comprehensive understanding. Below is the link to the SharePoint Introduction:

SharePoint Framework using React JS - Part 1

Various Development Solutions

1. Web Parts

SharePoint Framework (SPFx) Web Parts represent small UI segments or components that can be added to SharePoint pages. While SharePoint Modern pages offer several out-of-the-box (OOTB) web parts like list, library, quick links, and image gallery, custom web parts can be developed using SPFx. These web parts can dynamically fetch the current site context, enabling personalized experiences based on the user and the context of lists and libraries.

An example of a Hello World web part with descriptive properties is provided to illustrate the concept.

2. Extensions

Unlike web parts that are confined to pages, SPFx Extensions allow the extension of user experiences beyond the page boundaries. By leveraging SPFx Extensions, customization can be applied to various parts of SharePoint, including notification areas, headers, footers, toolbars, and list views. It's important to note that extensions do not operate in a Classic environment and are designed for Modern SharePoint Pages, Lists, and Document libraries.

Types of extensions in SPFx

Three types of extensions are available in SPFx: Application Customizers, Field Customizers, and Command Sets.

Application Customizer: Used to add scripts to SharePoint Modern pages and Modern UI of list and library view pages. It does not load in the classic view of lists and libraries. Application Customizers are often employed for building headers and footers on SharePoint Modern UI.
Field Customizers: Modify views and fields within the list in Modern UI. In the Classic list view, JSLink is used for data field modification, while in Modern UI, field customizers are employed for rendering custom data fields.
Command Sets: Develop custom actions for SharePoint lists and libraries, appearing as command buttons on the command bar of list and library views and the context menu of items. Command sets can be specific to list/library items, and their appearance can be configured in the elements.xml file.

3. Libraries

SPFx allows the creation of third-party libraries, which are collections of reusable code that can be utilized in other SPFx web parts and extension solutions. By linking a library in a solution and importing code files, developers can avoid redundancy and efficiently reuse code across multiple projects.

Conclusion

In this article, we delved into the fundamentals of the SharePoint Framework, exploring web parts, extensions, and libraries. Your feedback is valuable, so if you have any additional insights or find the information useful, please share your thoughts.

In the upcoming article, we will delve into developing an SPFx web part using React JS.