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 1 of 3

Рет қаралды 39,906

2 жыл бұрын

#spfx #sharepoint #webpart
In this mini series of 3 episodes we set up the development environment and build a SharePoint webpart using the SharePoint Framework in real time.
By the end of the 3 episodes you will know how to design a webpart based on customer requirements, build it and test.
For more tutorials, see our playlist/series "SharePoint Framework for Beginners"
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 😊

Пікірлер: 61

@poonamw26 2 жыл бұрын

Thanks for this step by step guide.....eagerly waiting for part 2 & 3 🤗

@RDT 2 жыл бұрын

Thanks Poonam, appreciate the support

@anujupadhyay10 2 жыл бұрын

A big thanks for this!! really-really awesome!!!

@RDT 2 жыл бұрын

Thank you Anuj, your support and comments are most appreciated

@hazehaze7820 2 жыл бұрын

Thank you for this!

@RDT 2 жыл бұрын

You are very welcome, thanks for your support

@nduagubadev 2 жыл бұрын

Awaiting Part 2 and 3

@RDT 2 жыл бұрын

Part 2 released this Monday. Thanks for your support nduaguba Steven 👍

@RDT 2 жыл бұрын

Part 2 released today

@RDT 2 жыл бұрын

Episode 2 is scheduled for October 11th 2021

@abenetbeyene3398 2 жыл бұрын

Can't wait this is awesome

@room58MMTest Жыл бұрын

Brilliant series ... I do like your style of teaching. Do you have any series on Adaptive Card Extensions ?

@RDT Жыл бұрын

Thanks for your kind comment. Not yet, but planning on doing a bit on Adaptive Card Extensions soon

@iiiiiericiiiii 2 жыл бұрын

Hi, Rob. Thank you for all the effort in making these instructions! I'm getting the following error: TS2305: Module '"@microsoft/sp-component-base"' has no exported member 'IReadonlyTheme'. Can you post the version you used? Mine are as follows: Node - 14.17.0 Gulp CLI - 3.9.1 Gulp Local version - 3.9.1 Yeoman - 4.2.0

@RDT 2 жыл бұрын

Make sure to install NVM (Node Version manager) to manage your node instances. Gulp must be 4 or above Node is v14.17.5 CLI version: 2.3.0 Local version: 4.0.2 Not sure how to check version of Yeoman here is the package file { "name": "readreceipt", "version": "0.0.1", "private": true, "main": "lib/index.js", "scripts": { "build": "gulp bundle", "clean": "gulp clean", "test": "gulp test" }, "dependencies": { "@microsoft/sp-core-library": "1.12.1", "@microsoft/sp-lodash-subset": "1.12.1", "@microsoft/sp-office-ui-fabric-core": "1.12.1", "@microsoft/sp-property-pane": "1.12.1", "@microsoft/sp-webpart-base": "1.12.1", "@pnp/sp": "^2.8.0", "@pnp/spfx-controls-react": "^3.3.0", "@pnp/spfx-property-controls": "^3.2.0", "office-ui-fabric-react": "7.156.0", "react": "16.9.0", "react-dom": "16.9.0" }, "devDependencies": { "@types/react": "16.9.36", "@types/react-dom": "16.9.8", "@microsoft/sp-build-web": "1.12.1", "@microsoft/sp-tslint-rules": "1.12.1", "@microsoft/sp-module-interfaces": "1.12.1", "@microsoft/sp-webpart-workbench": "1.12.1", "@microsoft/rush-stack-compiler-3.7": "0.2.3", "gulp": "~4.0.2", "ajv": "~5.2.2", "@types/webpack-env": "1.13.1" } }

@iiiiiericiiiii 2 жыл бұрын

@@RDT thanks a lot, Rob! I'll copy yours.

@iiiiiericiiiii 2 жыл бұрын

@@RDT Here are the steps I did: 1. nvm install 14.17.5 2. nvm use 14.17.5 3. npm i gulp yo @microsoft/generator-sharepoint --global 4. ran yo 5. gulp trust-dev-cert After step 5, I am getting the following error: ReferenceError: primordials is not defined

@RDT 2 жыл бұрын

Try npm install gulp@^4.0.2. Then just run gulp without “serve” and then try gulp build and then gulp serve. Also even though you choose nvm use 14.x.x type node -v to ensure you are using that version and also check gulp version after installing

