Menu
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?
558
You no longer need to import React from "react" . Starting from the release 17 of React, JSX is automatically transformed without using React. createElement .
One of the major differences between require() and import() is that require() can be called from anywhere inside the program whereas import() cannot be called conditionally, it always runs at the beginning of the file. To use the require() statement, a module must be saved with . js extension as opposed to .
createElement method. But, React has introduced a new JSX transform with the release of React 17 which automatically transforms JSX without using React. createElement . This allows us to not import React, however, you'll need to import React to use Hooks and other exports that React provides.
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.
124
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 };.
22
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
