SPFx Tutorial Part 5: Add jQuery To Your SPFx Web part & build a jQuery Accordion

In part 5 we will learn how to work with jQuery in the SharePoint Framework web part.
---------------------------------------------------------------------------------------------------------------------------
SharePoint Framework Tutorial Series:

---------------------------------------------------------------------------------------------------------------------------
Follow me on twitter to get Office 365 updates:

Twitter:

Facebook:
Join the Facebook group to collaborate with SharePoint Community
---------------------------------------------------------------------------------------------------------------------------
Like, Share and Subscribe to our channel for more informative and development related videos. Much Love! Keep Learning! :)

[pennyp]

Kudos Sir. Keep up the great work. These videos are like Gold for us.

[rachanabg]

Hi...When you list jquery stuff under external reference.. It will not be part of package. So how the jquery reference will resolve in SharePoint sites or pages

[sujitdaswant]

Nice to see this kind of session on Spfx Good Explanation and demos keep continue.

[ThomasPoth]

Thank you so much for the great content, Maybe you could keep an eye on the audio quality ;)

[aruncheetirala]

Can you do the same thing using React?

[CHAMONIX]

Kudo.. We use JQuery, Bootstrap, css to build a custom SharePoint application on classical site. If we move to SharePoint modern site, can we keep existing JQuery codes? It will be big overhaul if we have to start from scratch.

[pravesh]

Can you share location of the PPT you showed in video?

[krishnachavala]

Can you share slides or snippets used in Videos,

[gtrjtgjr]

Hi thank for good video but you used no framework, is it possible to select react and use jquery there, because i got an error when i right it in inside return, please give some tips

[chitraravishankar]

These Videos are so useful. Please keep continuing on developing applications using ReactJS

[yekularajasekhar]

Good video, can you pls post the SPFx using React videos... Thank you!!

[metkhoo]

Hi, I like your guide and I tried this step by step but get a error:

Error - [webpack] 'dist':
Did not find linked external "jqueryui" for bundle "j-query-web-part"
What could be the problem ?

the main file "JQueryWebPart.ts" has this in it:

import * as $ from 'jquery';
import 'jqueryui';

The config.json has:
"externals": {
"jquery":"node_modules/jquery/dist/jquery.min.js",
"jqueryui":"node_modules/jqueryui/jquery-ui.min.js",
},

Rest of the code as same as you.

I am using SharePoint framework 1.12.0 and node 12.21.0.

These are supported as at the time of writing: 24/03/2021

Any ideas?
Thanks

[saritapanda]

Well explained video .Can I get the slides please.