Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
99
rated 0 times [  101] [ 2]  / answers: 1 / hits: 60397  / 9 Years ago, sun, january 17, 2016, 12:00:00

If I'm creating a component, it seems you can create a class in a lot of different ways. What is the difference between these? How do I know which one to use?



import React, {Component} from 'react'

export default class Header extends Component {

}

export const Header = React.createClass({

})

export default React.createClass({

})


I'm just assuming they do different things, or is it just different syntax?



If someone could give me a quick explanation, or a link, I would really appreciate it. I don't want to start out with a new framework not knowing exactly what the difference is.


More From » syntax

 Answers
23

Hi and welcome to React!



I think part of what you're having trouble with here is not really React-specific, but instead related to the new ES2015 module syntax. When creating React class components, for most intents and purposes you can think of React.createClass as functionally equivalent to class MyComponent extends React.Component. One is just using the new ES2015 class syntax whereas the other is using the pre-ES2015 syntax.



For learning about modules, I'd recommend reading a few articles on the new module syntax to get familiar with it. Here's a good one to start with: http://www.2ality.com/2014/09/es6-modules-final.html.



So in short, these are just differences in syntax, but I'll attempt to do a quick walk-through:



/**
* This is how you import stuff. In this case you're actually
* importing two things: React itself and just the Component
* part from React. Importing the Component part by itself makes it
* so that you can do something like:
*
* class MyComponent extends Component ...
*
* instead of...
*
* class MyComponent extends React.Component
*
* Also note the comma below
*/
import React, {Component} from 'react';


/**
* This is a default export. That means when you import
* this module you can do so without needing a specific module
* name or brackets, e.g.
*
* import Header from './header';
*
* instead of...
*
* import { Header } from './header';
*/
export default class Header extends Component {

}

/**
* This is a named export. That means you must explicitly
* import Header when importing this module, e.g.
*
* import { Header } from './header';
*
* instead of...
*
* import Header from './header';
*/
export const Header = React.createClass({

})

/**
* This is another default export, only just with a
* little more shorthand syntax. It'd be functionally
* equivalent to doing:
*
* const MyClass = React.createClass({ ... });
* export default MyClass;
*/
export default React.createClass({

})

[#63684] Friday, January 15, 2016, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
pranavrorys

Total Points: 466
Total Questions: 87
Total Answers: 115

Location: Barbados
Member since Sun, Nov 27, 2022
2 Years ago
pranavrorys questions
Fri, May 27, 22, 00:00, 2 Years ago
Thu, Oct 28, 21, 00:00, 3 Years ago
Sat, May 30, 20, 00:00, 4 Years ago
Fri, Dec 20, 19, 00:00, 5 Years ago
;