JavaScript Modules with Import/Export Syntax (ES6) - JavaScript Tutorial

Поделиться
HTML-код
  • Опубликовано: 5 ноя 2024

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

  • @dcode-software
    @dcode-software  2 года назад +2

    *HOW TO BUILD YOUR OWN JAVASCRIPT LIBRARY WITH MODULES:*
    ruclips.net/video/sZQEa13r22I/видео.html
    🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
    www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

  • @daquirisoft3603
    @daquirisoft3603 4 года назад +76

    God, this type of clarity and conciseness is so rare. Excellent explainer.

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

      True, this type of videos we can't get on paid course also.

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

    This is how a tutorial is made. No introduction. Straight to the point and only the point. Everything about it is given.

  • @wianll
    @wianll 5 лет назад +31

    I've been using a form of this in Angular this whole time and didn't even know you could do this in vanilla js. Thanks for the run-through! 🐱‍👤

    • @dcode-software
      @dcode-software  5 лет назад +2

      No dramas, mate

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

      Wian Lloyd, I’m learning TypeScript from Open Source projects when my background is in PHP/JS. I’m here to see what I don’t know know, ya know?

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

    NO ONE ON STACKEXCHANGE COULD EXPLAIN THIS. Thank you!

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

    Been trying to get these imports to work for a long time now. Thanks so much!

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

    YOU DESERVE A MILLION + SUBSCRIBERS SIMPLE BUT GREAT EXPLANATION IN A SHORT VIDEO...AMAZING

  • @jahmiel1945
    @jahmiel1945 Год назад +2

    i was struggling with js modules, as soon as i watched this video i figured out my mistake for not including the .js extention. Thanks to dcode, i now uderstood why its was giving mw errors

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

    I have been putting everything in the same JS file for years... never knew this was possible in JS. This changes everything.

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

    Thanks so much. I was so confused over import and export for a long time but you really simplified it! Makes total sense

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

    The explanation in this video is amazing, thank you

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

    Thanks for this video. I used import/export last year, now I'm learning the same thing as a refresher, and it makes a lot sense watching this video.
    Thx

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

    very clean and crisp explaining

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

    Great explanation. i'm new to the coding business and learning on my own. your explanation is so simple to understand as compared to some for the resources i have bought online. Thanks

  • @sher.5027
    @sher.5027 2 года назад

    Nice. Video. Commenting her to tell the universe that I understood your video. Crystal Clear Concept. Thankyou for the upload.

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

    Excellent, short and concise { completelyUnderstand }.

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

    Thanks a lot. you are the only person to explain this topic so well in youtube

  • @gerardpalagalofre8119
    @gerardpalagalofre8119 Год назад +1

    Perfectly clear, well explained. Thank you :)

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

    Thank you so much! But out of curiosity can you export classfrom HTML?

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

    I really like your tutorials alot. You are the best teacher i have ever met

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

    Two questions here: 1) Why not reference to utils.js directly from tag? Why need to write redundant code to import and export, which may lead to forgetting to export and import new functions in the utils.js? 2) Must the utils.js be in the public accessible folder structure? Can the main.js import functions from other JS files in private folders (but in the same project folder) like node_modules? I'm asking this because some modules, e.g. Entity objects, are interoperable between server and client. Currently I need to duplicate such entity.js file between client and server, which is hard to ensure they're in sync. Not sure if the ES6 import/export could help. Thanks!

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

    Great tutorials man! Great explanations, great examples, great everything. Thank you!

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

    Thank you for this short lesson without bla bla

  • @anitasunildesai
    @anitasunildesai 9 месяцев назад

    Thanks for the great, detailed explanation.

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

    Nice video. Short and to the point.

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

    silly question 😅.
    What is that theme? and what font do you use?

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

    Good lesson. Now how do I import js files into React as modules? Wonder if I can import the whole file instead of just functions inside of them?

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

    Awesome explanation. You made it so easy bro.

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

    Thank you so much; great video! Cheers from Sweden 🇸🇪😊

  • @espanol9750
    @espanol9750 5 лет назад +7

    Thx so much for making this video. Finally I'm able to understand it :D

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

    Impossible to explain better, bless you

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

    Very usefull and cleary explained! Merci !!!

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

    Wow. Exzellent Explanation!

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

    Boom! native js modules just work:D thank you for your clear explanation.

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

    Just I want to say Thank You for this informative video. Thank You again!

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

    awesome bro , thank you soo much

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

    You did excellent. I was only able to understand js modules after watching your video. 🙏🏽

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

    Geat speaker, very easy to understand

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

    Great bro. Great explanation. Keep it up.

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

    Excellent explainer. Thank you very much.

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

    very helpful video. finally i'm able to understand. good work.

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

    Thank you so much for taking the time.

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

    Very clear! Thanks!

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

    Thank you. This video has been very helpful

  • @Speed-TV
    @Speed-TV 11 месяцев назад

    such clear tutorial!

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

    what a hero

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

    If there was an option to love this video i would, but for now... i will have to settle with a like.
    Thank you for the knowledge and tutorial!

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

    very easy explain bro!!

  • @jowsad2857
    @jowsad2857 4 года назад +9

    hi my browser says " index.html:1 Access to script at 'file:///C:/Users/User/Desktop/Learning/js/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. " and I cannot use modules like you teach. any help?

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

      I have the same problem, and I found the solution, you need to set a remote server.
      I installed node and them i made cmd npm install --global http-server.
      then i went into my directory root and typed " http-server . " with the "." and withouth " ".

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

      @@jorgeortiz7926 the server must be running while you're importing and exporting modules I assume...

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

      @@UnderGun81 Right, a local server must be running in order to work the modules importing

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

      @@jorgeortiz7926 it's not really working for me, where did you modify the http-server dependency? In the package.json?

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

      @@UnderGun81 i did not modify anything i just ran a command, here www.npmjs.com/package/http-server
      You can check the doc

  • @SuhailkcOfficial
    @SuhailkcOfficial 9 месяцев назад

    Thank you for this video. very helpful 👍

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

    Thank you so much. Now I can write my code in much more peace.

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

    Very helpful, thanks a lot

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

    you sound a bit like Korg. Thumbs up on the video btw

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

    when reloading the console says "Access to script at '(path to file)' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https."

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

    Good clean tut.

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

    Simple and awesome excellent video

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

    woww...thanks for introducing it 😃 ... really loved this video 👍

  • @agent-33
    @agent-33 3 года назад

    Explained well. Thank you.

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

    Good Explanation!
    I try it but it is not working. I mean the chrome didn't produce any result.
    Any other way...?

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

    Great tutorial. Thank you!

  • @Akbar-ux3bc
    @Akbar-ux3bc 11 месяцев назад

    Well explained.

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

    Simple and clean,Thanks !!

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

    very well explained...

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

    Have my upvote sir! Very understandable for a starter. Thanks for all your effort. There's actually one thing I still don't really understand. Why would you ever use the [export default] option? The reason for me to start code-splitting is to make your code more readable... For me, it looks like a lot more work to understand what you did wrote. Anyway, thanks again!

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

    Also show how to use the ES6 functions in HTML button or any input field, onclick or onchange events.

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

    Thank you that was great! I wonder if you could make a separate video detailing how to set up and use modules in three.js in the browser... but not using node.js or express servers. Many thanks!

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

    Very helpful and well explained :D

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

    very clear ---- Thanks

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

    Love from india💖💖thanks bro

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

    Thanks a lot dcode.

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

    Awesome. Nice and easy. Many thanks!

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

    Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !

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

    great explanation, thank you.

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

    Great tutorial. Thank you for sharing .

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

    Question: say your until module uses code from your helper module and each module is a class; would you have to import the helper module into the util module? Or just into main.js?

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

    What font are you using for your VSCODE editor ?

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

    Thanks a ton. This is really helpful.

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

    you explain everything very clearly but when i use same files i got CORS error.

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

    can you please tell me which keyboard you use in this video?

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

    Great! thanks for this!!

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

    YES! Thank you!

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

    @dcode what vscode color theme are you using?

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

    Would eventlisteners go on a seperste module or on main.js file?

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

    Hi I did not quite get the use case of the aggregating feature. In what scenarios would people be using it? And why would people prefer all the modules be exported from a single module....(it actually increases the length of code in case one has got hundred modules....code exporting the modules cannot be skipped...so also code for importing the modules also cannot be avoided....the code for bridging is extra code that one may have to write...although this makes the code structure relatively more systematic...can u please let me know in which scenarios it is used.

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

    Thank you for this tuto about module in JS. I code a web app in JS with different modules implemented and I get cors error when trying to launch the app localy. how can I fix this problem please ?

  • @Hunter-bz1ns
    @Hunter-bz1ns 3 года назад

    Thank You Man!

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

    Great video!
    I just have one question about import/export. What if I would like to export a whole class and want be able to create a new instance of that object and somehow make the object accesible in my html file or instace the object there? Is it possible? If so, do You have any advice how to do that?
    I'm using webpack in my application but need a lot of values that are comming from my view.
    Thank You in advance!

  • @Tony.Nguyen137
    @Tony.Nguyen137 Год назад

    But I could just use another tag and I would have access to the functions. And I woudnt even need the import export tags.

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

    I'm curious if a 'pass-through', as it were, can utilize the pseudo imported objects. I assume they can, but thought I'd pose the question.

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

    muy buen video, muy claro, me sirvio mucho :)

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

    very tanks for this video

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

    Hey, is there a way to import data into server.js from these client js files? 😅 Would be very grateful for your help!

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

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

    I created a chrome extension. I want to add an encryption that is gonna work on a web page and I need to use CryptoJS library but whenever I do import CryptoJS, I get an error: Uncaught SyntaxError: Cannot use import statement outside a modul

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

    i have errol an error will occur everytime I use import export syntax error: can use statement outside module..

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

    Cómo agregar versión control dinámicamente a cada import ?
    import foo from "./foo.js" + vJS
    ???

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

    when you export an entire class with multiple functions inside (say - class test1) and import from another class(say test2) like this --- import './test1.js'; without using the as keyword - how do you access the functions of test1 from test2 ? thanks!

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

    In 2021 i'm using require and module but for some reason console.logs wont show up in the console on other scripts even if i export the method and call it in the main script for some reason console.logging an event listener doesn't work nor doest just returning console.log('hello")

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

    10/10. Superb!

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

    is there a way around having to put 'export' in front of every statement in a js file? i find this extremely tedious. Can I just export everything in a js file without mucking up the code with duplicate export calls all down the page?