ReactJS and SPFx

React by nature can respond to application's state of change dynamically and redraw them without any intense DOM manipulations from your end. In fact, many popular brands like Facebook, Instagram, Netflix, PayPal, and Uber use React to build enterprise applications because of its dynamic nature.

React JS is one of the most preferred client-side web parts on SPFx developments because of its ease of use and speed

With SPFx, Microsoft is taking a giant leap into embracing open-source to serve the SharePoint Online clients with better user interfaces and experience. The SPFX approach also allows SharePoint applications to embrace various open source libraries and tools.

In this article, I'm focusing on the client-side portion or in other words web parts development. I have implemented JavaScript, Angular and React JS to develop client web parts in the intranet space. The speed and user experience of React have been really impressive along with BootStrap and has become a prefered choice for most of our customers. Also, we see Microsoft's preference on ReactJS for SPFx based developments. In this blog, I'll be talking more about React.js and how we embraced it to create interactive portals. React is provided with many add-ons that are easy to use and increases the speed of development.

Let me share Slick/Flip add-on as an example

"Slick is a React-based predefined library that can be directly inserted into the component and reduce developer's time."

React slick can be easily installed from npm and used in a page by adding the slick tag and configuration web part.

Code Snippet

HTML:

Logic:

where variations like responsive display, multiple items, etc. can be achieved by using this single plugin.

React is a JavaScript-based library product and an easy to code programming language, reusable and performance oriented compared to its contemporaries.

With React, the application becomes well prepared to create user-friendly web parts. Also, the time taken to create a web part is comparatively quicker and easier for a developer. In React, all UIs are expressed as pure functions and the SPFx primarily makes use of React components and concepts. Hence, React has become a favorite choice for developers and user's community to develop web parts.

Reusable by Component Creation

React enables creation of module-like pieces of code called "Components". These code snippets reflect a particular part of the user interface, which can be repeated across several web pages. This is what we mean by reusability, which is a great way to save valuable time on development. The declarative nature of React also makes designing UI seamless and takes a major load off from product developers so they could focus on more important functions and business logic. We can also build a responsive design and PWA using React. React Applications can be made type-safe with Microsoft's TypeScript and we can also implement Functional Programming using React.

Code Performance

Unlike other JavaScript frameworks, React uses the Virtual DOM – the abstract form of Real DOM. It is easier for the React app developers to update changes performed by the users in the application without affecting other parts of the interface. This makes React extremely fast, in addition to the courtesy of React's Virtual DOM implementation and various rendering optimizations.

React JS a right mix in SPFx to overcome SharePoint limitations in Usability.

SharePoint was known for design and usability limitations in its previous versions. The look and feel and ease of use have been a challenge when it came to creating good user interfaces. But React JS comes with a history of building great UI experience for Tesla, Airbnb, and Walmart even in the non SPFX areas. With the flexibility to change JavaScript on the web part, React.js helps to create web parts that are quicker and interactive. The loading performance is also improved with the help of React.

Here's a simple use case that showcases the usability scenario using React

  • Let's consider the following calendar web part that has an event with categories.
  • When the web part is developed using React, the drop down does not load on user's selection.
  • On the contrary, if it is developed using the traditional code, it takes quite some time to load and can irate the users.
  • Since, React executes irrespective of IE, browser or OS, the user goes through a rapid experience.

T i v a s t a and React JS

Using Tivasta we have developed more than 45 portals for our customers across the globe. Tivasta uses React.js on SPFx. Microsoft's preferred choice has been React for SharePoint Online and with bootstrap, it is quicker to create user-friendly interfaces. No wonder, we developed both the front-end and web parts in Tivasta using React. At Tivasta, we have matured on SharePoint yet nimble when it comes to embracing new frameworks, which transforms user experience.

Related Blog

Contact Us

*All the fields are mandatory.

+1 732 737 9188