javascript - import React, { Component } from 'react'; What is the {} part? - Stack Overflow

admin管理员组

文章数量:1344235

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

Share Improve this question Follow asked Sep 30, 2015 at 23:19 Joshua KellyJoshua Kelly 1,06399 silver badges1212 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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'

本文标签： javascriptimport React Componentfrom 39react39 What is thepartStack Overflow