Write better React (v3 ReasonReact)

@coding_lawyer
let fizzbuzz = (i) =>
switch (i mod 3, i mod 5) {
| (0, 0) => "FizzBuzz"
| (0, _) => "Fizz"
| (_, 0) => "Buzz"
| _ => string_of_int(i)
};
for (i in 1 to 100) {
Js.log(fizzbuzz(i))
};

View Slide

@coding_lawyer
compiler

View Slide

@coding_lawyer
function fizzbuzz(i) {
var match = i % 3
var match$1 = i % 5
if (match !== 0) {
if (match$1 !== 0) {
return String(i)
} else {
return 'Buzz'
}
} else if (match$1 !== 0) {
return 'Fizz'
} else {
return 'FizzBuzz'
}
}
for (var i = 1; i <= 100; ++i) {
console.log(fizzbuzz(i))
}
let fizzbuzz = (i) =>
switch (i mod 3, i mod 5) {
| (0, 0) => "FizzBuzz"
| (0, _) => "Fizz"
| (_, 0) => "Buzz"
| _ => string_of_int(i)
};
for (i in 1 to 100) {
Js.log(fizzbuzz(i))
};

View Slide

@coding_lawyer
JavaScript interop

View Slide

@coding_lawyer

View Slide

@coding_lawyer
Reason is compatible with React

View Slide

@coding_lawyer
Reason is compatible with React
React was developed for Reason

View Slide

@coding_lawyer
adjusted JavaScript to React’s needs

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer
semantics
Javascript-like syntax

View Slide

@coding_lawyer
safer React

View Slide

@coding_lawyer
“[Reason] is the best way to take
React to the next level”
Jordan Walke, creator of Reason, React

View Slide

@coding_lawyer
Tic Tac Toe

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
components

View Slide

@coding_lawyer
stateless component

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
[@react.component]
let make = (~title) !=>

{React.string(title)}
!

!;

View Slide

@coding_lawyer
[@react.component]

!

!;

View Slide

@coding_lawyer
[@react.component]

!

!;

View Slide

@coding_lawyer
[@react.component]

!

!;

View Slide

@coding_lawyer
stateful component

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
[@react.component]
let make = () !=> {
let (state, dispatch) =
React.useReducer(
(state: state, action: action) !=>
switch (action) {
| Restart !=> …
| ClickSquare((id: string)) !=> …
},
{ board: […], gameState: Playing(Cross) },
);

state
onRestart={_evt !=> dispatch(Restart)}
onMark={id !=> dispatch(ClickSquare(id))}
!/>
!;};

View Slide

@coding_lawyer
[@react.component]
let make = () !=> {
React.useReducer(
switch (action) {
| Restart !=> …
},
);

state
!/>
!;};

View Slide

@coding_lawyer
[@react.component]
let make = () !=> {
React.useReducer(
switch (action) {
| Restart !=> …
},
);

state
!/>
!;};

View Slide

@coding_lawyer
[@react.component]
let make = () !=> {
React.useReducer(
switch (action) {
| Restart !=> …
},
);

state
!/>
!;};

View Slide

@coding_lawyer
[@react.component]
let make = () !=> {
React.useReducer(
switch (action) {
| Restart !=> …
},
);

state
!/>
!;};

View Slide

@coding_lawyer
[@react.component]
let make = () !=> {
React.useReducer(
switch (action) {
| Restart !=> …
},
);

state
!/>
!;};

View Slide

@coding_lawyer
[@react.component]
let make = () !=> {
React.useReducer(
switch (action) {
| Restart !=> …
},
);

state
!/>
!;};

View Slide

@coding_lawyer
[@react.component]
let make = () !=> {
React.useReducer(
switch (action) {
| Restart !=> …
},
);

state
!/>
!;};

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
[@react.component]
let make = () !=> {
React.useReducer(
switch (action) {
| Restart !=> …
},
);

state
!/>
!;};

View Slide

@coding_lawyer
[@react.component]
let make = () !=> {
React.useReducer(
switch (action) {
| Restart !=> …
},
);

state
!/>
!;};

View Slide

@coding_lawyer
React.useReducer(
switch (action) {
| Restart !=> initialState
| ClickSquare((id: string)) !=>
let updatedBoard = updateBoard(
state.board,
state.gameState,
id);
let updatedGs = checkGameState3x3(
updatedBoard,
state.board,
state.gameState);
{
board: updatedBoard,
gameState: updatedGs,
};}, …);

View Slide

@coding_lawyer
React.useReducer(
switch (action) {
state.board,
state.gameState,
id);
updatedBoard,
state.board,
state.gameState);
{
};}, …);

View Slide

@coding_lawyer
[@react.component]
let make = () !=> {
React.useReducer(
switch (action) {
| Restart !=> …
},
);

state
!/>
!;};

View Slide

@coding_lawyer
old syntax (v2)
vs
new syntax (v3)

View Slide

@coding_lawyer
[@react.component]

!

!;
new syntax (v3)

View Slide

@coding_lawyer
let component = ReasonReact.statelessComponent("App");
let make = (~title, _children) => {
...component,
render: _self =>

(ReasonReact.string(title))

,
};
old syntax (v2)

View Slide

