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.
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 :)
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.
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!
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.
@@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!
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
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?
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 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.
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.
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?
@@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.
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?
@@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.
@@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!
Can we use react for extension of application customizer? If you make a video for adding footer/header using react in Application customizer extension?
Sure... you'd just render the React component in the top/bottom placeholder. Once you get a handle on the desired placeholder, use React's render() method and pass in the placeholder's domElement just like you do with a web part.
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.
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
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.
God bless you, sir! I'm waist-deep into ur Fundamentals bundle (Apollo mission a-GO!!) and learning SO much! u rockkkk stay hooked!
Thanks! Glad you're enjoying my Mastering SPFx course & this video on React hooks!
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 :)
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.
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!
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.
Thanks, exactly what I need! I love React Hooks
Glad you liked it! Any questions or suggestions for other videos?
@@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!
I will use React 17 for now. Suggestion : a video with the same setup with the addition of msgraph ?
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
because I would like to use mgt components (microsoft/mgt-element) like , and I need a SharePointProvider from 'microsoft/mgt-spfx' @@Andrew_Connell
Wow. This is so needed! Hope MS fixes the example code asap!
You and me both!
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?
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. ☹️
@@Andrew_Connell so it is better to stick to class components. Thanks
@@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.
Excellent video, this procedure also works in SharePoint Server 2019?
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.
Great, Is it possible to upload an example of CRUD operation using react function components and PnPjs please, in your next tutorials ?
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?
@@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.
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?
@@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.
@@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!
Can we use react for extension of application customizer? If you make a video for adding footer/header using react in Application customizer extension?
Sure... you'd just render the React component in the top/bottom placeholder. Once you get a handle on the desired placeholder, use React's render() method and pass in the placeholder's domElement just like you do with a web part.
Hi Andrew, can we still download the project anymore?
Absolutely! Use the link to head over to the page on my site and request the download.
Can I also use it with PnPjs?
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.