SharePoint/SPFx: Returning to Webpart Development Part #3 (with React Hooks)

Recently I was asked to develop a webpart for a modern SharePoint site. My first thoughts were; where do I start; I haven’t done any webpart development for years? I would like to share my journey with you over the next few posts and hope my experience will help new and returning developers along the way.

In my previous post I covered:

In this post I will cover:

Recommended Reading

The official React website has some fantastic documentation and to avoid duplicating what they have already published I would recommend reading the “Thinking in React” article before we move on. I found the section “Step 2: Building A Static Version In React” particularly useful to kick-off the build of this webpart.

Using React Hooks with the SPFx Framework

The first thing I did was to import the React module using following statement:

import React, { useState, useEffect } from 'react';

When I tried to build the project, I received the following error:

Module '"c:/.../SJLewis.SPFx.Webparts.People/node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flagts(1259)
index.d.ts(46, 1): This module is declared with using 'export =', and can only be used with a default import when using the  'allowSyntheticDefaultImports' flag.

Plus, the React and ReactDom import statements are underlined in red:

React and ReactDom import statement is underlined in red

What is allowSyntheticDefaultImports? It allows default imports from modules with no default export and it does not affect code emitted, it is just typechecking.

How to enable allowSyntheticDefaultImports

Open the tsconfig.json file and add the following code to the “compilerOptions” section:

"allowSyntheticDefaultImports": true

Your tsconfig.json file should look something like this:

allowSyntheticDefaultImports

And now TypeScript is happy…

React and ReactDom import statement are validated

Before moving on to the next step, let’s build the project and commit your changes to source control (just in case we break the project later).

Installing additional NPM packages

We don’t always know all of the packages we want to use upfront, however I like to add what I can upfront. For this example, I am going to add the following npm packages to my project. Enter the commands into the VS Code Terminal window:

And finish by doing some “housekeeping” and confirming that the project builds:

gulp clean
npm shrinkwrap
gulp build

Project Folder Structure

I like to start by creating a folder structure based upon the Components and Services listed within my wire-frame(s) and components list.

People Search Wire-Frame

Component List

Component NameData SourceExpected ResultsComponent Actions
Search Wrapper 
Search BoxGraph UsersZero to more itemsFilter
Search Clear Clear data & filters
Filter WrapperGraph UsersZero to more items
Filter Combo-boxGraph UsersZero to more itemsFilter
Filter Auto-suggestGraph UsersZero to more itemsFilter
Result WrapperGraph UsersZero to more items
Result CardGraph UserOne itemDisplay
Result User PhotoGraph User PhotoOne itemDisplay
Result User PresenceGraph User PresenceOne itemDisplay
Result User ContactGraph UserOne itemDisplay
Footer WrapperGraph UsersZero to more itemsDisplay
Component List

Component Folder Structures

Starting with components, add the following folders under this path:

“~\src\webparts\peopleSearch\components\”

  • filters
  • results
  • search

Next, add blank/empty .TSX files for each component:

~\src\webparts\peopleSearch\components\filters\

  • FilterWrapper.tsx
  • FilterComboBox.tsx
  • FilterAutoSuggest.tsx

~\src\webparts\peopleSearch\components\footer\

  • FooterWrapper.tsx

~\src\webparts\peopleSearch\components\results\

  • ResultWrapper.tsx
  • ResultCard.tsx
  • ResultUserPhoto.tsx
  • ResultUsrPresence.tsx      Not required / built into Persona (Office UI Fabric) control
  • ResultUserContact.tsx

~\src\webparts\peopleSearch\components\search\

  • SearchWrapper.tsx
  • SearchBox.tsx
  • SearchClear.tsx

Even thought these files are empty the project should build without any issues, I still like to build the project after every major change I make.

<em>gulp build</em>

Note: “~\” represents the project’s root folder.

Service, Models & Data Folder Structures

I am going to create the folder structure which will be used by the Service, Models & Data files. Start by adding the following folders under this path: “~\src\”

  • data
  • models
  • services

I have not planned exactly what will be created, but here is an overview as to what will go where:

  • The Data folder will contain .JSON files, these will contain mock data for testing the webpart using the local work bench
  • The Models folder will contain .TS files, which will describe the structure of the data respective of where it is stored or accesses from.
  • The Service folder will contain .TS files and classes that will represent the services and will retrieve data either from the mock or live data sources.

Next Steps

Now that I have my project structure laid out, I can focus on creating either the Data & Services or the Components & User Interface. Neither option is wrong, however, because I know more about the User Interface than the Services, that is where I will begin for my next post.

Tip: If you cannot decide on which order to build your webpart(s) take a look at the “Thinking in React” article, you may also find the section “Step 2: Building A Static Version In React” useful.