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:

• Avoiding Pitfalls (Part #1)
• Solution Design (Avoiding Pitfalls Part #2)
• Choosing a Framework
• Creating a SPFx Project
• Source Control

In this post I will cover:

• Recommended Reading
• Using React Hooks with the SPFx Framework
• Installing additional NPM packages
• Project Folder Structure
• Next Steps

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:

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:

And now TypeScript is happy…

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:

• npm i @fluentui/react
  https://github.com/microsoft/fluentui
• npm install @fluentui/react
  https://developer.microsoft.com/en-us/fluentui#/get-started/web#fluent-ui-react
• npm install @microsoft/microsoft-graph-types –save-dev
  https://www.npmjs.com/package/@microsoft/microsoft-graph-types
• npm i @microsoft/sp-component-base
  https://www.npmjs.com/package/@microsoft/sp-component-base
• npm i @microsoft/sp-property-pane
  https://www.npmjs.com/package/@microsoft/sp-property-pane
• npm i @microsoft/sp-http
  https://www.npmjs.com/package/@microsoft/sp-http

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.

Component List

Component Name	Data Source	Expected Results	Component Actions
Search Wrapper	–		–
Search Box	Graph Users	Zero to more items	Filter
Search Clear	–		Clear data & filters
Filter Wrapper	Graph Users	Zero to more items	–
Filter Combo-box	Graph Users	Zero to more items	Filter
Filter Auto-suggest	Graph Users	Zero to more items	Filter
Result Wrapper	Graph Users	Zero to more items	–
Result Card	Graph User	One item	Display
Result User Photo	Graph User Photo	One item	Display
Result User Presence	Graph User Presence	One item	Display
Result User Contact	Graph User	One item	Display
Footer Wrapper	Graph Users	Zero to more items	Display

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\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.