Using React Hooks in the SharePoint Framework: A Step by Step Guide

Рет қаралды 6,348

Күн бұрын

I scour all the Microsoft & community resources so YOU DON'T HAVE TO. Save time & stay informed. Each issue contains all the news you need in less than 5 minutes every other Tuesday plus my insights & guidance on a trending topic. Subscribe to my bi-weekly newsletter & join 9,000+ fellow M365 developers! vtns.io/ytvnewsletter! No clickbait · 100% free · unsubscribe anytime.
-------------------------------------------
The current version of the Yeoman generator for the #SharePoint Framework (#SPFx) still uses the older-style #React class components. Because that's what you get by default, that's what most developers end up using.
But functional components enabled by React hooks have become widely popular… and I get a lot of questions on how to use React hooks in your #SharePoint projects!
So… until Microsoft updates the Yeoman generator, I'm going to show you how you change your new projects to React hooks in just a few minutes.
And then, I'll show you the basics of hooks with a simple example.
🔗 Read the article ▶️ vtns.io/ytvreacthooksspfx
📚 Chapters
-------------------------------------------
00:00 : Introduction
01:00 : What's the problem?
02:08 : Convert a class component to a functional component
03:37 : Implement state & refresh the web part
05:07 : Add button & event handler
07:33 : Add event handler when state property changes
10:21 : Initialize the component with useEffect()
🤓 LEARN MICROSOFT 365 FULL-STACK DEVELOPMENT WITH AC! 👇👇👇
MY FREE MICROSOFT 365 EMAIL & SELF-PACED COURSES
-------------------------------------------
📺 Mastering the SharePoint Framework (Starter Bundle) vtns.io/ytvcoursemspfx
✉️ Explore & evaluate the SharePoint Framework vtns.io/ytvecourseexplorespfx
✉️ Understand the SharePoint Framework toolchain vtns.io/ytvecoursespfxtoolchain
✉️ Microsoft Teams App Development OnRamp vtns.io/ytvecoursemsteamsonramp
MY SELF-PACED COURSES
-------------------------------------------
📺 Build Web Parts with the SharePoint Framework (SPFx) vtns.io/ytvcoursespfxwp
📺 Extend the SharePoint UX with the SharePoint Framework (SPFx) Extensions vtns.io/ytvcoursespfxext
📺 Extend Viva Connections with the SharePoint Framework Adaptive Card Extensions vtns.io/ytvcoursespfxace
🔗 RESOURCES
-------------------------------------------
🔗 Want more SPFx? 👉 • START HERE 👉 SharePoin...
🔗 Want more Microsoft Teams app dev? 👉 • START HERE 👉 Microsoft...
🔗 Want more Microsoft 365 app dev? 👉 • START HERE 👉 Microsoft...
🔗 LINKS
-------------------------------------------
Subscribe to "The Full Stack Dev's Microsoft 365 Playbook" ✉️ vtns.io/ytvnewsletter - latest Microsoft 365 news & insights for developers
LinkedIn ▶️ / andrewconnell
Threads ▶️ www.threads.net/@andrewconnell1
GitHub ▶️ github.com/andrewconnell & github.com/voitanos
𝕏 | Twitter ▶️ / andrewconnell
www.andrewconnell.com/links/
Website ▶️ www.voitanos.io/

Пікірлер: 33

@Andrew_Connell 11 күн бұрын

@kneetotheface Жыл бұрын

God bless you, sir! I'm waist-deep into ur Fundamentals bundle (Apollo mission a-GO!!) and learning SO much! u rockkkk stay hooked!

@Andrew_Connell Жыл бұрын

Thanks! Glad you're enjoying my Mastering SPFx course & this video on React hooks!

@buzzlightbeer1636 Жыл бұрын

I'm glad to see you go through a hooks examples in SPFx! If you end up doing more videos on the subject, I wouldn't mind seeing how to add child hook component under the parent hook, in particular, how the interfaces/typing look and feel. I know you have the one project in your class I can download... but I learn better by watching someone else explain and tie all the loose ends together. Which is why your course has been so helpful... nothing else out there like it :)

@Andrew_Connell Жыл бұрын

Keep in mind they aren’t “hook components”… it’s a functional component. The “hook” are the “use*()” methods from the React API that make functional components possible. As for consuming a child component, it’s the exact same as class components. Notice how I didn’t do anything in the web part? Because the “parent” or consumer of the component doesn’t care if it’s a class/functional component.

@buzzlightbeer1636 Жыл бұрын

Well, finally got around to doing my first real-life hook. I wasn't actually converting a class though. I had a stateless functional component that I was originally passing callbacks down to which would allow me to show selected item (when clicked) in a panel on the parent component. With this guide, I was able to convert it to show the side panel with a hook all in the functional component. End result: It looks a little cleaner and I don't need to worry about maintaining state on a higher component and have all the callbacks. Wasn't all that scary after all... at least for an easy first :) So Big Thanks to the video AND your course!

@Andrew_Connell Жыл бұрын

