what is the difference between import and const and which is preferred in commonjs

javascript node.js reactjs babeljs commonjs
svnm picture svnm · Jan 5, 2016 · Viewed 12.3k times · Source

I have noticed a bit of switching between using const and import for referencing libraries in node.js applications using es6 syntax with Babel.

What is the preferred method and what is the difference between using const and import? Assuming you may be importing the same library in many files/components.

const

const React = require('react')

import

import React from 'react'

Here are the definitions of each but I am still not sure which to use.

import

The import statement is used to import functions, objects or primitives that have been exported from an external module, another script, etc.

const

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

Answer

zerkms picture zerkms · Jan 5, 2016

What is the preferred method and what is the difference between using const and import?

In 2016 it makes sense to stick with the import since that's the part of the standard.

There is no technical reason to prefer import over require though: everything that can be done using require can be done with import and vice versa. In some cases one will be more concise, in another - the other.

To summarise: choose the one that fits the project code conventions/consistency.

Related questions

Reactjs - Form input validation

My Contact page form is as follows, <form name="contactform" onSubmit={this.contactSubmit.bind(this)}> <div className="col-md-6"> <fieldset> <input ref="name" type="text" size="30" placeholder="Name"/> <br/> <input …

Read More
React - changing an uncontrolled input

I have a simple react component with the form which I believe to have one controlled input: import React from 'react'; export default class MyForm extends React.Component { constructor(props) { super(props); this.state = {} } render() { return ( <form className="add-support-staff-form"&…

Read More
"React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>

I have the following render method in my React Native code: render() { const {height, width} = Dimensions.get('window'); return ( <View style={styles.container}> <Image style={{ height:height, width:width, }} source={require('image!foo')} resizeMode='cover' /> <…

Read More