This is the npm command used to install dependencies. Thank you very much Brad and take care. npm i -D parcel-bundler sass @babel/core @babel/plugin-transform-runtime @babel/runtime-corejs2
I've been waiting for something like this. Thank you so much! You spoke about the possibility of implementing things like "Reusable Components, JSX, Parent Classes, Lifecycle Methods" ....etc. I'd love to see a continuation of this project where you showcase that, or even build a custom framework. Thanks brad for everything you do!
I've watched many of your videos and it's been such a breath of fresh air. Your explanations have such clarity it's a real pleasure to watch. I also enjoy the topics you cover, typically exactly what I'm looking for and I'm sure I'm not the minority. Many thanks for these tutorials, it's very helpful.
Watching this video just made me go to Udemy and buy your HTML/CSS, Bootstrap, and vanilla JS projects videos. I have experience in web development, but I still feel like I can use your videos for a good reference. Keep up the good work, and thanks for giving your time.
4 года назад+1
Love all your vanilla courses. Vanilla is a way to help me overcome imposter syndrome.
the best next idea for the video is explaining how to create npm package and publish them to npmjs either building a React Component module or just simple utils module with TSDX created by Jared Palmer :)
I built a very basic react module for npm purely for leaning and testing. here it is www.npmjs.com/package/@codedevbrad/react_movement its got like 800 downloads which I'm surprised as I thought it was stupid. here are the links to help ( which I used): - www.freecodecamp.org/news/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78/ - medium.com/recraftrelic/building-a-react-component-as-a-npm-module-18308d4ccde9
Workflow skills is equally as important as coding skills and equally as necessary. I admit to some deficiencies with the former. Thanks for this video!
Nobody wants to learn regex...we just have to :) I would say regex is the biggest thing I have to look up no matter how much I study lol. Yeah I can do a crash course. I will just forget it all the next day
Hi Brad! hope your well. thanks so much for the great content, I always love your content. By the way your so popular at my school, our lecturers usually direct students doing web development course units to this channel, it's amazing. People love your content so much. I've learnt so much from you personally and am so grateful. I'm kindly requesting you to make a video on how to implement a WYSIWYG editor as a content creator on a Blogging web project and how to save that data to a database and retrieve it back to the front end using node. I would be so grateful if you do so. thanks a lot.
As far as I know you dont need to install Babel since it is included in Parcel by default. I mean for the standard use of Babel. Only art Sass needs to be installed.
Hey Brad, at 16:53 what about to modify all the components, made them returning promises? So in the app.js you can use Promise.all? Yea, mine is just a side comment, non related to the content of the video ... Thank you brand u r awesome!
1. Thank U for your great content 2. Please explain why did U need to bring babel here? a. Doesn't it comes automaticly with Parcel? if not, how do you wire it together since you didnt use any parcel.config file here...
Hi Brad! This video was great thank you!! At what point would you say use a framework (vue) vs I can just use vanilla JavaScript (which I’m pretty comfortable with) ?
I ran into problems implementing this code. I found out later I had to add npm install --save @babel/polyfill then, I had to include import "@babel/polyfill"; to my app.js file right below the import User from './components/User'; line. I hope this helps out other people who have the same issue. Cheers
Awesome tutorial! thank you very much, may I ask what is the reason of having a public folder that hosts the html files and another src folder for the css and js files? why not having all in the src instead? is it due to the way Parceljs works or is it due to convention?
minor update: while using d3 I was having a "regeneratorRuntime is not defined" error until I switched to parcel2 (the only differences for this setup were that ---out-dir becomes ---dist-dir and "main" becomes "default")
Thanks Brad! This video helped me to clarify a lot how to structure projects with Parcel, it now makes sense! ....I just have a question, if you have another html page, such as About.html, do I have to include in this page the same script with App.js? or have a new file js for About page?
Hi Traversy Media, Ive just recently found your channel and I must admit you've helped me throughout your learning progress more than any collegues in the last two years. I'd like some specific advice on a topic you've not covered yet. The company I work for developes apps by using SAP, hence SAP UI5 and Fiori. I've been working a lot on fundamentals like JS and Node, but SAP is pretty complicated and I don't know which learning steps to prioritize. I dont know if youre familiar with these technologies, but any advice would be very helpful. Thanks!!
Thank you Traversy, great vids. I'm new to programming and would like to build a saas on vanilla js. Why bundling and using this design and not having many .js files linked to your several html files?
For those working on Windows (with some updates to dependencies): Installing required stuff npm install --save-dev parcel sass @babel/core @babel/plugin-transform-runtime @babel/runtime-corejs3 rimraf .babelrc { "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 3, "regenerator": true } ] ] } Scripts in package.json as in the author repository and instead of "main" we should put "default": "default" : "index.js", "scripts": { "dev": "npm run clean && parcel public\\index.html --dist-dir development -p 3000", "build": "rimraf .\\dist && parcel build public\\*.html --dist-dir dist --public-url .\\", "clean": "rimraf .\\development && rimraf .\\.parcel-cache" }, Took me a while to figure everything out but it works for me
Nevermind. Figured it out. I had to use template elements instead of strings, so that I could add event listeners to them before I appended them to another element.
Can someone explain me why bundling and all sort of this stuff is so essential for JS development? Wrinting pure ES6 modules and importing them where it needed is just works in the browser without pre/post-processing. For deployment it seems enough to minify the files.
Do you use this stack for your projects ? Or you prefer to use vue.js or others frameworks ? P.s Do You include The scss file inside the js file because it is the entry point of Babel and sass?
Thank you, fantastic tutorial. Is there a way to integrate Apexcharts in there using functions and render to one dev similar to React? Also, I would like a tutorial diving A bit more into other options than template as you mentioned in the tutorial. Appreciate your efforts and thanks in advance for your help, hints, insights and suggestions.
I think you should move on the new topic, which is CI/CD tool like Ansible, Jenkin, Gitlab runner etc... you can create a new series like “learn xyz with me”
It's still a pretty solid course since JS doesn't evolve as quickly as the rest of the web dev landscape, and it's nice to know the old way of doing things so you don't get confused if you ever have to work with an older code-base.
Please what is your recommendation? i am done with front and back end using react and node .... i wanted starting a project that will strengthen my learning further... i am building a social media site, i need your recommendation or step guide.
Hi guys! I want to ask you a guestion guys. But maybe this will be a out of topic question... So where is the best place to put a validation data? Is it in frontend (bootstrap, react etc) or in a backend (express node) or in a database itself (mongodb with mongoose)
Repo doesn't update when removing any of the original components from app.js. Only to get it to work is to restart a server with each change. Even page reload doesn't have any effect. When "Header" and "User" are deleted, a page is still generating new cards. Is this standard behaviour of this boilerplate?
hello Brad, I would like to ask you about babel in IE11. I have a project standalone without node js and I don't have package.json file, I use the latest version babel but in my IE11 browser I receive an error that is Assigment to const. Could you answer my question please, thank you
The repo has been updated to handle multiple components thanks to jeferson-sb :)
Awesome!
But if I have different pages/views.. how could I create different component / js for each page?
This is the npm command used to install dependencies. Thank you very much Brad and take care.
npm i -D parcel-bundler sass @babel/core @babel/plugin-transform-runtime @babel/runtime-corejs2
just wanted to say: "Thank you!" - you've helped me tremendously over the last year. Many props and many thanks to you for what you do.
I've been waiting for something like this. Thank you so much! You spoke about the possibility of implementing things like "Reusable Components, JSX, Parent Classes, Lifecycle Methods" ....etc. I'd love to see a continuation of this project where you showcase that, or even build a custom framework. Thanks brad for everything you do!
I second that
I've watched many of your videos and it's been such a breath of fresh air. Your explanations have such clarity it's a real pleasure to watch. I also enjoy the topics you cover, typically exactly what I'm looking for and I'm sure I'm not the minority. Many thanks for these tutorials, it's very helpful.
Brad, dude... THIS IS LIKE CHRISTMAS, thank you so much.
Watching this video just made me go to Udemy and buy your HTML/CSS, Bootstrap, and vanilla JS projects videos. I have experience in web development, but I still feel like I can use your videos for a good reference. Keep up the good work, and thanks for giving your time.
Love all your vanilla courses. Vanilla is a way to help me overcome imposter syndrome.
This is something so cool and basic. I want to use this everywhere!! Thanks for the vid Brad!
Dude, I just bought 2 courses on Udemy and u r a freaking crack!! thanks mate!!
As always another invaluable video. Many thanks Brad. Love your delivery method and crystal clear explanations.
Brad you are no ordinary one you are having Telepathic mind Which can read people's mind.😍😍
I love how you concentrate on the basics and don't make unnecessarily complexe workflows.
Nice Brad. it gives me additional information on how to play different approach in organizing a javascript code in a simple way. thanks a lot
the best next idea for the video is explaining how to create npm package and publish them to npmjs either building a React Component module or just simple utils module with TSDX created by Jared Palmer :)
I built a very basic react module for npm purely for leaning and testing. here it is www.npmjs.com/package/@codedevbrad/react_movement
its got like 800 downloads which I'm surprised as I thought it was stupid.
here are the links to help ( which I used):
- www.freecodecamp.org/news/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78/
- medium.com/recraftrelic/building-a-react-component-as-a-npm-module-18308d4ccde9
@@chill-_-839 cool work bro
Thanks Brad You are my best youtube instructor
Very nice discussion about Javascript
Yes, I like Parcel. On live chat with RTC the other day many expressed their dislike for Webpack. I think Parcel would foot the bill so to speak.
Workflow skills is equally as important as coding skills and equally as necessary. I admit to some deficiencies with the former. Thanks for this video!
Brad, you’re an amazing teacher!!
And just for general information parcel bundler 2 which is the next version of parcel is in active development . And is currently in the beta phase.
Suggestion for next video: i realy want to learn about regular expression from you.
same suggestion :D
same , i hope brad see's that :D
Hope brad will do a tutorial on it
Nobody wants to learn regex...we just have to :) I would say regex is the biggest thing I have to look up no matter how much I study lol. Yeah I can do a crash course. I will just forget it all the next day
@@TraversyMedia Cool
I like the workflow. Thanks Brad.
Super easy!! Thanks for making such video Brad.
This is way easier to use than webpack. Nice video
Great videos as always. Two remarks though, Why do you keep using tag at the end of the like 10+ years ago, instead of using
this looks like the Reactjs workflow, pretty nice video!
parcel for the win! Thanks a lot
YES! I've been waiting for such a thing!
Very useful and unique video as always,
You are a gift to all developers out there 💯💯💯
Great tutorial brad. continue to do good work !!
Very detailed and great to follow. Thanks for sharing.
Hi Brad! hope your well. thanks so much for the great content, I always love your content. By the way your so popular at my school, our lecturers usually direct students doing web development course units to this channel, it's amazing. People love your content so much. I've learnt so much from you personally and am so grateful. I'm kindly requesting you to make a video on how to implement a WYSIWYG editor as a content creator on a Blogging web project and how to save that data to a database and retrieve it back to the front end using node. I would be so grateful if you do so. thanks a lot.
This is what I've been looking for, thanks you!
This is fantastic content.
As far as I know you dont need to install Babel since it is included in Parcel by default. I mean for the standard use of Babel. Only art Sass needs to be installed.
this was a gem of a tutorial !!
this is sick. Thanks Brad
Amazing work!! Love this vid, lots to learn!
Thank you Brad! your tutorials are helping me a lot!
Thank you, man. Great work.
Amazing work!!! I think you're the best!
Hey Brad, at 16:53 what about to modify all the components, made them returning promises? So in the app.js you can use Promise.all? Yea, mine is just a side comment, non related to the content of the video ... Thank you brand u r awesome!
1. Thank U for your great content
2. Please explain why did U need to bring babel here?
a. Doesn't it comes automaticly with Parcel? if not, how do you wire it together since you didnt use any parcel.config file here...
It made my concepts clear about React.
love you brad
Hi Brad! This video was great thank you!! At what point would you say use a framework (vue) vs I can just use vanilla JavaScript (which I’m pretty comfortable with) ?
this is what i looking for, Brad. thank you
Thank you Sir, this is exactly what I was looking for.
Although I hate JS this is very cool !!
Really nice tutorial. Thank you.
Looking forward to your own platform. Thanks for this
Thanks
I ran into problems implementing this code. I found out later I had to add npm install --save @babel/polyfill
then, I had to include import "@babel/polyfill"; to my app.js file right below the import User from './components/User'; line. I hope this helps out other people who have the same issue. Cheers
Great content. Appreciate you work. Keep going. 😋
Awesome tutorial! thank you very much, may I ask what is the reason of having a public folder that hosts the html files and another src folder for the css and js files? why not having all in the src instead? is it due to the way Parceljs works or is it due to convention?
minor update: while using d3 I was having a "regeneratorRuntime is not defined" error until I switched to parcel2 (the only differences for this setup were that ---out-dir becomes ---dist-dir and "main" becomes "default")
Thanks Brad! This video helped me to clarify a lot how to structure projects with Parcel, it now makes sense! ....I just have a question, if you have another html page, such as About.html, do I have to include in this page the same script with App.js? or have a new file js for About page?
Same script with app.js would be much better. I guess.
@@umut8244 got it! Thanks for your reply
Hi Traversy Media, Ive just recently found your channel and I must admit you've helped me throughout your learning progress more than any collegues in the last two years. I'd like some specific advice on a topic you've not covered yet. The company I work for developes apps by using SAP, hence SAP UI5 and Fiori. I've been working a lot on fundamentals like JS and Node, but SAP is pretty complicated and I don't know which learning steps to prioritize. I dont know if youre familiar with these technologies, but any advice would be very helpful. Thanks!!
Very nice and simple video Brad,
Sadly you did not show that ParcelJS can load scss and typescript from the index.html
nice! i've been wanting to do this for a long time
thank you for your efforts🙏🏻
Thanks for doing your best sir!
Very useful, thank you for that
I think you should write a framework :D
But then he wouldn't have time to make videos
Thank you Traversy, great vids. I'm new to programming and would like to build a saas on vanilla js. Why bundling and using this design and not having many .js files linked to your several html files?
Slick. I really liked this one. Now why am I learning Angular again?
Very very good thanks
@Traversy Media Hi Brad, is it a better approach than using Web Components? Is the comparison even valid?
One thing really love about traversy media is that they give us code also...
For those working on Windows (with some updates to dependencies):
Installing required stuff
npm install --save-dev parcel sass @babel/core @babel/plugin-transform-runtime @babel/runtime-corejs3 rimraf
.babelrc
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3,
"regenerator": true
}
]
]
}
Scripts in package.json as in the author repository and instead of "main" we should put "default":
"default" : "index.js",
"scripts": {
"dev": "npm run clean && parcel public\\index.html --dist-dir development -p 3000",
"build": "rimraf .\\dist && parcel build public\\*.html --dist-dir dist --public-url .\\",
"clean": "rimraf .\\development && rimraf .\\.parcel-cache"
},
Took me a while to figure everything out but it works for me
Like before watching.
Like it. Could you make a tutorial for vanilla javascript Single |Page Application?
Wow thanks!
I used parcel before but I had an issue with multiple pages.. how to add in multiple pages?
wtf, thats way better than Webpack
Thank you!!!
I liked so much, but i don't understand why use babel and parcel...
Sweet set up. One question, how would you go about adding a click event to a .card that alerts the user information?
Nevermind. Figured it out. I had to use template elements instead of strings, so that I could add event listeners to them before I appended them to another element.
Can someone explain me why bundling and all sort of this stuff is so essential for JS development? Wrinting pure ES6 modules and importing them where it needed is just works in the browser without pre/post-processing. For deployment it seems enough to minify the files.
u r the best, big TS TDD project on udemy soon plsssss
Do you use this stack for your projects ? Or you prefer to use vue.js or others frameworks ?
P.s
Do You include The scss file inside the js file because it is the entry point of Babel and sass?
Thank you, fantastic tutorial. Is there a way to integrate Apexcharts in there using functions and render to one dev similar to React? Also, I would like a tutorial diving A bit more into other options than template as you mentioned in the tutorial. Appreciate your efforts and thanks in advance for your help, hints, insights and suggestions.
Please do videos in spring boot
I think you should move on the new topic, which is CI/CD tool like Ansible, Jenkin, Gitlab runner etc... you can create a new series like “learn xyz with me”
Great tutorial. BTW different question, Do you think Anthony Alices course on JS werid parts on Udemy still worth taking? Seems pretty old.
It's still a pretty solid course since JS doesn't evolve as quickly as the rest of the web dev landscape, and it's nice to know the old way of doing things so you don't get confused if you ever have to work with an older code-base.
I think the best way to do it is how you do it brad
Thank but can you please do a video for a whole website with modular sass, and js modules and using task runners like gulp/Babel and parcel ?
Hello Brad , please can you do a nodejs jwt tutorials that implements refresh tokens and security practices..
Thanks
Thanx brad
I use makefiles lmao, only for learning react and node though, for production better to use a dedicated file manager.
Good stuff Brad! Thanks!
Hi @Traversy Media, how can I include the unit testing framework in this workflow?
Nice video...
Please what is your recommendation? i am done with front and back end using react and node .... i wanted starting a project that will strengthen my learning further... i am building a social media site, i need your recommendation or step guide.
Dear Brad can I add onclick event properties to divs in templates ?
Ex. template = ` Hello ` ;
Hi guys!
I want to ask you a guestion guys. But maybe this will be a out of topic question...
So where is the best place to put a validation data? Is it in frontend (bootstrap, react etc) or in a backend (express node) or in a database itself (mongodb with mongoose)
Repo doesn't update when removing any of the original components from app.js. Only to get it to work is to restart a server with each change. Even page reload doesn't have any effect. When "Header" and "User" are deleted, a page is still generating new cards. Is this standard behaviour of this boilerplate?
i have a question which is how to package and deploy Html+css+Javascript project
hello Brad, I would like to ask you about babel in IE11. I have a project standalone without node js and I don't have package.json file, I use the latest version babel but in my IE11 browser I receive an error that is Assigment to const. Could you answer my question please, thank you
Hi just wondering if parcel is used along with gulp or can it do the same thing that gulp does with concatenation and minification of both css and js
Hi Brad, can you create a tutorial on how to add an html theme for example from startbootstrap on a react-app (generated by create-react-app)?