Example
As soon as you installed Reason React Native properly and have you ./package.json and ./bsconfig.json ready, you can create two files:
./App.js: a proxy for React Native to reference Reason compiled app component
./src/App.re: the actual React Native entry point, using Reason
If you used our template as explained in the installation guide, you should already have these files.
No worries, you can copy paste this if needed without understanding the content for now. Documentation will explain everything 😇.
This can be you only JavaScript file if you want to be full ReasonML! It's just a proxy to App.re application wrapper.
/**
* Do not modify this file - it is a proxy to your `App.re` file
* located in the `src/` folder.
*/
export { app as default } from "./src/App.bs.js";Please directly grab the App.re of our template, which will match React Native default Hello World!
Beside Reason syntax that is a bit different with JavaScript, you may have noticed this major differences:
Modules are not imported, but opened instead (without reference to the filesystem file) and this is due to how modules work in ReasonML (filename must be unique),
Component definition must be preceded with [@react.component],
const is not a thing in Reason, & let is the default as ReasonML have a specific way to allow mutable variables,
String in JSX must be quoted and explicitely referenced as React.string (you will find similar specific React.* to specify null value (React.null), children from an array React.array...)
References to styles keys aren't using dot notation like in JavaScript but ## instead thanks to ReScript syntax sugar for direct JavaScript object access
You won't see any explicit export like in JavaScript. By default every variables defined in a ReasonML module is exposed.
Now let's run this example.
In comparison with standard React Native development, the only thing you need to be sure that you have successfully compiled App.re as App.bs.js like we explained in the usage section.
As soon as ReasonML compilation is successful, nothing should change for your development process. You can normally start your React Native app via react-native run-ios, react-native run-android or your classic web workflow if you use react-native-web!