(02) 8006 0506

ES6 Imports + Exports

When using a framework such as React, which organises code into various components, it is vital to have a neat way to share code between components. One of the earlier specifications for managing this was using the commonjs syntax, which was pioneered by require.js and browserify. The syntax is similar to this:

// Here is an function
var x = function() {

// Here we export it
module.exports = x;
// And here we import it
var x = require('x');

ES6 comes with it's own syntax for managing imports and exports, and it works as follows:

// Here is a function
// We export it here too
export default function x () {

// And here we import it
import x from 'path';

Which syntax do you prefer? Unfortunately it is less about preference, and more about necessity at the moment, as the latest versions of React and React Native have deprecated the require syntax, and encourage you to use the ES6 methodology.

Joe Logan

Feb 14 2017