React (Babel) and Sass webpack Tutorial: Extract CSS Into Its Own Separate File

Рет қаралды 28,618

Күн бұрын

Join my premium 2024 bootcamp here learnwebcode.teachable.com/p/...
Let's learn how to setup Babel, React, JSX, CSS, Sass and more with webpack!
0:00 Intro
1:27 Getting Started
6:19 Loaders in webpack
15:26 CSS
22:55 Sass
26:55 React Math Game
31:11 Separate Component Files
33:41 Optimizing For Production
37:44 Extract CSS Into Its Own File
42:49 Hash / Cache-Busting String
52:04 @babel/preset-env
57:01 Emmet in JSX in VSCode
59:59 Outro
Starter Files GitHub: github.com/LearnWebCode/youtu...
CodePen Copy & Paste Reference: codepen.io/learnwebcode/pen/E...
Finished Product GitHub: github.com/LearnWebCode/react...
Playlist for this full series: • Brad's Bootcamp - Free...
Follow me for updates on new episodes:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode

Пікірлер: 93

@saikiransk497 3 жыл бұрын

Thanks for the awesome tutorial Brad. Great work. I wanted to add 2 points here, from webpack 5 we don't need clean-webpack-plugin. Adding clean: true to the output config will be enough and webpack manifest plugin should be a named import. const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

@adiemar3974 2 жыл бұрын

im pretty exited about this one and just finished his previous course.

@genesesrevelation89 3 жыл бұрын

The best tutorial in ReactJS for starters.

@foupax 3 жыл бұрын

Every KZfaq Dev Student who makes it to this new series will make a great leap to his achievements! 👍💖

@KayoleKnight 3 жыл бұрын

i found this when i really needed this combination...thank you so much bro..i subscribed

@techbd2477 3 жыл бұрын

Thanks Brad, all the time when I play your video I pushed the video on 5 or 6 second and play it's again to enjoy your "Brand Of Ambassador" 😊

@nitesh7546 2 жыл бұрын

The best webpack tutorial out there..

@danielangulo1900 3 жыл бұрын

Great lesson and was able to deploy to netlify. Thank you ;)

@tusharghildiyal6814 3 жыл бұрын

you are the best web development teacher on the internet. period !!

@shahriarparvezshuvo4760 3 жыл бұрын

It's a Fresh Morning Learning materials for me. Good to see you both. 😍😍😍

@playstore-so2xm 3 жыл бұрын

You are the best!! Keep on coming with these amazing things👍👍!! Thanks a lot!!😊😊

@filipm5509 3 жыл бұрын

I watch all and every ad on your videos. I want you to know that.

@LearnWebCode 3 жыл бұрын

Thank you so much!

@bertugmete2855 2 жыл бұрын

It was great ! Thank you so much Brad. A video on performance optimization would be nice :)

@sanata2003 3 жыл бұрын

I downloaded the code from github and when I tried to npm install sass sass-loader an error appeared, because fsevents it is not supported on Linux. I searched the solution and after deleting the package-lock.json I could run npm install again and then the problem was solved. Cool!

@omphaluskua3249 2 жыл бұрын

Very very nice and neat, clean and clear. CHEERS!

@jianxie2402 3 жыл бұрын

I really enjoyed your video. Thanks a lot!

@CodingAfterThirty 3 жыл бұрын

Hey, just want to say thank you for what you do. BTW, I took tour React course it was great. Now going over your JavaScript course where you combine JavaScript development front and backend together. Loving every part of it. From all instructors, you are still the best at making videos that help beginners get started with learning web dev.

@sudharsanthiyagarajan2596 3 жыл бұрын

Your channel is an hidden gem🥰

@christopherpink842 2 жыл бұрын

THANK YOU VERY MUCH!!!!!!!!! I wanted to learn how to use react without create-react-app

@shivamkumarjha3302 3 жыл бұрын

Born to teach. As always excellent explanation.

@akactivekarishmagroupbhila5380 3 жыл бұрын

I saw your wordpress related course in udemy its really owsm...thanks because of you wordpress development is very easy for me.

@_rachid 3 жыл бұрын

Thank you .. You demystified webpack for me !

@CristianeDamacena 3 жыл бұрын

Amazing! Thank you!

