React (Babel) and Sass webpack Tutorial: Extract CSS Into Its Own Separate File
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- 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
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');
im pretty exited about this one and just finished his previous course.
The best tutorial in ReactJS for starters.
The best webpack tutorial out there..
Every TH-cam Dev Student who makes it to this new series will make a great leap to his achievements! 👍💖
you are the best web development teacher on the internet. period !!
I watch all and every ad on your videos. I want you to know that.
Thank you so much!
THANK YOU VERY MUCH!!!!!!!!! I wanted to learn how to use react without create-react-app
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" 😊
i found this when i really needed this combination...thank you so much bro..i subscribed
Great lesson and was able to deploy to netlify. Thank you ;)
Your channel is an hidden gem🥰
It's a Fresh Morning Learning materials for me. Good to see you both. 😍😍😍
You are the best!! Keep on coming with these amazing things👍👍!! Thanks a lot!!😊😊
i almost fainted when you said this was the last video but then you said on this chapter so I'm all good
Very very nice and neat, clean and clear. CHEERS!
Born to teach. As always excellent explanation.
It was great ! Thank you so much Brad. A video on performance optimization would be nice :)
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!
I really enjoyed your video. Thanks a lot!
best teacher ever seen!
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.
Thank you .. You demystified webpack for me !
brad bhai h apna.
I saw your wordpress related course in udemy its really owsm...thanks because of you wordpress development is very easy for me.
thanks, really helped
brad you're amazing
This lesson is best that i watched ))
man u are so awesome u explain stuff like a king thx so much bro i wish that u make a course on mongoDB
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.
That is a great idea for a video! Just added it to my notes / video topic list.
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.
Amazing! Thank you!
I would have paid for this course happily.
Brad nice to see Y again
Thank you very much.
Thank you
I also love SASS :)
love it ,
First! Love this tutorial series!
awesome
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!
I am enjoying the bootcamp as much as your pussycat is enjoying the plant
I was first and Brad can confirm this. I just got excited and forgot to comment. Haha fighting over who was first
Haha, it's true. You were so early it was a comment on another video about this video.
@@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
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
Thumb up!
where are you brad? I'm really waiting forward for the next episodes.
I'm back 🙂 There will be a new video in the morning (Pacific).
I'm a big fan of your teaching since WP. Thank you for another valuable lesson.
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
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.
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.
@@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
Its nice that you go full custom webpack. Thanks for the tutorial. Do you recommend Create React App or prefer to avoid it?
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.
@@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...
@@LearnWebCode I've been curious about this. Thanks for sharing!
❤️❤️❤️
Hi Brad, Please make a crash course video on next.js
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?
Hi Brad. Are you planning any course in Udemy, on how to use React to develop Android or iOS applications?
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.
webpack-manifest-plugin
Author message:
no longer actively maintained
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..
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
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?
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.
@@LearnWebCode Thanls for the info Brad.
Hey Brad, how does this work with WordPress?
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.
May i please have one desktop at the back?
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?
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
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.
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)
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
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 😂
@@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.
npm ERR! Missing script: "dev"
...
anytime I run 'npm run dev'. nothing happens
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
It's the same case for me too, I'm avoiding those parts for now.
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?
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/
@@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.
Pls upload new videos...reg, decoding web sites scripts
react-scripts or webpack !?
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...
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.
Parcel is another great simple option. I'll have to try Rollup.