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

Question

I can see there are two different ways to import:
import React from 'react'
import { render } from 'react-dom'
The second one has brackets. What is the difference between the two? And when should I add brackets?

Answer 1

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
Default Export
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.

Answer 2

First of all, a big thank you to all the other answers.
Here is a summary of all the above, in one answer.
Context with examples
import React from 'react'; // Importing without braces
import { render } from 'react-dom'; // Importing with braces
To be able to understand import, it's important to firstly understand export and its types.
Types of exports
There are mainly two types of exports, 'default' and 'named'. Whether to use braces or not, depends entirely on which type of exported variable is being imported.
So, the short answer is that variables exported as default, do not need braces, but named variables do need to be imported with braces.
Now, let's look at some practical examples of how to import and export both types.
Default: How to export and import
exporting
// Module1.js
export default App;
// Module2.js
export default myVariable;
// Module3.js
export default myFunction;
// Please note that there can only be one default export per module!
importing
import App from './Module1'
import AppRenamed from './Module1'
import myVariable from, './Module2'
import myFunction from './Module3'
// Please note that default modules can be renamed when importing
// ... and they will still work!
Named: How to export and import
exporting
export const A = 42
export const myA = 43
export const Something = 44
export { cube, foo, graph };
// Note how there can be several named exports per module
// exported in groups or individually
importing
import { A, myA } from './my-module.js';
import { Something as aRenamedVar } from './my-module.js';
import { cube } from './my-module.js';
import { foo, graph } from './my-module.js';
// Likewise, named exports can be imported in groups or individually
Other notes
let's revisit the very first example we saw above
import React from 'react'
import { render } from 'react-dom'
please note that although, React doesn't use braces, and render does, render is actually a part of react-dom.
therefore it is also possible to import the entire default react-dom
without braces and then use render
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render()

Answer 3

Consider primitives.js,
export default (a, b) => a + b;
export const sub = (a, b) => a - b;
export const sqr = a => a**2;
It can be imported like this,
import sum, { sub, sqr } from './primitives';
In this case, sum is called a "Default Export" and a module may contain a single "Default Export" only.
sub and sqr are called "Named Export" and a module may contain multiple named exports.

Answer 4

Curly braces are used to import single(specific) property, whereas the word without braces is import entire object form that file.
For example,
import React, { Component } from 'react';
Here the word React represents to import entire object from the file 'react'.
{Component} means we specify to import the particular property from the file.

Answer 5

There isn't any need to add brackets if you are exporting as default. You can have only default in the module.
Case 1:
export default function(num1, num2) {
return num1 + num2; }
Case 2:
function sum(num1, num2) {
return num1 + num2; }
export { sum as default };
Case 3:
function sum(num1, num2) {
return num1 + num2; }
export default sum;
You can import the default
import sum from "./test.js";
console.log(sum(1, 2));