@nguyendat4275 3 жыл бұрын

best teacher ever seen!

@MaxTheFireCat 3 жыл бұрын

i almost fainted when you said this was the last video but then you said on this chapter so I'm all good

@shnam928 2 жыл бұрын

The best tutorial! It'd be great if you could add express to this project, so that we could see the folder structure, connection of front end and backend and also the functionality of webpack in a fullstack project.

@LearnWebCode 2 жыл бұрын

That is a great idea for a video! Just added it to my notes / video topic list.

@hotvineofficial7242 3 жыл бұрын

This lesson is best that i watched ))

@wshraim 3 жыл бұрын

brad you're amazing

@uykerrykaberga 2 жыл бұрын

thanks, really helped

@chaosevolved9334 Жыл бұрын

man u are so awesome u explain stuff like a king thx so much bro i wish that u make a course on mongoDB

@chlopgotuje 3 жыл бұрын

Brad nice to see Y again

@weizhang2389 3 жыл бұрын

First! Love this tutorial series!

@arfan8544 3 жыл бұрын

Thank you very much.

@bhavleensingh6929 3 жыл бұрын

brad bhai h apna.

@lirenguo7650 3 жыл бұрын

Hello Brad, I bought and finished your React for the Rest of Us course on Udemy and loved it! I'd like to continue learning more in-depth about React to create web applications. Are there any resources/course you can point me to? Thanks a lot!

@TheCodebookInc 3 жыл бұрын

Needed something for the vue.js too, with lazy loading, facing issues with my project especially with router. It would be nice to add that too

@viraj_singh 3 жыл бұрын

I would have paid for this course happily.

@jordanlewis3530 3 жыл бұрын

Heads up to anyone watching this after me - if you haven't needed to already, you will need to install webpack@5.0.0 in order for SASS to work.

@msvmanikantasrivishnu7788 3 жыл бұрын

Thank you

@elmlisa2124 3 жыл бұрын

love it ,

@rangabharath4253 3 жыл бұрын

awesome

@ahmedboutaraa8771 3 жыл бұрын

I am enjoying the bootcamp as much as your pussycat is enjoying the plant

@mohamedawde9508 3 жыл бұрын

Thumb up!

@regilearn2138 3 жыл бұрын

Hi really great video,and If you can please let me know,how to add material ui and styled component(both together is must) to this setup, appreciate your help

@donyu421 3 жыл бұрын

I'm a big fan of your teaching since WP. Thank you for another valuable lesson.

@BenDover-ii4hz 3 жыл бұрын

Really liked this tutorial Brad, thank you! A related question... suppose we're using a CSS "framework" such as Tailwind/Bootstrap/etc, along with our custom SCSS, when the main css is compiled, will it only pull the css used in our app or will it pull everything (asking for optimization purpose). If possible, can you do a short tutorial on this and how to optimally implement svg/ico/icons along with pictures (formats/sizes & "lazy loading?"), minifying css/js files, and etc? Would really like to learn some optimization tricks for creating best-practices habits. Thanks again for these well explained tutorials.

@LearnWebCode 3 жыл бұрын

Glad it was helpful, and thanks for the feedback! Check out the "purify-css" package on GitHub / NPM for filtering out unused CSS. I'll add SVG and responsive images to the list of possible extra credit videos.

@BenDover-ii4hz 3 жыл бұрын

@@LearnWebCode Awesome! Will tinker with purify-css pkg. One last thing, in one of those possible extra credit videos, if you have time, please add a tutorial on randomizing CSS Class names when publishing on production env (similar to how NYT's does it - made it difficult to webscrape the site for an old learning-project. Would be cool to learn how that's done). Thank you for a quick reply. Cheers

@beckyb9215 3 жыл бұрын

I also love SASS :)

@DRocksRecords 3 жыл бұрын

Its nice that you go full custom webpack. Thanks for the tutorial. Do you recommend Create React App or prefer to avoid it?

@LearnWebCode 3 жыл бұрын

