Export (default) class in ReactJS

Question

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?

Answer 1

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({

})