Thanks & glad it helped! But... one thing: I know I keep pointing this out when you make this mistake, but I feel it's important because the way you're saying things is confusing. Will be confusing for others who see your comments & for you if that's how you describe challenges you're having. You aren't creating hooks, at least no the code you've shared elsewhere with me. You're creating functional components. A React hook is the method that starts with "use". For instance, some of the OOTB hooks are "useState", "useEffect", & "useCallback". A custom hook would be, like what's used in Teams apps, is "useTeams". I'm not going to continue harping on this, but suggest you understand the difference & adopt what the correct terminology. It's like ordering a salad but you keep getting irritated you get a hot dog. The problem isn't in the restaurant, the problem is that you call a hot dog a salad when the rest of the world calls a salad a salad.

@Zzyzx- Жыл бұрын

Wow. This is so needed! Hope MS fixes the example code asap!

@Andrew_Connell Жыл бұрын

You and me both!

@BruceLane 9 ай бұрын

Thanks, exactly what I need! I love React Hooks

@Andrew_Connell 9 ай бұрын

Glad you liked it! Any questions or suggestions for other videos?

@BruceLane 9 ай бұрын

@@Andrew_Connell I'm building my first spfx webpart with React 18, Ionic framework, MSGraph, accessing data from a REST API, sp lists, AD... wish me luck! I may have questions along the way... but for now, back to coding!

@BruceLane 9 ай бұрын

I will use React 17 for now. Suggestion : a video with the same setup with the addition of msgraph ?

@Andrew_Connell 9 ай бұрын

How would that be different than what the current video shows? Trying to understand the ask because calling MSGraph isn't all that different from calling the SharePoint REST API, you're just using a different client.@@BruceLane

@BruceLane 9 ай бұрын

because I would like to use mgt components (microsoft/mgt-element) like , and I need a SharePointProvider from 'microsoft/mgt-spfx' @@Andrew_Connell

@carlos79000 Жыл бұрын

Excellent video, this procedure also works in SharePoint Server 2019?

@Andrew_Connell Жыл бұрын

Unfortunately not… React Hooks was introduced in React v16.8 & the version of SPFx supported in SP 2019 (v1.4.1) includes React v15.6. While technically you can run two versions of React side-by-side, I’ve seen numerous people have mixed results doing this in SharePoint… esp with older versions. If it were me, I’d not do it in SP2019.

@shmatapour Жыл бұрын

Great, Is it possible to upload an example of CRUD operation using react function components and PnPjs please, in your next tutorials ?

@Andrew_Connell Жыл бұрын

Hmm... can you elaborate a bit on what you're thinking? Like a mashup of a web part that uses PnPjs to perform CRUD ops on list items, but do it using React hooks?

@buzzlightbeer1636 Жыл бұрын

@@Andrew_Connell Yes please! I know you prefer building your own rest calls, but I'd also like to see an example with PnPjs. Especially something with v3 library. Dare I ask for if you do a CRUD operation video, do it in a child hook (called by the parent hook) with SPFx v1.15.2 and v3 Library? I think for me that would also give a good example on how interfaces might work and also passing down functions/hooks whatever to children and have them update the parent.

@buzzlightbeer1636 Жыл бұрын

My hooks terminology is pretty bad so this is what I mean (extending your original video): Main React Web Part class Main React Hook Component - Gets list of lists from the site When you click on a list, it loads a child component Child React Hook Component This component fetches the items in the list, draws them itself If you want bonus points, pass the list of items back up to the parent - like add to parent state (Today I might do that with a callback function) I know I'm high maintanance :) Did I say your course has been really helpful?

@shmatapour Жыл бұрын

@@Andrew_Connell Hi Andrew, We have a chapter in the Mastering SharePoint Framework - Fundamental which name is " SharePoint Data Access with SPHttpClient " if you override one of them such as " Creating SharePoint List Items " or " Reading SharePoint List Items: Explore & Setup List / Project " with PnPjs and React hooks, we will get an idea to do other operations with PnPjs and React function components in our webparts.

@Andrew_Connell Жыл бұрын

@@shmatapour OK... that helps clarify what you were asking. I've got some videos planned that I think this will get addressed. They take time and a bit swamped, but I totally ACK the ask Thanks! BTW, make sure you subscribe to get notified about future ones!

@hamoudi4u Жыл бұрын

Hi Andrew, I am following this on SPFX 1.4.1 with React 15 on SP2019. Sometimes WebParts starts crashing with the error: Make sure to export your web part as 'export default WebPartName I have read somewhere that it is because I am using Functional components on React 15. Is this true?

@Andrew_Connell Жыл бұрын

Yup... makes sense as React Hooks weren't introduced until React v16.8 so functional components weren't possible in older versions of React. Unfortunately, there's no supported upgrade path for React or SPFx with SharePoint Server 2019. ☹️

@hamoudi4u Жыл бұрын

@@Andrew_Connell so it is better to stick to class components. Thanks

@Andrew_Connell Жыл бұрын

@@hamoudi4u Well... it's more like you don't have another option unfortunately. It's another one of the disadvantages of working in a SharePoint on-premises deployment 🤷‍♂ unfortunately.

@user-ye9gn7nx5e 11 ай бұрын

Hi Andrew, can we still download the project anymore?

@Andrew_Connell 11 ай бұрын

Absolutely! Use the link to head over to the page on my site and request the download.

@nearev0 7 ай бұрын

Can I also use it with PnPjs?

@Andrew_Connell 7 ай бұрын

You mean can you use PnPJS with React hooks? Sure! The _ONLY_ difference between class-based components & functional-components is the latter is enabled by hooks. _EVERYTHING_ else you're used to using, you can continue to use, including PnPJS.