Pretty simple, can someone explain to me what the part between the curly braces is?

I understand you add it and then you can remove React from say "extends React.Component" but not sure what the use of it is or the reasoning behind it.

Pretty simple, can someone explain to me what the part between the curly braces is?

I understand you add it and then you can remove React from say "extends React.Component" but not sure what the use of it is or the reasoning behind it.

• javascript

• What are you not understanding? you wrote so yourself, it allows you to remove boilerplate. – Amit Commented Sep 30, 2015 at 23:37
• is that all it is for though? I wanted to try and get a bit more theory on it. – Joshua Kelly Commented Oct 1, 2015 at 0:07

2 Answers 2

It basically just allows you to import a single member if you require. In the case you provided it may not be as useful as other ones. For example:

// constants.js
export const TEST_CONST = 'HOLA';
export const OTHER_TEST_CONST = 'YO';

// someFile.js
import { TEST_CONST } from './constants';

console.log(TEST_CONST); // output: 'HOLA'

Hope that helps a little. Theres also great description of the module system on MDN.

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Statements/import

Basically, if your module have only single export => you can export without the curly brackets. In contrast, you need use it when your module have multi export.

/module1.tsx
const App { render () {...}};
export default App; 

==> import App from {'./module1.tsx'}

/module2.tsx
export const App1 { render () {...}};
export const App2 { render () {...}};

==> import { App1 } from './module2.tsx'