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?
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.
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 };.
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.
Related
I was new to react native and i want to create the react native project with JavaScript, but whenever i create a project with react native 0.71, not the expo... it gets created with typescript, is there any way we can change it to JavaScript?
React-Native now ships with TypeScript automatically with version 0.71.
I highly recommend using TypeScript though, since it can make programming react-native projects more pleasant and has many advantages.
However, if you want to stay on JavaScript, you can convert the pre-created components to .js instead of .tsx and remove all types used.
I discovered that two EcmaScript 6 Unicode functions work in my React Native app in Android but not iOS.
codePointAt() and fromCodePoint()
Since Babel is a transpiler that's supposed to make ES6 syntax available on to various JavaScript engines, is this omission a bug in Babel?
Or does Babel have some more subtle concept of subsets of ES6 of which React Native does not by default include this part?
So is this lack a bug? Should I report it to Babel or to React Native?
(Yes I've rolled my own polyfill for now, so this question is only about whether having to do this is a bug.)
I know there is some sort of relationship between React Native and Babel.
What I'm not sure of is whether it's just there if I want to use it and I must enable it somehow, or whether RN always transpiles with Babel.
It must be transpiling one way or another since RN uses JSX, which is not native to any JS engine.
That makes me think it's unlikely that there would be multiple transpilation paths, one for just JSX and one for the Babel+JSX combo.
The reason I ask is because I found a newish JS function String.fromCodePoint() that works on Android but not iOS.
Is this because the transpilation doesn't try to cover all modern JS features? Because it's a bug I should report? Something that the regular React Native transpiler doesn't handle but the Babel one would?
What exactly is the magnitude of my misunderstanding? (-:
Your'e right. React Native does get transpiled using Babel. You can see here all the babel transformers used for react native.
I don't believe you can avoid using babel, but if you wish to add transformers and plugins, you could, using you own .babelrc file. However, you'd still need the transformers which React Native uses, so to make it easier you could just use the react-native babel preset, which bundles for you all the transformers required by react-native. Additional transformers you would need to install and configure on your own.
I am trying to use SliderButton, I recently installed slider-button in my terminal,
npm install --save react-native-slider-button
and tried to import it, but somehow it did not work.
on website, I am supposed to write
var SliderButton = require("react-native-slider-button");
but my react-native is latest ver so i am guessing that I probably should not use require, how do I write code with using "import"?
You can replace require with import by placing the following at the top of your file:
import SliderButton from "react-native-slider-button"
export default class MyComponent extends Component {
...
}
You can't really just "import" this particular component. It was written using an earlier implementation of JS called CommonJS which is used in NodeJS. React Native now uses ES6 for module management. The SliderButton Component is a little problematic. First, it uses the CommonJS module syntax inside the component itself, including loading React and React Native in ways that are no longer supported. So parts of this module would have to be rewritten to work with current versions of react native. You could roll back to a previous react native version that supports CommonJS, or you could modify the Component to use the ES6-style module importation.
I have a library that is written in TypeScript, that then has been compiled into one js file as an amd module.
I'm then trying to import { Stuff } from 'that/library'
but get an error message: Can't find variable: define;
can I not used AMD modules to import into my RN app?
bonus question: what bundling mechanism is used under the bonnet in react-native, it's clearly not Webpack..? and what types of modules are supported.
edit: just tried to recompile my library as System type module, that does not get recognised either react native: can't find variable: System;
React Native uses it's own packager, which relies on CommonJS (and ES6 Imports, transpiled by babel to, you guessed it, CommonJS). This answers both questions, UMD is not supported. There are different starter kits using webpack, though, if you would like to use it, for example this one.