When should I use brackets with imports

by

You can have only one export default per file and hence when you do export default like

export default AddTodo = (list, item) => [...list, item]

You can import it like

import MyAddTodo from './todoHelpers'

Since babel knows that you are trying to access the default component, you can access it in you file by any name

Now suppose you do

export const AddTodo = (list, item) => [...list, item]

You can have multiple such exports in you file like

export const AddTodo = (list, item) => [...list, item]  
export const DeleteTodo = (list, item) => [...list, item]

and when you import you will need to destructure them like

import {AddTodo, DeleteTodo} from './todoHelpers'

Now since you have multiple such exports thus babel wont know which component you are tyring to access if you access if by a different name like

import {MyAddTodo, MyDeleteTodo} from './todoHelpers'

If you want to do this you will have to import them as it is and them change thier name like

import {AddTodo as MyAddTodo, DeleteTodo as MyDeleteTodo} from './todoHelpers'

So as general practice you will default export the main component and the rest you can have as export normally or when you have only one component that you need to export from a file then you can choose whatever you want but a nice way will be to export it as default.

More Related Contents:

  1. where is create-react-app webpack config and files?
  2. setState doesn’t update the state immediately
  3. How to update nested state properties in React
  4. Javascript object bracket notation ({ Navigation } =) on left side of assign
  5. The create-react-app imports restriction outside of src directory
  6. How to scroll to an element?
  7. Correct path for img on React.js
  8. How to add multiple classes to a ReactJS Component?
  9. How to load image files with webpack file-loader
  10. Can I use arrow function in constructor of a react component?
  11. setState() inside of componentDidUpdate()
  12. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  13. Unable to use Arrow functions inside React component class [duplicate]
  14. Best way to polyfill ES6 features in React app that uses create-react-app
  15. Importing multiple files in react
  16. React.createClass vs. ES6 arrow function
  17. How do you import a javascript package from a cdn/script tag in React?
  18. Webpack output is empty object
  19. What do curly braces mean in JSX (React)?
  20. In the `import` syntax of ES6, how is a module evaluated exactly?
  21. Webpack breaking change
  22. React functional component default props vs default parameters
  23. how to set up an inline svg with webpack
  24. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  25. Why is my webpack bundle.js and vendor.bundle.js so incredibly big?
  26. how can I use top level “await” in typescript next.js
  27. Deep nested array of objects not rendering
  28. import * as React from ‘react’; vs import React from ‘react’;
  29. How can I fix the “BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default" error?
  30. How to dynamically import SVG and render it inline

Leave a Comment