Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools Adding CSS Loaders

jay chacko
PLUS
jay chacko
Courses Plus Student 525 Points
Posted by jay chacko
jay chacko
Courses Plus Student 525 Points

Bootstrap 4 and React setup using webpack?

Hi i took all the react courses from tree house and i am trying to recreate this bootstrap webapp from bootstrap basic course using react. Tried different boilerplate and i cant seem to get pass even the navbar. I have the top navbar and alignments working , but the drop down does not work( when using smaller screen size drop down sandwich appears) and i am assuming its because jquery part is not working correctly . how would i setup bootsrap 4 and its js and jquery since bootstrap 4 needs its jquery and js file? How would i setup that in webpack

2 Answers

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

In one instance of using a Bootstrap carousel in a webpack packaged app I didn't bother trying to pull in Bootstrap/Jquery through webpack. I loaded them in the page in the conventional manner from CDN before bundle.js.

jay chacko
jay chacko
Courses Plus Student 525 Points
jay chacko
jay chacko
Courses Plus Student 525 Points

i tried that it worked mostly but certain features like dropdown on click was not working , i am assuming it is due to bootstrap jquery and js is not loading correctly

Adam Fields
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Adam Fields
Full Stack JavaScript Techdegree Graduate 37,838 Points
Adam Fields
.a{fill-rule:evenodd;}techdegree seal-36
Adam Fields
Full Stack JavaScript Techdegree Graduate 37,838 Points

You need to use the React Bootstrap library - do not use jQuery with React!

You don't want to manipulate the DOM with jQuery and have it end up different than the virtual DOM. Let React handle updating the DOM.

You can use Bootstrap Grid and styling though - just not components that rely on jQuery (try to use the React Bootstrap ones). You can also use UnCSS to strip the unused Bootstrap classes, which will significantly reduce the size of your bundle.

Lastly, if React isn't the best fit for your project, don't force it. Plenty of big brands still use older tech like AngularJS and jQuery.