@@ -3,7 +3,125 @@ id: example
33title : Example
44---
55
6- @todo
6+ As soon as you
7+ [ installed Reason React Native] ( /reason-react-native/en/docs/install/ ) properly
8+ and have you ` ./package.json ` and ` ./bsconfig.json ` ready, you can create two
9+ files:
10+
11+ - [ ` ./App.js ` ] ( #appjs ) : a proxy for React Native to reference Reason compiled
12+ app component
13+ - [ ` ./src/App.re ` ] ( #srcappre ) : the actual React Native entry point, using Reason
14+
15+ _ If you used our template as explained in th installation guide, you should
16+ already have theses files._
17+
18+ No worries, you can copy paste this if needed without understanding the content
19+ for now. Documentation will explain everything 😇.
20+
21+ ## ` ./App.js `
22+
23+ This can be you only JavaScript file if you want to be full ReasonML! It's just
24+ a proxy to ` App.re ` application wrapper.
25+
26+ ``` javascript
27+ /**
28+ * Do not modify this file - it is a proxy to your `App.re` file
29+ * located in the `src/` folder.
30+ */
31+ export { app as default } from " ./src/App.bs.js"
32+ ```
33+
34+ ## ` ./src/App.re `
35+
36+ ``` reason
37+ open ReactNative;
38+
39+ /*
40+ Here is StyleSheet that is using Style module to define styles for your components
41+ The main different with JavaScript components you may encounter in React Native
42+ is the fact that they **must** be defined before being referenced
43+ (so before actual component definitions)
44+ More at https://reasonml-community.github.io/reason-react-native/en/docs/apis/Style/
45+ */
46+ let styles =
47+ Style.(
48+ StyleSheet.create({
49+ "container":
50+ style(
51+ ~flex=1.,
52+ ~justifyContent=`center,
53+ ~alignItems=`center,
54+ ~backgroundColor="#F5FCFF",
55+ (),
56+ ),
57+ "welcome":
58+ style(~fontSize=20., ~textAlign=`center, ~margin=10.->dp, ()),
59+ "instructions":
60+ style(~textAlign=`center, ~color="#333333", ~marginBottom=5.->dp, ()),
61+ })
62+ );
63+
64+ [@react.component]
65+ let app = () =>
66+ <View style=styles##container>
67+ <Text style=styles##welcome>
68+ "Welcome to (Reason) React Native!"->React.string
69+ </Text>
70+ <Text style=styles##instructions>
71+ "To get started, edit src/App.re"->React.string
72+ </Text>
73+ <Text style=styles##instructions>
74+ {switch (Platform.os) {
75+ /*
76+ Instructions depends on the platform this code will run on
77+ More at https://reasonml-community.github.io/reason-react-native/en/docs/apis/Platform/
78+ */
79+ | os when os == Platform.ios =>
80+ "Press Cmd+R to reload,\n" ++ "Cmd+D or shake for dev menu"
81+ | os when os == Platform.android =>
82+ "Double tap R on your keyboard to reload,\n"
83+ ++ "Shake or press menu button for dev menu"
84+ | os when os == Platform.web => "Press Cmd+R to reload."
85+ | _ => ""
86+ }}
87+ ->React.string
88+ </Text>
89+ </View>;
90+ ```
91+
92+ ### Differences with React Native JavaScript
93+
94+ Beside Reason syntax that is a bit different with JavaScript, you may have
95+ noticed this major differences:
96+
97+ - Modules are not imported, but opened instead (without reference to the
98+ filesystem file) and this is due to
99+ [ how modules work in ReasonML] ( https://reasonml.github.io/docs/en/module )
100+ (** filename must be unique** ),
101+ - Component definition must be preceded with ` [@react.component] ` ,
102+ - ` const ` is not a thing in Reason, & ` let ` is the default as ReasonML have a
103+ specific way to allow mutable variables,
104+ - String in JSX must be quoted and explicitely referenced as ` React.string ` (you
105+ will find similar specific ` React.* ` to specify null value (` React.null ` ),
106+ children from an array ` React.array ` ...)
107+ - References to ` styles ` keys aren't using dot notation like in JavaScript but
108+ ` ## ` instead thanks to BuckleScript syntax sugar for
109+ [ direct JavaScript object access] ( https://bucklescript.github.io/docs/en/object-2#accessors )
110+ - You won't see any explicit ` export ` like in JavaScript. By default every
111+ variables defined in a ReasonML module is exposed.
112+
113+ ## Start this example
114+
115+ Now let's run this example.
116+
117+ In comparison with standard React Native development, the only thing you need to
118+ be sure that you have successfully compiled ` App.re ` as ` App.bs.js ` like we
119+ explained in the [ usage] ( /reason-react-native/en/docs/usage/ ) section.
120+
121+ As soon as ReasonML compilation is successful, nothing should change for your
122+ development process. You can normally start your React Native app via
123+ ` react-native run-ios ` , ` react-native run-android ` or your classic web workflow
124+ if you use ` react-native-web ` !
7125
8126---
9127
@@ -15,3 +133,4 @@ title: Example
15133
16134- [ Getting Started] ( /reason-react-native/en/docs/ )
17135- [ Install] ( /reason-react-native/en/docs/install/ )
136+ - [ Usage] ( /reason-react-native/en/docs/usage/ )
0 commit comments