What is use of curly braces in an ES6 import statement?

by

Well, the difference between whether you should import your components within brackets or without it lies in the way you export it.

There are two types of exports

  1. Default Export
  2. Named Export

A component can have one default export and zero or more named exports.

If a component is a default export then you need to import it without brackets.

E.g.,

export default App;

The import it as

import App from './path/to/App';

A named export could be like

export const A = 25;

or

export {MyComponent};

Then you can import it as

import {A} from './path/to/A';

or

import {A as SomeName} from './path/to/A';

If your component has one default export and few named exports, you can even mix them together while importing

import App, {A as SomeName} from './path/to/file';

Similarly in case of react and react-dom, React and ReactDOM are default exports respectively whereas, for instance Component is a named export in react and render is a named export in react-dom. That’s the reason you can either do

import ReactDOM from 'react-dom';

and then use

ReactDOM.render()

or use it like mentioned in your question.

More Related Contents:

  1. React setState not Updating Immediately
  2. What is mapDispatchToProps?
  3. What is the best way to access redux store outside a react component?
  4. why do you need to bind a function in a constructor
  5. How can I persist redux state tree on refresh?
  6. Attach Authorization header for all axios requests
  7. What is the best way to redirect a page using React Router? [closed]
  8. Can I dispatch an action in reducer?
  9. Handling async request with React, Redux and Axios?
  10. React – Display loading screen while DOM is rendering?
  11. When do I choose React state Vs Redux Store
  12. Use Connect or pass data as props to children
  13. Axios get in url works but with second parameter as object it doesn’t
  14. Redux: Why is avoiding mutations such a fundamental part of using it?
  15. ReactJS lifecycle method inside a function Component
  16. Element type is invalid: expected a string (for built-in components) or a class/function
  17. Use history.push in action creator with react-router-v4?
  18. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  19. How does connect work without mapDispatchToProps
  20. Trace why a React component is re-rendering
  21. React: Parent component re-renders all children, even those that haven’t changed on state change
  22. ‘TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined’
  23. Jest setup “SyntaxError: Unexpected token export”
  24. How to fix 431 Request Header Fields Too Large in React-Redux app
  25. how to set initial state in redux
  26. My Redux state has changed, why doesn’t React trigger a re-render?
  27. How do I see state when logging to the console instead of Proxy object inside reducer action?
  28. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes
  29. How to turn on/off ReactJS ‘development mode’?
  30. create-react-app: how to use https instead of http?

Leave a Comment