@coding_lawyer
let component =
ReasonReact.statelessComponent("App");
let make = (~title, _children) => {
...component,
render: _self =>

(ReasonReact.string(title))

,
};
old syntax (v2) var component = ReasonReact.statelessComponent("App");
function make(title, _children) {
return !/* record !*/[
!/* debugName !*/component[!/* debugName !*/0],
!/* reactClassInternal !*/component[!/* reactClassInternal !*/1]
!/* handedOffState !*/component[!/* handedOffState !*/2],
!/* willReceiveProps !*/component[!/* willReceiveProps !*/3],
!/* didMount !*/component[!/* didMount !*/4],
!/* didUpdate !*/component[!/* didUpdate !*/5],
!/* willUnmount !*/component[!/* willUnmount !*/6],
!/* willUpdate !*/component[!/* willUpdate !*/7],
!/* shouldUpdate !*/component[!/* shouldUpdate !*/8],
!/* render !*/(function (_self) {
return React.createElement(
“div",
undefined,
React.createElement(
"div", { className: “title" },
title),
React.createElement(Game.make, { })
);
}),
!/* initialState !*/component[!/* initialState !*/10],
!/* retainedProps !*/component[!/* retainedProps !*/11],
!/* reducer !*/component[!/* reducer !*/12],
!/* jsElementWrapped !*/component[!/* jsElementWrapped !*/13]
];
}
exports.component = component;
exports.make = make;

View Slide

@coding_lawyer
function App(Props) {
var title = Props.title;
“div",
undefined,
title),
);
}
var make = App;
new syntax (v3)
[@react.component]

!

!;

View Slide

@coding_lawyer
const App = (Props) !=> (

{React.string(Props.title)}
!

!;
)
var make = App;
new syntax (v3)
[@react.component]

!

!;

View Slide

@coding_lawyer
var component = ReasonReact.statelessComponent("App");
function make(title, _children) {
return !/* record !*/[
!/* debugName !*/component[!/* debugName !*/0],
!/* reactClassInternal !*/component[!/* reactClassInternal !*/1],
!/* handedOffState !*/component[!/* handedOffState !*/2],
!/* willReceiveProps !*/component[!/* willReceiveProps !*/3],
!/* didMount !*/component[!/* didMount !*/4],
!/* didUpdate !*/component[!/* didUpdate !*/5],
!/* willUnmount !*/component[!/* willUnmount !*/6],
!/* willUpdate !*/component[!/* willUpdate !*/7],
!/* shouldUpdate !*/component[!/* shouldUpdate !*/8],
!/* render !*/(function (_self) {
“div",
undefined,
title),
);
}),
!/* initialState !*/component[!/* initialState !*/10],
!/* retainedProps !*/component[!/* retainedProps !*/11],
!/* reducer !*/component[!/* reducer !*/12],
!/* jsElementWrapped !*/component[!/* jsElementWrapped !*/13]
];
}
exports.component = component;
const App = (Props) !=> (

{React.string(Props.title)}
!

!;
)
var make = App;
new syntax (v3) old syntax (v2)

View Slide

@coding_lawyer
type system

View Slide

@coding_lawyer
clearer and safer code

View Slide

@coding_lawyer
superior to Flow and TypeScript

View Slide

@coding_lawyer
type inference

View Slide

@coding_lawyer
!/* type inference by the compiler !*/
let plus = (a, b) !=> a + b

View Slide

@coding_lawyer
!/* type inference by the compiler !*/
let plus = (a, b) !=> a + b
!/* (int, int) !=> int !*/

@coding_lawyer

@coding_lawyer
pattern matching

View Slide

@coding_lawyer
Game
Board
App
BoardRow
Square

View Slide

@coding_lawyer
React.useReducer(
switch (action) {
state.board,
state.gameState,
id);
updatedBoard,
state.board,
state.gameState);
{
};}, …);

View Slide

@coding_lawyer
let updateBoard = (board: board, gameState: gameState, id) =>
board
|> List.mapi((ind: int, row: row) =>
row
|> List.mapi((index: int, value: field) =>
string_of_int(ind) ++ string_of_int(index) === id
? switch (gameState: gameState, value: field) {
| (Playing(_), Marked(_)) => value
| (Playing(player), Empty) => Marked(player)
| (_, _) => Empty
}
: value
)
);

View Slide

@coding_lawyer
let updateBoard = (board: board, gameState: gameState, id) =>
board
|> List.mapi((ind: int, row: row) =>
row
|> List.mapi((index: int, value: field) =>
string_of_int(ind) ++ string_of_int(index) === id
? switch (gameState: gameState, value: field) {
| (_, _) => Empty
}
: value
)
);

View Slide

View Slide

@coding_lawyer
/* determines the value of the clicked square */
switch (gameState: gameState, value: field) {
| (_, _) => Empty
}

View Slide

@coding_lawyer
| (_, _) => Empty
}

View Slide

@coding_lawyer
| (_, _) => Empty
}

View Slide

@coding_lawyer
| (_, _) => Empty
}

View Slide

@coding_lawyer
| (_, _) => Empty
}

View Slide

@coding_lawyer
| (_, _) => Empty
}

View Slide

@coding_lawyer
| (_, _) => Empty
}

View Slide

@coding_lawyer
/* | (_, _) => Empty */
}

View Slide

@coding_lawyer

View Slide

@coding_lawyer
switch (
getWinner(flattenBoard, head),
gameEnded(flattenBoard),
tail,
) {
| (Cross, _, _) => Winner(Cross)
| (Circle, _, _) => Winner(Circle)
| (_, true, []) => Draw
| (_, false, []) => whosPlaying(gameState)
| _ => check(tail)
};

View Slide

@coding_lawyer
switch (match$1) {
case 0 :
return /* Winner */Block.__(1, [/* Cross */0]);
case 1 :
return /* Winner */Block.__(1, [/* Circle */1]);
case 2 :
if (match$2) {
if (tail) {
_rest = tail;
continue ;
} else {
return /* Draw */0;
}
} else if (tail) {
_rest = tail;
continue ;
} else {
return whosPlaying(gameState);
}
}

Write better React (v3 ReasonReact)

Write better React (v3 ReasonReact)

David Kopal

More Decks by David Kopal

Other Decks in Technology

Featured

Transcript