@bhaidar 2 жыл бұрын

Can you repeat the same series on Vuejs? Thanks

@RDT 2 жыл бұрын

This video may help kzfaq.info/get/bejne/n65ml92d3cCVnqs.html Give me some time and I will do a vue specific episode

@anidaniel5553 Ай бұрын

I can't seem to find share point online only. I am getting which kind of client-side to create?

@RDT Ай бұрын

When you run yo

@markcole4621 2 жыл бұрын

This error was produced when I attempted to import sp: 'Module "@pnp/sp" has no exported member 'sp'. If anyone else encounters this issue perform the following actions: 1) npm uninstall @pnp/sp 2) npm i @pnp/sp@2.11.0 Fine series, but the cloud moves quickly.

@RDT 2 жыл бұрын

Yes, time for me to make an update methinks. Thank you Mark, much appreciated

@mariavitoriaaugusto6381 Жыл бұрын

hello, how do you open a new tab in the quick links web part, I think it doesn't have that option. Would you know how to create a quick links webpart, but when you click the link it opens a new tab??

@RDT Жыл бұрын

I answered your other comment 👍

@ahmadyamout6867 Жыл бұрын

Hi Rob , can I still watch this series at this time or it's outdated?

@RDT Жыл бұрын

Hi Ahmad. It is relevant, but I recommend the latest one here Zero to Hero! Build a SharePoint Framework Webpart using PnP and ReactJS - PART 1 of 5 (SPFx) kzfaq.info/get/bejne/gpx7l6-btLTSlIE.html

@csv1971 Жыл бұрын

Hi Interesting. Is it possible to make a chat / comments web part... With email notifications when a new comments have been added.... And the notification will have a link to the SharePoint page where the web part exist?

@RDT Жыл бұрын

Hi Claus. Absolutely, basically anything you can do it ReactJS. A good example is here getstream.io/chat/react-chat/tutorial/ . Sp you could use a list to store chat items, or use a 3rd party chat API

@csv1971 Жыл бұрын

@@RDT Hi Thanks for the info. Can you or do you know anyone that can create such an web part for our company... For sure as a paid project.

@Mark-nm9sm 11 ай бұрын

Καλησπερα απο Ελλαδα Are you greek? I cam see a rafina frame behind you 😅 In any case i'm here to learn spfx with react, can't wait 💯 One question i have is , do I really need to downgrade node version from v18.14.0 that I have currently, to any of these? >=12.13.0 =14.15.0 =16.13.0

@RDT 11 ай бұрын

καλησπέρα Μάρκο My wife is Greek, from Agia Paraskevi east of Athens, we have spent many a holiday at Rafina and Nea Makri. As for your node version, all the info is here: learn.microsoft.com/en-us/sharepoint/dev/spfx/compatibility If you go to the channel you will see there is a newer tutorial for you to follow. Thanks for your support Mark

@Mark-nm9sm 11 ай бұрын

@@RDT Thanks a lot ,hope you enjoy your time when at greece

@prabeshbajracharya99 10 ай бұрын

if i already have the project setup how do i add a new webpart under same project ?

@RDT 10 ай бұрын

At the command prompt at the root of your solution type yo @microsoft/sharepoint And you should have an option to add a Webpart

@beastgaming671 Жыл бұрын

My friend give me a spfx project in zip format then I install npm in that folder But it does not work Anyone tell me if someone give a spfx react zip file how to run that in your local workbench

@RDT Жыл бұрын

Local workbench is no longer supported, please see solution in this video kzfaq.info/get/bejne/hKqTiNiQzpaXeGQ.html

@krishnarajagopal1964 Жыл бұрын

Thanks for this amazing tutorial Adding Following comments as on 20221216 to help future Viewers @12:32 = "supportsThemeVariants": true, is already included in JSON no need to add it.

@RDT Жыл бұрын

Thanks for that. You are correct they added it to later versions by default. Thanks for your support of the channel Krishna!

@ABCD-ABCDEFGH Жыл бұрын

how to stop the terminal without killing?

@RDT Жыл бұрын

The terminal has to be running for you to debug your Webpart

@ABCD-ABCDEFGH Жыл бұрын

