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

#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"

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 🍺 🍕)

📧 📫 Join us on our developer journey! Sign up to our email newsletter:

🐦 Follow us on Twitter:

🎶 Music by Epidemic Sound:

Our gear - click through to support our channel! :)

Camera (Canon M50)

Camera mic (RODE VideoMic Pro)

Camera tripod (Manfrotto Compact tripod):

Voiceover Mic (Blue Yeti)

Chris's dev mouse for PC (Logitech MX Master 3)

Chris's dev keyboard for PC (Logitech MX Keys)

Rob's dev keyboard for Mac (Apple Magic Keyboard)

Rob's dev mouse for Mac (Apple Magic Mouse)

Icons in this video kindly provided by FlatIcon from Freepik

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 😊

[poonamw]

Thanks for this step by step waiting for part 2 & 3 🤗

[anujupadhyay]

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

[bhaidar]

Can you repeat the same series on Vuejs? Thanks

[aytech]

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

[anidaniel]

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

[RDT]

Episode 2 is scheduled for October 11th 2021

[csv]

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?

[Mark-nmsm]

Καλησπερα απο Ελλαδα
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 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0 cuz I am getting an error while trying to follow your steps.
Or is it that your video is now unfortunately outdated?

[prabeshbajracharya]

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

[mariavitoriaaugusto]

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??

[roomMMTest]

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

[ABCD-ABCDEFGH]

how to stop the terminal without killing?

[Suvro]

That's weather thing always pops up 😢

[iiiiiericiiiii]

Hi, Rob. Thank you for all the effort in making these instructions!

I'm getting the following error:

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

[markcole]

1) npm uninstall @pnp/sp
Fine series, but the cloud moves quickly.

[helpfull]

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\gulpfile.js
-
-
-
-
at
at Function.Module._load
at Module.require
at require
at Module._compile
at Object.Module._extensions..js
at Module.load
at Function.Module._load
at Module.require {
code: 'MODULE_NOT_FOUND',
requireStack: [
'D:\\SPFX\\Roberts Dev\\gulpfile.js',

s',
', 'C:\\Users\\Ismail\\AppData\\Roaming\\nvm\\v14.15.0\\node_modules\\gulp\\node_modules\\gulp-cli\\index.js',

]
}

[beastgaming]

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

[wagnerortiz]

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.

[Flaaxk]

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

[krishnarajagopal]

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.