Let’s go! Learn SPFx Today! | Build a webpart using ReactJS in Real Time

Let’s go! Learn SPFx Today! | Build a webpart using ReactJS in Real Time - ZERO TO HERO PART 5 of 5

Рет қаралды 4,099

Жыл бұрын

#spfx #sharepoint #webpart
In this mini series of 5 episodes we set up the latest 2022 1.15.2 development environment and build a SharePoint webpart using the SharePoint Framework and the PnP Controls
pnp/sp
spfx-react-controls
spfx-react-property-controls
By the end of the 5 episodes you will know how to build a webpart using the latest SharePoint Framework and PnP Controls
For more tutorials, see our playlist/series "SharePoint Framework for Beginners"
Source Code: github.com/robpearmain/spfx-pnp
If you would like the source code, or require support please support us on Patreon at / robertsdevtalk
Why not also head over to www.robertsdevtalk.com and sign up, for latest news
Whether you develop in Javascript or a Javascript framework such as ReactJS or VueJS, you will benefit from this weekly series.
☕️ Don't forget, old developers need coffee (and.. beer and pizza too 🍺 🍕)
www.buymeacoffee.com/Robertsd...
📧 📫 Join us on our developer journey! Sign up to our email newsletter:
robertsdevtalk.com
🐦 Follow us on Twitter:
/ robertsdevtalk
🎶 Music by Epidemic Sound:
www.epidemicsound.com/referra...
Our gear - click through to support our channel! :)
Camera (Canon M50)
🇬🇧 UK: amzn.to/3sUbzuL
🇺🇸 US: amzn.to/3uBsG5c
Camera mic (RODE VideoMic Pro)
🇬🇧 UK: amzn.to/3ml8xgC
🇺🇸 US: amzn.to/2RkGxyi
Camera tripod (Manfrotto Compact tripod):
🇬🇧 UK: amzn.to/3fJGyWU
🇺🇸 US: amzn.to/3mF4oV2
Voiceover Mic (Blue Yeti)
🇬🇧 UK: amzn.to/2PV7UOQ
🇺🇸 US: amzn.to/3uMiEym
Chris's dev mouse for PC (Logitech MX Master 3)
🇬🇧 UK: amzn.to/39K7BNV
🇺🇸 US: amzn.to/3uKYvso
Chris's dev keyboard for PC (Logitech MX Keys)
🇬🇧 UK: amzn.to/3rSbHcX
🇺🇸 US: amzn.to/3a6Unef
Rob's dev keyboard for Mac (Apple Magic Keyboard)
🇬🇧 UK: amzn.to/3dEQpKG
🇺🇸 US: amzn.to/3sb6JZc
Rob's dev mouse for Mac (Apple Magic Mouse)
🇬🇧 UK: amzn.to/3sRCQhr
🇺🇸 US: amzn.to/3mFi6qS
Icons in this video kindly provided by FlatIcon from Freepik
www.freepik.com
www.flaticon.com
Disclaimer - some of our links are affiliate links, which means that we receive a small commission for any sales made via those links, at no extra cost to you - so a great way to support our channel! Thank you so much for your support 😊

Пікірлер: 26

@MuhammadAdnan2.0 Жыл бұрын

great for this next level series with great features,,, waiting fo more stuff #Spfx 😍

@RDT Жыл бұрын

Thanks for your kind comment and support of the channel

@debernd82 Жыл бұрын

Thank you so much. It´s so much fun to learning with you. Love your content! 👋🔥♥

@RDT Жыл бұрын

Thank you for your support, much appreciated

@shubhamgade8579 Жыл бұрын

Thank you very much for great content.. waiting for more stuff😄

@RDT Жыл бұрын

Thanks for your support of the channel Shubham

@TimSmith714 5 ай бұрын

Thank you! This has been so helpful.

@RDT 5 ай бұрын

You are welcome and thanks for your support of the channel

@sigi9393 Жыл бұрын

Thank you very much for this cool stuff! 😀 for me it's also nice that you left mistakes in the video, makes it easier to understand. On my wishlist would be a webpart that interacts with other webparts on the same page, e.g. list webpart for chosing an entry using it to get and show details from other lists.

@RDT Жыл бұрын

Thanks for your support, good idea for child/parent webparts demo

@gabrielmenacho7170 Жыл бұрын

Hi Roberts, tks very much . Can you do a video about how create,delete and update in the list sharepoint using react and pnp ?

