How is Component exported with React? Named vs Default

0
votes

I've seen this syntax in many files:

import React, {Component} from react;

I understand how named exports and default exports work separately but I'm not sure how React handles this when it is exporting it's code.

For instance is the default React export an object which contains the Component as a named export function? which is why you can use the React.Component dot notation?

1
javascriptreactjsecmascript-6module
Maybe this file answers your question: github.com/facebook/react/blob/master/packages/react/src/… – Claire Lin
"is the default export an object" - yes. "…which contains the Component" - yes. "…as a named export" - uh, no, an object contains object properties not named exports? – Bergi
@ClaireLin It really worths to make a separate answer for it. I would upvote – kind user
@Bergi So are the properties of an object in this case implicitly exported so they can be used as named imports? I hadn't come across this in a few tutorials I read on modules. – j obe
@jobe No, there is nothing implicit in modules, if you want to export something both as a property of a default-exported object and as a named export then you need to do so explicitly. However, it seems React doesn't use ES6 exports at all and relies on a transpiler figuring out the imports. React is a really bad example of ES6 module usage, they were an early adopter when best practices weren't completely figured out, and now they can't change what they're doing for backwards compatibility. – Bergi

1 Answers

0
votes

As you mentioned React is the default module export, and Component is contained by React module. So you can use Component by doing method invocation React.Component or you can import using import {Component} as a separated function into the current scope.

Edit: take a look at line 17 on the React GitHub. It's already imported into the React.js so that's why you can import the module in different ways.

import {Component, PureComponent} from './ReactBaseClasses';