@@RDT you pressed a key and it exited the current process, sometimes the process keeps on running and I want to exit that. let's say I ran a gulp build and it is taking forever and I want to exit that. how to do it?

@robsretrostuff Жыл бұрын

@@ABCD-ABCDEFGH CTRL+X should do it

@2711Suvro 2 жыл бұрын

That's weather thing always pops up 😢

@SharePointSolved 16 күн бұрын

When you hover your cursur over it, you can turn it off by right clicking on the taskbar you would find it there.

@helpfull8010 3 ай бұрын

Hello Robert, After performing and setting the environment, when I try to build a project using "gulp build" command, I am getting the below error and not able to resolve it. Could you please help. PS D:\SPFX\Roberts Dev> gulp build Error: Cannot find module 'node:os' Require stack: - D:\SPFX\Roberts Dev ode_modules\@azure\logger\dist\commonjs\log.js - D:\SPFX\Roberts Dev ode_modules\@azure\logger\dist\commonjs\debug.js - D:\SPFX\Roberts Dev ode_modules\@azure\logger\dist\commonjs\index.js - D:\SPFX\Roberts Dev ode_modules\@azure\core-http\dist\index.js - D:\SPFX\Roberts Dev ode_modules\@azure\storage-blob\dist\index.js - D:\SPFX\Roberts Dev ode_modules\@microsoft ush-lib\lib\logic\buildCache\AzureStorageBuildCacheProvider.js - D:\SPFX\Roberts Dev ode_modules\@microsoft ush-lib\lib\api\BuildCacheConfiguration.js - D:\SPFX\Roberts Dev ode_modules\@microsoft ush-lib\lib\cli\actions\UpdateCloudCredentialsAction.js - D:\SPFX\Roberts Dev ode_modules\@microsoft ush-lib\lib\cli\RushCommandLineParser.js - D:\SPFX\Roberts Dev ode_modules\@microsoft ush-lib\lib\api\Rush.js - D:\SPFX\Roberts Dev ode_modules\@microsoft ush-lib\lib\api\RushConfiguration.js - D:\SPFX\Roberts Dev ode_modules\@microsoft ush-lib\lib\index.js - D:\SPFX\Roberts Dev ode_modules\@microsoft\spfx-heft-plugins\lib\plugins\devDeployPlugin\SpDevDeploy.js - D:\SPFX\Roberts Dev ode_modules\@microsoft\spfx-heft-plugins\lib\plugins\devDeployPlugin\DevDeployPlugin.js - D:\SPFX\Roberts Dev ode_modules\@microsoft\spfx-heft-plugins\lib\spfxHeftPlugin.js - D:\SPFX\Roberts Dev ode_modules\@microsoft\spfx-heft-plugins\lib\index.js - D:\SPFX\Roberts Dev ode_modules\@microsoft\sp-build-core-tasks\lib\webpack\ConfigureWebpackTask.js - D:\SPFX\Roberts Dev ode_modules\@microsoft\sp-build-core-tasks\lib\index.js - D:\SPFX\Roberts Dev ode_modules\@microsoft\sp-build-web\lib\index.js - D:\SPFX\Roberts Dev\gulpfile.js - C:\Users\Ismail\AppData\Roaming vm\v14.15.0 ode_modules\gulp ode_modules\gulp-cli\lib\shared equire-or-import.js - C:\Users\Ismail\AppData\Roaming vm\v14.15.0 ode_modules\gulp ode_modules\gulp-cli\lib\versioned\^4.0.0\index.js - C:\Users\Ismail\AppData\Roaming vm\v14.15.0 ode_modules\gulp ode_modules\gulp-cli\index.js - C:\Users\Ismail\AppData\Roaming vm\v14.15.0 ode_modules\gulp\bin\gulp.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15) at Function.Module._load (internal/modules/cjs/loader.js:725:27) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object. (D:\SPFX\Roberts Dev ode_modules\@azure\logger\dist\commonjs\log.js:7:19) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'D:\\SPFX\\Roberts Dev\ ode_modules\\@azure\\logger\\dist\\commonjs\\log.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@azure\\logger\\dist\\commonjs\\debug.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@azure\\logger\\dist\\commonjs\\index.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@azure\\core-http\\dist\\index.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@azure\\storage-blob\\dist\\index.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\ ush-lib\\lib\\logic\\buildCache\\AzureStorageBuildCacheProvider.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\ ush-lib\\lib\\api\\BuildCacheConfiguration.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\ ush-lib\\lib\\cli\\actions\\UpdateCloudCredentialsAction.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\ ush-lib\\lib\\cli\\RushCommandLineParser.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\ ush-lib\\lib\\api\\Rush.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\ ush-lib\\lib\\api\\RushConfiguration.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\ ush-lib\\lib\\index.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\\spfx-heft-plugins\\lib\\plugins\\devDeployPlugin\\DevDeployPlugin.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\\spfx-heft-plugins\\lib\\spfxHeftPlugin.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\\spfx-heft-plugins\\lib\\index.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\\sp-build-core-tasks\\lib\\webpack\\ConfigureWebpackTask.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\\sp-build-core-tasks\\lib\\index.js', 'D:\\SPFX\\Roberts Dev\ ode_modules\\@microsoft\\sp-build-web\\lib\\index.js', 'D:\\SPFX\\Roberts Dev\\gulpfile.js', 'C:\\Users\\Ismail\\AppData\\Roaming\ vm\\v14.15.0\ ode_modules\\gulp\ ode_modules\\gulp-cli\\lib\\shared\ equire-or-import.j s', 'C:\\Users\\Ismail\\AppData\\Roaming\ vm\\v14.15.0\ ode_modules\\gulp\ ode_modules\\gulp-cli\\lib\\versioned\\^4.0.0\\index.js ', 'C:\\Users\\Ismail\\AppData\\Roaming\ vm\\v14.15.0\ ode_modules\\gulp\ ode_modules\\gulp-cli\\index.js', 'C:\\Users\\Ismail\\AppData\\Roaming\ vm\\v14.15.0\ ode_modules\\gulp\\bin\\gulp.js' ] }

