ReasonML is based on the OCaml programming language and was created at Facebook, by the same creator as React! It shares a lot of features, but with the benefits of a statically typed functional programming language. ReasonML compiles to JavaScript and can therefore be used to create strongly typed React applications.

1. Using ReasonML In Your
Next React Project
React Amsterdam
25/10/2018

2. What is this about?

4. Who Am I?

5. Roy Derks
#javascriptEverywhere
#reactjs #ReactNative #GraphQL
@gethackteam

6. Who is this for?

7. Who is this for?

8. Why not just use JavaScript?

9. Types!!

10. TypeScript? Flow?

11. Let me show you..
By creating a ReasonReact Project

12. Installation

13. Stateless Components

14. Stateless Components

15. Stateless Components

16. Stateless Components

17. Stateless Components
React.createElement(Intro, {name: ‘React
Amsterdam’})

18. Strong Type System

19. Strong Type System

20. Strong Type System
We've found a bug for you!
my-react-app/src/Index.re 1:46
1 │ ReactDOMRe.renderToElementWithId(<Intro name=9 />, "intro");
This has type:
int
But somewhere wanted:
string

21. Strong Type System
We've found a bug for you!
my-react-app/src/Index.re 1:46
1 │ ReactDOMRe.renderToElementWithId(<Intro name=9 />, "intro");
This has type:
int
But somewhere wanted:
string

22. Strong Type System

23. Strong Type System
We've found a bug for you!
my-react-app/src/Index.re 3:28-36
1 │ let intro = <Intro
2 │ name="React Amsterdam"
3 │ visitors={["Visitor","Visitor","Visitor"]}
4 │ />;
5 │
This has type:
string
But somewhere wanted:
ReactTemplate.Intro.visitor (defined as ReactTemplate.Intro.visitor)

24. Strong Type System
We've found a bug for you!
my-react-app/src/Index.re 3:28-36
1 │ let intro = <Intro
2 │ name="React Amsterdam"
3 │ visitors={["Visitor","Visitor","Visitor"]}
4 │ />;
5 │
This has type:
string
But somewhere wanted:
ReactTemplate.Intro.visitor (defined as ReactTemplate.Intro.visitor)

25. Strong Type System

26. Strong Type System

27. Strong Type System

28. Statefull
Component

29. Statefull Component

30. Statefull Component
We've found a bug for you!
my-react-app/src/Intro.re 2:17-53
1 │ /* Intro.re */
2 │ let component = ReasonReact.reducerComponent("Intro");
3 │
4 │ type visitor = {name: string, id: int};
This seems to be a ReasonReact reducerComponent? We don't have all the type
info for its state. Make sure you've done the following:
- Define the component `make` function
- Define `reducer` in that `make` body
- Annotate reducer's second parameter (state) with the desired state type

31. Statefull Component

32. Statefull Component
We've found a bug for you!
my-react-app/src/Intro.re 5:18-24
3 │ /* State declaration */
4 │ type state = {
5 │ visitors: list(visitor)
6 │ };
7 │
This type constructor's parameter, `visitor`, can't be found. Is it a typo?

33. Statefull Component
We've found a bug for you!
my-react-app/src/Intro.re 5:18-24
3 │ /* State declaration */
4 │ type state = {
5 │ visitors: list(visitor)
6 │ };
7 │
This type constructor's parameter, `visitor`, can't be found. Is it a typo?

34. Statefull Component

35. Define state
Statefull Component

36. Define state
Define actions
Statefull Component

37. Define state
Define actions
Declare initial state
Statefull Component

38. Define state
Define actions
Declare initial state
Declare reducers
Statefull Component

39. Statefull Component

40. Statefull Component

41. Statefull Component

42. Statefull Component

43. Statefull Component

44. Statefull Component
Warning number 23
my-react-app/src/Intro.re 22:33-127
20 ┆ reducer: (action, state) =>
21 ┆ switch (action) {
22 ┆ | Add => ReasonReact.Update({...state, count: state.count + 1, visit
ors: [{name: "Visitor", id: state.count}, ...visitors]})
23 ┆ | Remove => ReasonReact.Update({...state, count: state.count - 1})
24 ┆ },
All the fields are already explicitly listed in this record. You can remove the `...` spread.

45. Statefull Component
Warning number 23
my-react-app/src/Intro.re 22:33-127
20 ┆ reducer: (action, state) =>
21 ┆ switch (action) {
22 ┆ | Add => ReasonReact.Update({...state, count: state.count + 1, visit
ors: [{name: "Visitor", id: state.count}, ...visitors]})
23 ┆ | Remove => ReasonReact.Update({...state, count: state.count - 1})
24 ┆ },
All the fields are already explicitly listed in this record. You can remove the `...` spread.

46. Statefull Component

47. Statefull Component

48. Looks cool right? But how
to use this inside a React
application?

49. CREATE REACT V2.0

52. Place a bsconfig.json
in the root of your
React project

53. Place a bsconfig.json
in the root of your
React project

54. Place a bsconfig.json
in the root of your
React project

55. Edit package.json
to use BuckleScript
and start compiling
on `npm start

56. Edit package.json
to use BuckleScript
and start compiling
on `npm start

57. Copy the Component
into the directory:
‘src/ReactComponents’

58. Copy the Component
into the directory:
‘src/ReactComponents’

59. Copy the Component
into the directory:
‘src/ReactComponents’

60. Add code to the
index of your
react app

61. Add code to the
index of your
react app

62. What else Reason has to offer?

63. If everything else fails,
paste some raw JavaScript
snippets right in your
Reason file

64. Want to learn more?
#javascriptEverywhere
https://reasonml.github.io/reason-react
https://github.com/royderks/reason-
react-app
@gethackteam