Adding Bootstrap to SPFx web parts

Hi Folks

So we have an SPFx web part that shows how to integrate the React ‘Thinking’ tutorial with the SPFx tutorial but it looks pretty nasty:

Thinking in REACT for SharePoint Framework

As I get up to speed with the SharePoint Framework (SPFx) it becomes more and more obvious that a knowledge of REACT is going to be very useful.

I have found that doing tutorials is a great way of getting to grips with things but the SPFx ones whilst good are concerned with the plumbing rather than exploiting what is there.

The second REACT tutorial Thinking in React is also excellent but it makes some different assumptions from those in SPFx.

• REACT uses JavaScript whilst SPFx uses TypeScript
• REACT uses ES5 whilst SPFx uses ES6

So just to prove that all of the REACT functionality is available I decided to upgrade the Thinking in REACT example to use TypeScript and ES6 and then use it as the ‘payload’ of an SPFx web part.

It took a couple of days as I got to grips with the changes:

• Adding types to all functions.
• Changing the ReactElements to ReactComponents.
• Sorting out the lexical scope.

The end result can be found on GitHub at thinking-webpart.

As it stands there are still a few outstanding tasks but it works and it is fully functional.

Feel free to clone it and try it out.

Cheers

Sebastian