Create-React-App is great, but it's not usually used in most of the real world projects I've been on. Usually a project will have some sort of workflow / automation needs outside of just React, or you'll want to integrate with another system (Laravel, WordPress, any CMS / framework etc...) so you might as well be able to implement React yourself. It's just a package like any other from npm, it just needs the JSX transpiling. Just my opinion, not trying to pretend it's a fact, I just don't like how "Create React App" hides everything away from the end-user which can make things feel "mysterious" or "magical" and then you're not sure how to use React without it.

@DRocksRecords 3 жыл бұрын

@@LearnWebCode Thanks for the answer. I understand and it makes sense to me also. For example when I needed to add imageOptimization to my workflow I had the choice to either eject from the CRA template or use Gulp. I ended up using gulp cause it was simpler than trying to handle all their logic. Right now I'm trying Snowpack with the React and webpack templates...

@dobooro 3 жыл бұрын

@@LearnWebCode I've been curious about this. Thanks for sharing!

@vjcpa 3 жыл бұрын

Brad, thanks for the video. I have a couple questions about autoprefixing for the css file generated and js importing tree shaking. It seems all the million plugins you installed don't do it. Anyway to see (maybe an addon video) how it can be achieved?

@binukumar6270 3 жыл бұрын

❤️❤️❤️

@emmanouil1453 3 жыл бұрын

Hi Brad. Are you planning any course in Udemy, on how to use React to develop Android or iOS applications?

@MaxTheFireCat 3 жыл бұрын

where are you brad? I'm really waiting forward for the next episodes.

@LearnWebCode 3 жыл бұрын

I'm back 🙂 There will be a new video in the morning (Pacific).

@sanata2003 3 жыл бұрын

In order to run webpack-manifest-plugin I wrote in the webpack-config.js const {WebpackManifestPlugin} = require("webpack-manifest-plugin") and works now. Also, the manifest.json file only have the main.css : automainxxxxxx.css and main.js: automyBundle.xxxxxz.js references. No reference to the index.html file.

@tanjirmahabub5105 3 жыл бұрын

Hi Brad, Please make a crash course video on next.js

@streamx2 3 жыл бұрын

I was first and Brad can confirm this. I just got excited and forgot to comment. Haha fighting over who was first

@LearnWebCode 3 жыл бұрын

Haha, it's true. You were so early it was a comment on another video about this video.

@streamx2 3 жыл бұрын

@@LearnWebCode can you please do a saperate video on mongoose. I know you will cover databases soon do maybe you could cover it then. Everytime i watch a video on it it confuses me. Mongo inself is easy

@romimaximus 2 жыл бұрын

Great awesome tutorial !! ... and well i have a question ? let´s say instead just index.html, i would have 4 more "html" pages , and each one "onload", calls a diferent script ? how would i tell webpack to get these pages into the bundle, and in "production mode", how would i call these scripts ? cause now they are all in one whole "bundle" right ?.... instead of diferent scripts like before "build" ? and that's making my brain go crazy !! lol..

@SajidAliSoftwareEngineer 3 жыл бұрын

one simple thing I to want to know please. what short key or app you are using for crosshair cursor video time: 6:10 or 6:26 or at 7:38

@emmanouil1453 3 жыл бұрын

Thanks a lot Brad. I wonder why the myBundle.js is so big(~128kb) after npm run build, for just an Hello React component? Are the react and react-dom libaries we import, that make this size?

@LearnWebCode 3 жыл бұрын

Good question, and yes, that's one of the biggest criticisms of React; that it's a big download for visitors. I think it's worth it for web apps / really interactive experiences, but for super simple websites you can make a compelling argument to skip React in favor of a lightweight alternative. For example, "Preact" claims to only be 3kb, but I personally haven't tried it. For better or worse, React is very in-demand in terms of job descriptions which is why I favor it.

@emmanouil1453 3 жыл бұрын

@@LearnWebCode Thanls for the info Brad.

@73dines 3 жыл бұрын

webpack-manifest-plugin Author message: no longer actively maintained

@DailyIntern 3 жыл бұрын

May i please have one desktop at the back?

@JimKernix 2 жыл бұрын

I just tried this again and when I pasted localhose:8080 in the address bar it wouldn't load and I got the following error in the console: crbug/1173575, non-JS module files deprecated. Anyone else get that?

@alekm4185 2 жыл бұрын

Hey Brad, how does this work with WordPress?

@tea42 2 жыл бұрын

