Import JavaScript file and call functions using webpack ES6 ReactJS

Question

Trying to do something I would think would be very simple  I would like to import an existing JavaScript library and then call it s functions   So for example I would like to import blah js and then call blah      import React from  react   import  blah  from  blah js blah js    class MyClass extends React Component       constructor             super               componentDidMount             window addEventListener  resize   this handleResize              componentWillUnmount             window removeEventListener  resize   this handleResize              handleResize             blah blah               render                             export default MyClass    Just wondering what magical combination of things I have to do to make this work   Maybe I m just missing the point   The example gives the error  TypeError   blah blah is undefined

User · Answer

import   as utils from    utils js      If you do the above  you will be able to use functions in utils js as   utils someFunction

User · Answer

Named exports   Let s say you create a file called utils js  with utility functions that you want to make available for other modules  e g  a React component   Then you would make each function a named export   export function add x  y      return x   y    export function mutiply x  y      return x   y     Assuming that utils js is located in the same directory as your React component  you can use its exports like this   import   add  multiply   from    utils js       add 2  3     Can be called wherever in your component  and would return 5    Or if you prefer  place the entire module s contents under a common namespace   import   as utils from    utils js        utils multiply 2 3    Default exports   If you on the other hand have a module that only does one thing  could be a React class  a normal function  a constant  or anything else  and want to make that thing available to others  you can use a default export  Let s say we have a file log js  with only one function that logs out whatever argument it s called with   export default function log message      console log message       This can now be used like this   import log from    log js       log  test      Would print  test  in the console    You don t have to call it log when you import it  you could actually call it whatever you want   import logToConsole from    log js       logToConsole  test      Would also print  test  in the console    Combined   A module can have both a default export  max 1   and named exports  imported either one by one  or using   with an alias   React actually has this  consider   import React    Component  PropTypes   from  react

[reactjs] Import JavaScript file and call functions using webpack, ES6, ReactJS

Examples related to reactjs

Examples related to ecmascript-6

Examples related to webpack