@RDT 2 ай бұрын

So node os is not supported in node less than 16. Use node 18 (I use nvm) and latest SharePoint framework 👍

@helpfull8010 2 ай бұрын

Yes Robert, I used latest one, that don't have any issues. And thanks for your reply👍

@NikosTechDowntime Жыл бұрын

havent used gulp in 8 years

@RDT Жыл бұрын

Yes, Microsoft chose it as their task runner. I think it was so it could be expanded for custom tasks, not sure why gulp though. learn.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/integrate-gulp-tasks-in-build-pipeline

@wagnerortiz7484 2 жыл бұрын

hey bro! Sorry to mention it, but you kinda throw code on screen without showing us why. Why did you set the manifest document? What benefit is it gonna bring you or to your page? I might have mentioned but you didnt show. This is just a small comment in or der to help you realize that not everybody is a genius of programming...some of us need more attention...that's why we are missing software developers: lack of teachers. Tks for the work thouth.

@RDT 2 жыл бұрын

Thanks Wagner. The 3 part series was aimed at developers who were already familiar with typescript and SharePoint, so was aimed to be more hands on with code than theoretical. However, I will listen and take your points onboard. I will record a new series soon and take it slower and perhaps explain more “why” than “how”. Please subscribe, and keep supporting us. Rob

@robsretrostuff 2 жыл бұрын

Wagner try this tutorial Let’s go! Learn SPFx Today! | SharePoint Framework for Beginners (SPFx) 2021 E01 kzfaq.info/get/bejne/jd6Ug8Vm27K2g2g.html

@Flaax2k13 5 ай бұрын

Many many many many many many many many many many Errors along the way.. this needs to be updated it is not really usable. Also @pnp/sp/presets/all has no exported member named "sp".

@RDT 5 ай бұрын

Thanks for your kind comment. Yes, new version for 2024 planned

@Flaax2k13 5 ай бұрын

@@RDT Aight, any advice on how to learn the react way of SharePoint ATM? Which docs or tut can we use?

@vinayayinapurapu 2 жыл бұрын

i was able to follow the video except at the end i am getting an issue Module @pnp/sp has no exported member. Got to uninstall current version @pnp/sp and install the version @pnp/sp@2.11.0

@RDT 2 жыл бұрын

What version of node are you running and SharePoint framework (look in package.json)

@vinayayinapurapu 2 жыл бұрын

@@RDT i am using 14.17.5