31

Does React Native use require or import?

All I can find is an old tutorial using require(), but when I run react-native init, I'm getting a project that uses import. Is this due to recent changes in React Native?

What are the main differences?

Ronan Boiteau
  • 9,608
  • 6
  • 34
  • 56
Won Jun Bae
  • 5,140
  • 6
  • 43
  • 49

3 Answers3

26

Yes the latest React Native tutorials and examples use the new import syntax.

https://facebook.github.io/react-native/docs/tutorial.html

In terms of the differences between CommonJS (require) and ES6 modules (import), there are some good answers here:

Using Node.js require vs. ES6 import/export

I think most people prefer the new ES6 syntax. However no JS engines implement ES6 modules currently, so it needs to be converted by an ES6 transpiler (e.g. Babel) to require statements. React Native is setup to do this out of the box, so you can just start using import and it should just work.

Community
  • 1
  • 1
Keeth
  • 2,100
  • 2
  • 21
  • 29
9

The main difference is, that import is ECMAScript 6 syntax and require is ECMAScript 5. Both are interchangeable, but import has a nice syntax for renaming: export { MY_CONST as THE_CONST, myFunc as theFunc };.

Daniel Schmidt
  • 11,605
  • 5
  • 38
  • 70
5

React Native now uses Babel for "modules" compilation (doc). If scaffold an app with create-react-native-app, in folder node_modules, there is the Babel plugin named

babel-plugin-transform-es2015-modules-commonjs

, which is referenced across the app.

As name implies, this plugin just transforms ES2015 modules syntax to CommonJS.

For the main differences, I like this answer appearing in another post.

themefield
  • 3,847
  • 30
  • 32