Why Should You Learn React With Parcel? | The Complete React Course | Ep.07
ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- Source Code: github.com/procodrr/react-cou...
📖 Chapters
00:00 - Introduction
01:18 - Different Bundlers - Vite, Parcel, and Webpack
02:18 - What is Parcel?
02:59 - Setup node project and install React
04:48 - How does 'script.js' file execute?
06:12 - How to export and import data using Export/Import keywords in JavaScript?
08:46 - Why do we need Parcel?
12:41 - How to install Parcel using NPM?
14:22 - How to use Parcel?
15:00 - How does Parcel work?
20:38 - What is Hot Reloading or HMR(Hot Module Replacement)?
22:01 - How does Hot Reloading work in Parcel?
23:15 - Different ways in which Parcel helps!
25:26 - Does Parcel converts our code?
29:44 - How can we import ReactDOM?
35:33 - How Source Maps tricks you by showing node_modules?
41:01 - How to use build command for production ready - minified code?
45:20 - Conclusion
Import and Export in JavaScript: • Import and Export in J...
In this video, we'll talk about different bundlers commonly used in web development, such as Vite, Parcel, and Webpack. We'll start with setting up a Node.js project and installing React, which is a fundamental step for most web applications.
Throughout the video, we'll learn important concepts like exporting and importing data using JavaScript's Export and Import keywords, and we'll discuss the significance of using Parcel for our projects, highlighting its advantages and benefits. To grasp the practical aspects of using Parcel, we'll learn how to install it using NPM with practical examples of how to use it effectively in a project.
One of the key features was Hot Reloading, or Hot Module Replacement (HMR), and how Parcel seamlessly supports it. We'll discuss different ways in which Parcel can assist developers in their workflow. We'll address concerns about code conversion and how Parcel handles this aspect, as well as practical insights into importing ReactDOM. In addition, we'll see Source Maps and how they can sometimes lead to challenges when displaying node_modules.
Towards the end, we'll learn how to use the build command to generate production-ready, minified code, which is crucial for deploying a performant web application.
By the end of the video, you'll get a comprehensive understanding of Parcel and its functionalities to streamline your web development projects.
Have any doubts? Join this Telegram group and ask your question. You can also share the projects that you make in this group.
Telegram Group : t.me/procodrr
Sunday QnA Link: meet.google.com/vbp-hqnm-eiq
Social Media
🌐 Telegram: t.me/procodrr
🌐 Linkedin: / anurag-singh-web-devel...
🌐 Instagram: / procodrr
🌐 Twitter: / anuragsinghbam
🌐 Portfolio: anuragsinghbam.com/
Music by geoffharvey from Pixabay
#react #procodrr #webdevelopment
Man!!!! you're inspiration , I haven't watched this type of granular explanation , thanks for making this , i am sure this takes huge amount of effort, thanks bro.!!
Continuing again today with the series, damn BROTHER........... you are freakin' awesome yaar 🔥
I am getting to understand even the dist and node moodule folder contents 😭
The way you explain concepts and they align are mind blowing, I mean it.
You are by far the best React teacher in the entire youtube and I swear to god I mean it.
May god bless you with all the success in life as you are giving all this for free when no one else is>
The way you explain things before using...... I can't express how happy I am to find your channel.
Love you and your content brother.
Please also teach us Next.js and it's latest features.
Even if you decide to make it a paid course I am willing to pay.
Again, love from Nepal. ❤
You are winning hearts of students out here.
Thank you so much brother for this comment, it made my day.
Comments like this keep me pushing to make more and more videos.
Keep learning and sharing 😊
congrats for 1k subs, your contents are very superior and regular, I really hope you will soon reach even bigger mile stone.
Thanks bro so much bro, it means a lot. Keep Learning, sharing, and supporting ❤️
Sir npx parcel index.html not working
Thanks bro, simply the best React course on TH-cam.
Oh wow! I am really lucky to receive heart from you! I absolutely love your content!
Parcel index.html specified module not be found please sir help for this error
this is helpful ❤
Congratulations for 1k subscribers 🎉🥳🥳
Didn't know that we can create react app like this.
Thanks bro 😊
I'm glad you found something new.
sir ek baar file close karne ke baad jab mene firse update kiya console me kuch to wo update hi nhi ho rha h
Can we do npx i for dependencies?
npx parcel index.html is not working sir plz bta de kia issue hoga
you got a subscriber! One question. why didn't you used vite? today parcel or vite?
Nextjs playlist kab aayegi sir
CORRECTION ! 11:57 sir console.log(React) print all the properties available in react on terminal if you do pkg.json file type module
while installing parcel every time i get this error A complete log of this run can be found i! please can anyone suggest me how to resolve this, i have already tried various ways but it did not work
depth❤
sir i am using vite previously can u plz make a comparison video on vite vs parcel vs webpack?
Parcel ham kewal ye samajhne ke liye use kar rahe hain ki kaise React mein saari files aapas mein connected hoti hain.
Aage chalkar ham bhi Vite hi use karenge.
@@procodrr ok sir got it thanks 😀
Sir hmko ek doubt hai ki, bahut log vite ka use karke react app create karte hai and bahut log angular ka,
Vite ko kaise pata hai ki usko kis chiz ka file install karna hai
Project create karne se pahle Vite poochhta hai ki kaun sa app create karna hai. Aur tumhe select karna hota hai. Jo option select karoge wo app Vite bana dega.
Aur Vite mein Angular ka option nahi hota hai.
sir kindly create next js series
Hi sir I am not able to import .pdf doc in parcel ........ like we import .png or .jpg files
could you please give a solution for it ...
Not only Parcel, in any React app you can't import pdf file like you import images.
If you want to work with pdf file then you'll have to use 3rd party library.
www.npmjs.com/package/react-pdf
You can try this library.
App hi iska clone tutorial lee aoo..hamare bas kanahi hai abhi to..
practical done
Awesome 👍
21:30 🤣
Sir console me error de rha hai "module is not defined" if (module.hot) {
module.hot.accept();
} is code ko likhne ke baad Sir please reply dena
Solve ho gyi problem
hello sir, baaqi sab kuch tek chal raha hai par 'npx parcel index.html' kaaam nahi kr raha ... error de raha hai. bohot try kiya par chall nahi raha ..... plz help.
Kya error aaraha hai.
@@procodrr PS D:\SYSTEM FILE\vsCODE work files\React JS\4. React With Parcel> npx parcel .\index.html
Error: The specified module could not be found.
\\?\D:\SYSTEM FILE\vsCODE work files\React JS\4. React With Parcel
ode_modules\@parcel\source-map\parcel_sourcemap_node\artifacts\inde
x.win32-x64-msvc.node
at Module._extensions..node (node:internal/modules/cjs/loader:1473:18)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at require (node:internal/modules/helpers:176:18)
at Object. (D:\SYSTEM FILE\vsCODE work files\React JS\4. React With Parcel
ode_modules\@parcel\source-map\parcel_source
map_node\index.js:15:18)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12) {
code: 'ERR_DLOPEN_FAILED'
@@procodrr PS D:\SYSTEM FILE\vsCODE work files\React JS\4. React With Parcel> npx parcel .\index.html
Error: The specified module could not be found.
\\?\D:\SYSTEM FILE\vsCODE work files\React JS\4. React With Parcel
ode_modules\@parcel\source-map\parcel_sourcemap_node\artifacts\inde
x.win32-x64-msvc.node
at Module._extensions..node (node:internal/modules/cjs/loader:1473:18)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at require (node:internal/modules/helpers:176:18)
at Object. (D:\SYSTEM FILE\vsCODE work files\React JS\4. React With Parcel
ode_modules\@parcel\source-map\parcel_source
map_node\index.js:15:18)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12) {
code: 'ERR_DLOPEN_FAILED'
Mera bhi ye kaam nahi kr rha bro Mera error toh nahi de raha but koi new server bhi start nahi kr rha
sir after parcel install (Error: Expected content key de1e4a02ec63c4eb to exist) yea error a raha hai
Parcel cache wala folder delete karke phirse start karo
@@procodrr its working thank u sir
sir vite kyu nhi use kiya woh bhi easy hai
Webpack doesnt generate this much of unncessary code.
Day2 episode 7
Bhaiya Aapne bhi Akshay sir ka course join Kiya tha kya ?
Yes 😃
@@procodrr Great...
Are you talking about Akshay Saini
@@prashlovessamosa yes
Sir next js bhi lekr aayiye na pls 😢 mera backend complete hene wala h to me next js bhi start krunga pls sir ab to next js series lekr aayiye 😊 thoda fastly 😊 and thank you so much sir
bro can you suggest some channels for backend
@@UmeshChandra-r5y yaah
you can check it
First- thapa technical
Second -coder dost
Third -sheriyansh coding school
Fourth - if you not a fresher then you check it also । chai aur code । for back-end
Ab ap check kr ke apne according deside kr skte ho
All these are Hindi medium TH-cam channels
chalawa misconception bro
Confusion karte ho tum sirf yr topic se hatkar
thanks bro -------------------------------------------------------------------------------------------------------------------------->