JavaScript ES6 Modules

Поделиться
HTML-код
  • Опубликовано: 22 сен 2024
  • With ES6 JavaScript changed from a programming language that many people dreaded using to one of the most popular and loved languages. Of the new changes in ES6 the addition of modules was one of, if not, the biggest change that pushed JavaScript to where it is now. Modules make it so much easier to write clean and reusable code. In this video we will discuss how to use ES6 modules and why they are so important to JavaScript.
    ES6 Modules Article:
    blog.webdevsim...
    Async vs Defer Video:
    • What Is The Fastest Wa...
    Twitter:
    / devsimplified
    GitHub:
    github.com/Web...
    CodePen:
    codepen.io/Web...
    #JavaScript #ES6 #Modules

Комментарии • 400

  • @johnniestang
    @johnniestang 5 лет назад +189

    Dude ... I've watched a lot of videos recently trying to understand ES6 modules and why they weren't working for me. You nailed my issue and cleared up a lot of confusion.

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +20

      I'm really glad my video was able to help!

    • @maksymdudyk1718
      @maksymdudyk1718 3 года назад +4

      Kyle is a very gifted presenter. Very. You are right.

    • @Djolesabijacica
      @Djolesabijacica 3 года назад +2

      true, I haven't seen in any other tutorial that I have to type in script type="module" , I was wondering why my function calls are not working in other .js file

  • @samdavepollard
    @samdavepollard Год назад +7

    that rare thing - a tutorial about modules which doesn't assume I already know how to use modules
    many thanks for sharing your knowledge; totally got me up and running
    subbed

  • @shiytp
    @shiytp 5 лет назад +143

    you really live up to your channel name. i've been through countless channels to get a better grasp on ES6 and yours are by far the best. other channels tend to speedrun their tutorials without explaining everything while you do it nice and simple. wish i found you sooner.

    • @WantOxide
      @WantOxide Год назад

      I've come to the conclusion that this guy is the worst teacher ever seen. He explains like a monkey with brain damage. I don't know what you're talking about but this is terrible on so many levels.

  • @Huy-ed2re
    @Huy-ed2re 4 года назад +41

    Literally the best ES6 tutorials on the internet. So simple yet so powerful :)

    • @WantOxide
      @WantOxide Год назад

      I've come to the conclusion that this guy is the worst teacher ever seen. He explains like a monkey with brain damage. I don't know what you're talking about but this is terrible on so many levels.

    • @leetcodeking4859
      @leetcodeking4859 Год назад

      I'm Chinese, love this, he help me past me master classes.

  • @thomasm1964
    @thomasm1964 2 года назад +8

    What a beautifully clear, succinct, calm and focussed video! I learned more in five minutes of watching you than I have in hours of reading elsewhere. Brilliant!

  • @Datdus92
    @Datdus92 5 лет назад +21

    This channel is a goldmine! :D

  • @javascriptmastery
    @javascriptmastery 5 лет назад +4

    Continuing to provide awesome content, as always! 🔥

  • @eddyqiu5161
    @eddyqiu5161 5 лет назад +36

    Looks like I need to run that code with Live Server in order to avoid getting errors related to CORS Policy. Great tutorial! Subbed.

    • @royalenfieldmeteorrider7873
      @royalenfieldmeteorrider7873 4 года назад +5

      thanks to Ritwick Dey for gifting us Live Server

    • @333jjjjjj
      @333jjjjjj 3 года назад +2

      This is important and should have been mentioned in the video.
      - a guy who learned this the hard way 30 minutes into a timed interview assessment, no servers allowed. Now, i still passed since i have chops. Close call though

  • @noah.2628
    @noah.2628 3 года назад +3

    Dude, thank you soo much. Before I was so confused/stuck on "require" topic but now since you've explained it to us in such a way I can understand it now. Once again, thank you!

  • @ChrisAthanas
    @ChrisAthanas 2 года назад +2

    Such a clear explanation of a subject that so many Devs struggle with explaining to beginners

  • @samansinaei1426
    @samansinaei1426 3 года назад +5

    Thank you so much,
    I learned export and import in js very easily for the first time.
    I loved the way you only used export keyword before functions and that you explained default export very well.
    Best wishes

  • @hafsasaleem3568
    @hafsasaleem3568 3 года назад +2

    You are a Godsend! No amount of time spent on 100s of tutorials and documentation made me understand JavaScript as much as your videos did. Kudos!

  • @carolina54
    @carolina54 4 года назад +3

    OMG what an awesome way to explain it. I literally spend 3 days without understanding how export and import worked and you made it seem so easy through coding and examples!! I definitely susbscribed!! Keep it up!! Thanks so much!

  • @sonysantos
    @sonysantos Год назад +3

    +1 because you are so spontaneous that you include your own faults and recognize them. That places you and we at the same level, not better, not worse, but in different stages.

  • @KhalilKHAMLICHI
    @KhalilKHAMLICHI 5 лет назад +2

    can't be any clear than this explanation. bravo to you. you the best

  • @briandacallos4234
    @briandacallos4234 4 года назад +6

    He is the new Bucky Roberts

    • @abahiduh3246
      @abahiduh3246 11 месяцев назад

      Bucky Robert is the first greatest free GOOD tutorial that happened to us on RUclips... with detailed free lectures. then traversy media, fireship, webdev SIMPLIFIED... GREAT GUYS

  • @TrouvatkiDePercusion
    @TrouvatkiDePercusion 4 года назад +1

    Holy fucking shit... I finally understand what modules are, and not only that, now I finally understand when you're supposed to use braces in import statements and when not to... Bro, you deserve to be world-famous, seriously. This is amazing.

  • @hasnainwasaya
    @hasnainwasaya 2 месяца назад

    thanks for the detailed yet simple explanation of this concept

  • @mohammadirmansyah9913
    @mohammadirmansyah9913 3 года назад +3

    Still the best learning channel for me, simple, straight, and sharp information. Keep up the good work bro. Thanks.

  • @filipemarques4677
    @filipemarques4677 3 года назад +1

    I have a CodeCademy account, and the funny thing is: after doing the exercises there or if I'm stuck, I come here and get the better understanding of the subject. Please keep these videos up! xD

  • @rodneytapit5636
    @rodneytapit5636 Год назад

    These are the best tutorials on the internet, you are a talented natural teacher.

  • @ayahatheel2744
    @ayahatheel2744 6 месяцев назад

    Thank you, I'm actually going through a coarse over coursera and you just made it way easier. Appreciate it

  • @Capicuaman
    @Capicuaman 5 лет назад +4

    I actually did enjoy the video, very much. Thanks

  • @kenkioqqo
    @kenkioqqo 3 года назад +14

    Your explanations are top-notch. Your choice of what to teach is very relevant, especially to beginners, like me. I have been following your videos for the last few months, and they are really helping me understand JavaScript. It's very hard to quit when there are content creators like you to help. Keep up the great work bro.

  • @Bayo106
    @Bayo106 4 года назад +66

    damn, imagine knowing this before learning React. Here I am thinking this looks just like React but obviously it's just JS syntax that I was un familiar with before starting with React

    • @RyanValizan
      @RyanValizan 4 года назад +5

      Bayo106 It is always suggested one learn the underlying language basics before working with or learning a framework. It can make it very difficult to see the difference between JS and the framework.

    • @FitriRatnaDewi
      @FitriRatnaDewi 3 года назад +2

      I also thought the same thing. I had a hard time trying to learn React, but now I know that JS was what I didn't know back then.

    • @pjguitar15
      @pjguitar15 3 года назад +2

      i came here to learn modules bec they say that it's a pre-requisite in learning react. haven't started react tho

    • @archable
      @archable 3 года назад +1

      You can actually use React with ES6 modules because React is a library and not a Node.js framework. See i5ar/create-react-without-jsx-app on GitHub.

    • @Bayo106
      @Bayo106 2 года назад

      @@RyanValizan obviously but I didn't know es6 to this extent

  • @getorvillized7499
    @getorvillized7499 5 лет назад +2

    Thought it was about time for me to learn how to use ES6 modules. I thought this video was practical and to the point. I can put to use what I learned from it right away. Thanks!

  • @viral_kindness
    @viral_kindness 4 месяца назад

    Thank you very much for this video. I was stuck as I was getting errors then after adding - type='module' in script tag in HTML everything resolved. I am grateful for this video.
    Thanks for the help!

  • @sib3709
    @sib3709 5 лет назад +2

    Super clear beginner friendly explanation! Thx!

  • @getrekt1386
    @getrekt1386 5 лет назад +4

    came across this channel for some revision, amazing content

  • @terashelf8555
    @terashelf8555 2 года назад

    Explained in a very simple way and just in minutes.

  • @PapaBear_Gaming
    @PapaBear_Gaming 4 года назад +1

    Thank you so much for this. Just going over this topic and it looked rather confusing until you went over it :)

  • @Pareshbpatel
    @Pareshbpatel 3 года назад +1

    Excellent, succinct video on ES6 Modules. Thanks, Kyle
    {2021-06-14}, {2022-03-07}

  • @thien837
    @thien837 6 месяцев назад

    great video! I was reading the doc and it toasted my brain. i didnt understand anything but i got it instantly after wathcing this. you explained the concepts very well 👍

  • @TheUltimateTrainJourney
    @TheUltimateTrainJourney 4 года назад

    Simply great and justified as channel name

  • @abhiii3068
    @abhiii3068 3 месяца назад

    Clear and to the point. Thanks!

  • @basiccodingwithadam8125
    @basiccodingwithadam8125 5 лет назад +2

    Great explanation! First time viewer +1 subscriber

  • @hakuenstudio
    @hakuenstudio 3 года назад

    Thanks for your work! I have to say, I think you are the best youtube about javascript/web that I have seen. Thank you so much :)

  • @sandesh.sukubhattu
    @sandesh.sukubhattu 2 года назад

    Thanks.
    Really awesome short and depth video. Cheers

  • @kiranbs5057
    @kiranbs5057 Год назад

    Neat and simplified Explanation :). Thanks.

  • @1apocalyps
    @1apocalyps 5 лет назад

    Straight, to the point, no fluffs = (Attention + Learning) >= (Knowledge + Success) = $$$

  • @biswamohandwari6460
    @biswamohandwari6460 3 года назад

    What to say! Man your a genius, a champ. You make things so simple to understand..

  • @anticsBack
    @anticsBack 5 лет назад +5

    Very good and simple explanation, both for beginners and people who want to revise. Like + subscribed.

  • @sabuein
    @sabuein Год назад

    As always, thank you so much.

  • @sasazezelic
    @sasazezelic 3 года назад +2

    Your videos are always the first I watch when I'm learning new things.
    Another great video!
    I have a question... Where does the exported data live? Is it loaded in client's memory?

  • @Spades340
    @Spades340 5 лет назад +9

    Well done. I feel like I learned a lot in a short amount of time. Subbed.

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +3

      That is great! That is my goal with these videos.

    • @NeilTruick
      @NeilTruick 5 лет назад

      Same here. Came for a snack...got a meal. 👍

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +1

      @@NeilTruick I like that analogy.

  • @mahdi_c200
    @mahdi_c200 2 года назад

    thank you so much body, you saved me from lot of errors !

  • @Vincent1990-l1y
    @Vincent1990-l1y 3 года назад

    This guy explain everything in a very good way, like it!

  • @michaelpay1704
    @michaelpay1704 2 года назад +1

    5:03 "If you save that, it'll say user's name is 11, which as we both know is incorrect"
    El from Stranger Things: "Am I a joke to you?"

  • @arifhossain8753
    @arifhossain8753 Год назад

    You are always king 👑. Your teaching style is very organized!

  • @heinhtet7292
    @heinhtet7292 2 года назад

    Thank you so much!
    You just made my day.

  • @crashcourseindonesia5063
    @crashcourseindonesia5063 3 года назад

    thanks bro, you save me a lot in the deadline..

  • @LearnWithNeeraj777
    @LearnWithNeeraj777 2 года назад

    The channel deserves to have minimum 2 million sub

  • @johnnicol4420
    @johnnicol4420 4 года назад +15

    You have to make a Udemy "MODERN JAVASCRIPT COURSE" - Your way of explaining concepts are simple and easy to understand. You are a very good teacher. Looking forward to buying your new Udemy course. ;) Thanks for the help!

  • @alibeyit3860
    @alibeyit3860 2 года назад

    We need a babel vid from you Kyle!

  • @nimatsergiu2942
    @nimatsergiu2942 4 года назад

    Keep it up, mate, you are doing a fantastic job here. Thanks for that! ;)

  • @mixiomi4125
    @mixiomi4125 3 года назад

    Thank you. Kyle. You teach so well that I can follow you and understand..

  • @zm690
    @zm690 4 года назад

    Your explanation is so clear, every time..

  • @achtube85
    @achtube85 3 года назад

    Very clear, well-explained, step-by-step js juice here. Thanks!

  • @SlingShotKid007
    @SlingShotKid007 5 лет назад

    This was right to the point with a lot of great info in a short video. Thanks, subbed

  • @i5artube
    @i5artube 3 года назад +3

    Nice video... You should use the `.mjs` extension for modules so you know the file is a module without even open it.

  • @imajt5
    @imajt5 5 лет назад

    really like the way you explain the thing. Just to the point. Thanks.

  • @aymenob2484
    @aymenob2484 2 года назад

    love this guy way of explaining

  • @pixzelplethora9815
    @pixzelplethora9815 5 лет назад +1

    This really helped. Nice simple lesson to drive home fundamentals. Thanks!

  • @hertechera
    @hertechera 11 месяцев назад

    Thank you so much for these

  • @lukkaew6327
    @lukkaew6327 3 года назад

    you really simplified it!!! Thank you!

  • @kostiantynkarzhanov9216
    @kostiantynkarzhanov9216 Год назад

    Thank you! Very well explained! 💛

  • @ztormone3373
    @ztormone3373 3 года назад

    Besides traversy ,dev ed and 2 more good guys I subscribed to your channel too. U are great dude.

  • @sagarkhasnis5991
    @sagarkhasnis5991 4 года назад

    This cracked open modules for me finally, thanks!

  • @zxenon_
    @zxenon_ 4 года назад

    Very clear and straightforward explanation...
    One thing I want to point out... for God's sake, master the language not the framework.
    When one masters new Js capabilities, it is easier to understand tools like VueJs and React and not see them as a magic blackbox.

  • @isholapinheiro
    @isholapinheiro 3 года назад

    You made me feel like this was easy enough and i should have known this a long time ago, but not in a bad way.

  • @rameenana
    @rameenana Год назад

    Thanks man. This was helpful.

  • @firozgg7524
    @firozgg7524 3 года назад

    Thanks man! This helped me a lot...

  • @julienwickramatunga7338
    @julienwickramatunga7338 4 года назад

    Thank you for this crystal clear video!
    Boom, you got a new subscriber 😁

  • @abulkalamasif1270
    @abulkalamasif1270 Год назад

    This channel is really great

  • @blonduose
    @blonduose 5 лет назад +2

    thanks! will probably watch more of your videos as I embark on my JS journey!

  • @stefano19951995
    @stefano19951995 2 года назад +3

    Really good video :)
    I tried to follow the same procesure but it's not working for me as I get a CORS error: edge browser can't access filesystem on its own and it needs a localhost server to do that.

    • @lav4eee
      @lav4eee 2 года назад

      The same happens with Google Chrome and Brave also.

  • @aurelianobuendia24
    @aurelianobuendia24 4 года назад

    Really nice videos, finally I kind of understand modules, i´ve been fighting them in the new versions of three.js and its driving crazy,.

  • @helmialfathseptiana6383
    @helmialfathseptiana6383 4 года назад +2

    its clearing my mind abou t ReactJS

  • @robwhitaker8534
    @robwhitaker8534 3 года назад

    Awesome! Thanks buddy

  • @KhaPiano
    @KhaPiano 5 лет назад

    Very simple and clear video. Thanks!

  • @tymothylim6550
    @tymothylim6550 3 года назад

    Thank you very much for this :) It was very informative :)

  • @ZoroastrianCowboy
    @ZoroastrianCowboy 4 года назад

    Great channel man, thanks for the great videos

  • @erichobbs4042
    @erichobbs4042 4 года назад +5

    It would have made more sense to me if instead of explicitly exporting from one file to another, you simply import the file, and explicitly excluded anything that you didn't want to export. I'm guessing that they did it this way because JavaScript lacks the functionality of public/private access modifiers and just importing the entire file could lead to nameing conflicts. I hope that they add access modifiers in the future.

  • @masoudazadi
    @masoudazadi 2 года назад +1

    That was great👍💪

  • @LORDFARQUAADIUS
    @LORDFARQUAADIUS 3 года назад

    Amazing, like always!

  • @curtis6604
    @curtis6604 4 года назад

    YOU DESERVE WAYYYY MORE VIEWS MY MAN

  • @eddiejaoude
    @eddiejaoude 5 лет назад

    Great explanation and demo 👍. Keep them coming 🤓

    • @WebDevSimplified
      @WebDevSimplified  5 лет назад +1

      Thanks! I'm not planning to stop anytime soon.

    • @eddiejaoude
      @eddiejaoude 5 лет назад

      Web Dev Simplified looking forward to the next one 🤓

  • @himbary
    @himbary 5 лет назад

    Great, thanks! Short and on the point

  • @xpolentaedgex
    @xpolentaedgex 2 года назад

    Manooo você é doidera demais!!!! valeuuuu caralhooooo

  • @cristianannese6040
    @cristianannese6040 5 лет назад +1

    amazing! thank you so much!!!

  • @jibaromar2249
    @jibaromar2249 3 года назад

    Amazing video, thanks a lot

  • @NotAshamedOfficial
    @NotAshamedOfficial 3 года назад

    Best explanation I've heard so far So exports is kind of like public in c sharp

  • @rajukumarshah4520
    @rajukumarshah4520 Год назад

    Thanks for the hard work

  • @saldownik
    @saldownik 4 года назад

    Great vid, very informative. Thanks.

  • @lben5904
    @lben5904 4 года назад

    Thank you for this clear lesson.

  • @ecarbajal1982
    @ecarbajal1982 4 года назад

    My man great VIDEO! Totes helping me out with my development. Keep up the awesome work and I hope you getting paid!

  • @briandacallos4234
    @briandacallos4234 3 года назад

    You never disappoint me kyle

  • @alexandraionita44
    @alexandraionita44 4 года назад

    really well explained! Thank you:)

  • @MrAbdooo2008
    @MrAbdooo2008 4 года назад +4

    pls someone answer me what happen when we import just a part of module like an object in react or js
    1- can we access other function in the module
    2- is all module geeting excuted
    3- what really happen behind the scene

  • @ddarkodev2923
    @ddarkodev2923 3 года назад

    Crystal clear! Thanks 💪