CODEWITHSUNDEEP
javascriptnode.jsreactjs
Eunice Chia
Eunice Chia

Reputation: 455

parentheses around import ES6

I'm learning React Native, just curious about the parentheses in the first line of import 

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

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world</Text>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

Why wrap Component with {} but not React?

Upvotes: 0

Views: 316

Answers (2)

Tom Fenech
Tom Fenech

Reputation: 74645

React is the default export (there can only be one of these per module). Default exports can be imported like this:

import React from "react";

Component is a named export (there can be many of these). Named exports are imported like this:

import { Component } from "react";

What you're seeing is both of these things imported on the same line.

default exports aren't automatically available everywhere, so they still need importing.

Note that the reason React needs importing at all is because of the way that JSX is transformed into JS - React needs to be available so <Text> can be transformed into React.createElement(Text, ....

Upvotes: 4

Alejandro Moreno
Alejandro Moreno

Reputation: 111

I think it's just a matter of shorting the next invocations, since Component is a subclass of React, so that way you use React as default with all it has in it. and Component as a single class you'd use. By the way you use braces in import when you want something specific as a method or class, that is named export. There's a better explanation in here. Having both named exports and a default export in a module

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';

export default class MyNavbar extends React.Component {
    render(){
      return (
        <Navbar className="navbar-dark" fluid>
        ...
        </Navbar>
      );
    }
}

Upvotes: 0

Related Questions