Any difference between React.Component and Component?

Question

I have seen two ways of accessing Component:

import React from \'react\';

class Foo extends React.Component {
    ...
}

and

Answer 1

Short answer: no.

Looking at it from the other side might make understanding easier.

If you imagine the react module itself - it might look something like this.

export const Component = () => {};    // the component class/function

const React = { Component: Component };  // the main react object

export default React;

Notice the use of export.

The default export is React, so it is accessed (or imported) in another module like this:

import React from 'react';

Component is a named export: Component, and so is accessed in another module via:

import { Component } from 'react';

But in this case Component is also attached to the React object. So you could use the imports in any of the following ways:

import React, { Component } from 'react';

class MyComp extends React.Component {}
class MyOtherComp extends Component {}

A few other points worth mentioning:

• There can only be one default export per module, but you can export many variables.
• The default export can be named anything when you import it. For example import Cat from 'react';.
• You can rename named imports by doing the following: import { Component as Cat } from 'react';
• This behavior isn't specific to React, but is part of the ES6 module system.