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

Подписаться 21 тыс.

Просмотров 41 тыс.

50% 1

#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.buymeacoff...
📧 📫 Join us on our developer journey! Sign up to our email newsletter:
robertsdevtalk...
🐦 Follow us on Twitter:
/ robertsdevtalk
🎶 Music by Epidemic Sound:
www.epidemicso...
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 😊

Опубликовано:

8 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 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

@RDT 2 года назад

Episode 2 is scheduled for October 11th 2021

@newabyuser 2 года назад

Can't wait this is awesome

@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

@anidaniel5553 4 месяца назад

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

@RDT 4 месяца назад

When you run yo

@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

@bhaidar 2 года назад

Can you repeat the same series on Vuejs? Thanks

@RDT 2 года назад

This video may help ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-iH6dzlxZ1nw.html Give me some time and I will do a vue specific episode

@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 👍

@prabeshbajracharya99 Год назад

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

@RDT Год назад

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

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

@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

@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

@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!

@2711Suvro 2 года назад

That's weather thing always pops up 😢

@SharePointSolved 2 месяца назад

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

@Mark-nm9sm Год назад

Καλησπερα απο Ελλαδα 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 Год назад

καλησπέρα Μάρκο 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 Год назад

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

@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) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-L6KdLjONndM.html

@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

@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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-NDcUu_i03H0.html

@helpfull8010 5 месяцев назад

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 5 месяцев назад

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

@helpfull8010 5 месяцев назад

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

@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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WxdPb5vLRS4.html

@Flaax2k13 8 месяцев назад

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 7 месяцев назад

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

@Flaax2k13 7 месяцев назад

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

@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