CODEWITHSUNDEEP
javascript
Joshua Kelly
Joshua Kelly

Reputation: 1063

import React, { Component } from 'react'; What is the {} part?

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.

Upvotes: 3

Views: 5702

Answers (2)

greeneley
greeneley

Reputation: 117

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'

Upvotes: 2

blackeyebeefhorsefly
blackeyebeefhorsefly

Reputation: 1949

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.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Upvotes: 10

Related Questions