@RDT Жыл бұрын

Hi. In this introduction I covered reading from the list, but absolutely, I will add that to a future episode. Thanks for your comment and your support

@dimitrispapakos4020 7 ай бұрын

Good afternoon. Do you think you can extend this tutorial by adding the ability to manually select any list and choose the fields to display please?

@RDT 7 ай бұрын

That’s a good suggestion. In the meantime see here: pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldListPicker/

@rahulb1171 Жыл бұрын

Hi Robert, Thank you so much for this series I have an issue with this web part. I watched 5 videos and did this FAQ web part it's perfectly fine .but it works only in the FAQ SharePoint list. When I use some other SharePoint list the web part becomes blank. How to resolve this issue

@RDT Жыл бұрын

Are you sure the column names are the same as the one in the FAQ example. If not it will not display. Also open the developer console in your browser it should give you an error, copy and paste it here and I will take a look

@rahulb1171 Жыл бұрын

Yeah, I used the same column name and column type. Now it shows the SharePoint title but SharePoint body part is blank.But in SharePoint list I have body data

@rahulb1171 Жыл бұрын

@@RDT This is my issue, =>Failed to load resource: the server responded with a status of 404 () vendors~main~main-pfp_ace75879.js:1 =>Failed to load resource: the server responded with a status of 404 () main~main-pfp_a1763e9c.js:1 =>Failed to load resource: the server responded with a status of 404 () main-pfp_99020a81.js:1 =>Failed to load resource: the server responded with a status of 404 () search-instrumentation_09c52f70.js:1 =>Failed to load resource: the server responded with a status of 404 () search-logger_e2fcf0d1.js:1 =>Failed to load resource: the server responded with a status of 404 () search-page-strings_0c5f88af.js:1 =>Failed to load resource: the server responded with a status of 404 () sp-pages_en-us_a003ccc222bc36a84748.js:1 Uncaught (in promise) Error: Either Guest user or Cortex is not enabled! at new t (sp-pages_en-us_a003ccc222bc36a84748.js:1:353847) at N (sp-pages_en-us_a003ccc222bc36a84748.js:1:354298) at t._tryRenderAnnotations (sp-pages_en-us_a003ccc222bc36a84748.js:1:377466) at sp-pages_en-us_a003ccc222bc36a84748.js:1:356864 at sp-viewport-loader_none_5b9d002ce9309de24eb0.js:1:18542 at Set.forEach () at e._handleViewPortRendered (sp-viewport-loader_none_5b9d002ce9309de24eb0.js:1:18518) at e._tryLoadOutsideViewport (sp-viewport-loader_none_5b9d002ce9309de24eb0.js:1:18266) at e._onComponentFinish (sp-viewport-loader_none_5b9d002ce9309de24eb0.js:1:15368) at e.onAfterComponentRenderOrError (sp-viewport-loader_none_5b9d002ce9309de24eb0.js:1:14718)

@dimitrispapakos4020 7 ай бұрын

I published the app on Sharepoint App Catalog when I edit the page the webpart appears ok but when I publish my page it disappears and will not work giving an error: cannot connect to web? can you please help

@RDT 7 ай бұрын

Have you tried hard refreshing the browser, also is it configured to point to the correct list in properties? Also updated tutorial here: Let’s go! Learn SPFx Today! | Build a webpart using ReactJS in Real Time - ZERO TO HERO PART 1 of 5 kzfaq.info/get/bejne/gpx7l6-btLTSlIE.html

@dimitrispapakos4020 7 ай бұрын

Works perfect thank you mate@@RDT

@shubhamnagane428 Жыл бұрын

Hi Sir, Hope your doing well, I would like to know when are going to upload videos in which you can create Add-on in SPFx and deploy on Tenet server. and please let me know how can I contact you regarding SPFx.

@RDT Жыл бұрын

I am not planning on doing any on premise examples only online 👍 thanks for your support of the channel

@GuidoSalami1 Жыл бұрын

where is the final product? it looks like nothing, how do you sell this usecase to people if youre displaying nothing at the end

@RDT Жыл бұрын

I am confused, what do you mean final product? The tutorial helps you to build a fully working FAQ list which is fed off a SharePoint list of your own FAQS???

@RDT Жыл бұрын

I have a tutorial here on deployment if this is what you mean kzfaq.info/get/bejne/rdJ0ZJxnyKfKcYU.html