When should I write {} surround a imported thing?

Question

Please take a look at these:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

As you see, it imports something, but why React is out of {} and all others are into it? {Component} { AppRegistry, Text, View }

Anyway, when should I wrap something into {} ?

Answer 1

The difference is in how the file exports, without {} is the default export. There can only ever be one default export.

Anything inside the {} is part of a named exported function, class, or variable that is exported.

If you look at the react source code you will find the following es5 code.

var ReactComponent = require('./ReactComponent');
...

var React = {
  ...
  Component: ReactComponent,
  ...
}

module.exports = React;

When you import React, { Component } you are importing all of React along with React.Component as Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Becomes

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

This is commonly used to destructure an object like the following.

const person = {
  firstName: 'John',
  lastName: 'Doe',
};

const { firstName } = person;

Which is the same as

person.firstName

Answer 2

When you

export default MyComponent // import MyComponent
export MyComponent // import { MyComponent }