CODEWITHSUNDEEP
javascriptreactjs
rizvified
rizvified

Reputation: 319

Difference in creating react components

I've often seen people using two different ways of making a component

import React from 'react';

class Alpha extends React.Component {
  render(){
   ...
  }
}

or

import React, { Component } from 'react';

class Alpha extends Component {
  render(){
   ...
  }
}

which is a better way? and what are the differences in these two methods?

Upvotes: 0

Views: 48

Answers (3)

I am L
I am L

Reputation: 4632

They're both the same, I guess the better one is the second one because of it's simplicity.

Basically if your say:

import React from 'react';

you're importing the "default" exported value from that file:

export default function React() {...}

But if you're doing:

import { Component } from 'react';

you are importing the exported value directly.

export function Component() {...}

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074148

which is a better way?

Neither, or both; e.g., it makes no difference.

and what are the differences in these two methods?

The only difference is that in the second example, there's an in-scope Component identifier in the module, and in the first case there isn't. It's very much like you'd written:

import React from 'react';
const Component = React.Component;

(Very much like, but not exactly the same, or at least not once true modules are supported by JavaScript engines.)

It's a matter of style which you use.

Upvotes: 2

Fadi Abo Msalam
Fadi Abo Msalam

Reputation: 7197

the ES6 there is a feature called object Destructuring

{ Component } from 'react' is equal to react.component so they are both the same let me 

let node = {
    type: "Identifier",
    name: "foo"
};

let { type, name } = node;//var type=node.type && var name =node.name


console.log(type);      // "Identifier"
console.log(name);      // "foo"

Upvotes: 0

Related Questions