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};

The 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. Thats the reason you can either do

import ReactDOM from 'react-dom';

and then use

ReactDOM.render()

or use it like mentioned in your question.

What is use of Curly Braces in ES6 import statement, First of all, and the most simplest reason: when we use modules, we When importing named exports, you'll have to wrap them in curly braces. What is the difference between: import Title from './title.js' and import { Title } from './title.js' ? I think it has some connection with export default Title; and export const Title; but I

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.

A not so in-depth explanation of ES6 modules (import and export), I can see there are two different ways to import import React from 'react' import { render } from 'react-dom' the second one has brackets. So what is the difference  [Solved] - JavaScript - When should we use curly braces for ES6 import? - Wikitechy

No need to add bracket if you exporting as default. you can have only default in the module.

case1:

export default function(num1, num2) { return num1 + num2; }

case2:

function sum(num1, num2) { return num1 + num2; }

export { sum as default };

case3:

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));

What is use of Curly Braces in ES6 import statement, We can label any declaration as exported by placing export before it, be it a Usually, we put a list of what to import in curly braces import {. reactjs without What is use of Curly Braces in ES6 import statement. why use es6 import (4) No need to add bracket if you exporting as default. you can have only default in the module. case1: export default function(num1, num2) { return num1 + num2; }.

Curly Braces are used to import single(specific) property, whereas the word without braces is import entire object form that file.

Eg.,

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.

Export and Import, In the lesson about exporting and importing modules we learned that when we BUT, in the JavaScript Promises 6/11 lesson, they put curly braces around /​web/javascript/reference/statements/export#Using_the_default_export When using ES6 syntax, we use export default in place of module.exports . Default export (TypeScript, ES6) A module can also export one variable as the default export: export default function shortestPath(instructions) { }. This can be imported with the following syntax, without curly braces: import shortestPath from './shortestPath'; const distance = shortestPath('R2 R2 L3');

JavaScript Promises: 6/11, In this tutorial, you will learn about ES6 modules and how to export bindings from a module First, specify what to import inside the curly braces, which are called bindings. Note that you must use the import or export statement outside other  When should I use curly braces for ES6 import? (6) It seems to be obvious, but I found myself a bit confused about when to use curly braces for importing a single module in ES6. For example, in the React-Native project I am working on, I have the following file and its content: initialState.js

A Comprehensive Look at ES6 Modules, When to Use Curly Braces For Import. When you start to learn a new library like react, after going through a couple of tutorials and demo projects, you urge to  In modules, the general use case is that when you import there is usually braces since modules get imported as MODULE.function or MODULE.class. It'd be more intuitive to look at exports first: For exporting, it's using the syntactic sugar I mentioned before - you're exporting it as an object.

Use of Curly Brackets in import Statement, This project setup supports ES6 modules thanks to webpack. Learn more about ES6 modules: When to use the curly braces? Exploring ES6:  import React from 'react'; import { Component, PropTypes } from 'react'; The first being used to import and name the default export, the second to import the specified named exports. As a general rule, most modules will either provide a single, default export, or a list of named exports.

Comments

• Suggested reading 2ality.com/2014/09/es6-modules-final.html no need to ask this on SO
• Brief answer: this is es6 destructuring coming into play. var React will be assigned to everything exported from 'react', and var render will be assigned to the render property of whatever is exported from 'react-dom'
• Possible duplicate of When should I use curly braces for ES6 import?
• this answer seems very definitive... one default export plus multiple named exports (allowed per script file)... and then to import default export: no braces, import named export: has to use braces. Is one of the official reference developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ? (part of the ES6 standard)
• But why is it made this distinction between default and named :)?