The last part(corejs and regenerator) is bit complicated. I understand async/await is not able to be converted without core-js and regenerator plugins. But why he wrapped both settings in an array and set the parameter like useBuiltins: 'usage', corejs: 3, targets: 'defaults', he does not explain these in detail. I want to know how he came up with this solution. Is it documented somewhere? Then I googled, some similar solutions came up. I just swallowed it blindly and decided to think that's the way it goes for now.

@neelabhdutta6691 3 жыл бұрын

It was a great start for me, but I faced a issue, it doesnt work with React Suspense, lazy.. could you help me with the changes required in config to make it work

@LearnWebCode 3 жыл бұрын

Hi, when installing 'react' and 'react-dom' from NPM did you include the @experimental version like this 'npm install react@experimental react-dom@experimental' ? Or does it still not work? I didn't test any of the upcoming concurrent features yet, but will once they're in the "official" version of React.

@LearnWebCode 3 жыл бұрын

Hi, I just tested this project code with Suspense and lazy and it worked perfectly. However, "Suspense for data fetching" instead of lazy loading components isn't officially in React yet. I used this to import a component in a lazy fashion in my main component: const Hey = React.lazy(() => import("./components/Hey")) Then down in my JSX for the main component: setLoadLazyComponent(true)}>Load the lazy loaded component {loadLazyComponent && ( )} I also had this piece of state up near the top of my main component, just so the lazy loading didn't actually happen until you click the button as a test: const [loadLazyComponent, setLoadLazyComponent] = useState(false)

@akhazamalolifeinsweden1603 3 жыл бұрын

Hi, I added devtool: "eval-cheap-source-map", in webpack.config.js but it still keeps warning DevTools failed to load SourceMap: Could not load content for..... is there anybody running the same issue?

@LearnWebCode 3 жыл бұрын

Did you stop and restart the task in the command-line? You can also try some of these other values, which might be slower, but maybe not by much, and will resolve the warning message: webpack.js.org/configuration/devtool/

@akhazamalolifeinsweden1603 3 жыл бұрын

@@LearnWebCode Hi Brad, Yes, I did stop and restart it. I also got the same issue from React for the rest of us course as well.

@TheRealJuggaloJoel 2 жыл бұрын

npm ERR! Missing script: "dev" ... anytime I run 'npm run dev'. nothing happens

@monirulislam8267 3 жыл бұрын

Hi Brad Thanks for the great tuts... By the way the following code is not working... presets: [["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3, "targets": "defaults" }], "@babel/preset-react"] with webpack5. Also devtool: "eval-cheap-source-map" is not working with webpack 5.10.0

@jagadeeshkumar2091 3 жыл бұрын

It's the same case for me too, I'm avoiding those parts for now.

@RohitSharma-ey3cz 3 жыл бұрын

Hi Brad, I have completed wordpress course on udemy..... Will you make laravel tutorials series? It's always tough for me to understand laravel concepts. Everybody knows if you explain the things, it will be lot easier... I am waiting for laravel course... Please...please....please

@LearnWebCode 3 жыл бұрын

If I cover Laravel it would need to be a basic introduction to just the essentials. The framework has so many pieces to it... I feel like a comprehensive course would need to be 70 hours long 😂

@RohitSharma-ey3cz 3 жыл бұрын

@@LearnWebCode I know you have to devote a lot of time for it, but believe me it will really help many students like me... I hope you will.

@lovelife-xm2xj 2 жыл бұрын

Pls upload new videos...reg, decoding web sites scripts

@luffyd2780 3 жыл бұрын

react-scripts or webpack !?

@LearnWebCode 3 жыл бұрын

Create-React-App is great, but I don't like recommending it to beginners because it makes React seem magical or mysterious. I think Create-React-App is one of the biggest reasons you see so many people confused on how they'd use React with their Backend / CMS of choice. I think with a more hands-on approach of configuring webpack it's clear what needs to happen and how you could use the resulting file anywhere you need to etc...

@marble_wraith 3 жыл бұрын

Webpack's a joke, ridiculously over complex. +90% of the time people will only need something simple like rollup or even just native npm scripts. Other than that pretty good video.

@LearnWebCode 3 жыл бұрын

Parcel is another great simple option. I'll have to try Rollup.