I am based in Singapore, have Javascript, React, ReasonMl, ReasonReact projects you'd like to discuss?
Recently I was working quite a bit on ReasonML / ReasonReact projects, and we moved from writing old approach of writing external CSS to inline-css with bs-emotion (using oCaml syntax directly). Its really easy to use css or sass / scss into ReasonReact components, you can import them the same way you import with from […]
With the latest ReasonReact update, finally support hooks, and new way of writing reasonReact with more functional approach is so much better, easier and fun. Lets try to begin with a new Component, Button.re, BTW, there are some API was replaced to new name space “React” from “ReasonReact”
|
1 2 |
[@react.component] let make = (~className) => <button className>"This is a button"->ReasonReact.string</button> |
As you can see above code, […]
A higher order component is basically a reusable component which allows you to takes in another component and return a new component. To recap about higher component check our my older post here In ReasoML higher order function are called “Functors” which takes in a module type and returns a module type, functors are written […]
Recently I was working on some reasonml/ReasonReact project which required to request data in JSON format from an API endpoint, well there are some BuckleScript decoders such https://github.com/glennsl/bs-json which is the more popular one,the way you decode is pretty easy:
|
1 2 3 4 5 6 7 8 9 10 11 |
point = { x: int, y: int }; let point = json => Json.Decode.{ x: json |> field("x", int), y: json |> field("y", int) }; |
you pass in the json and define the field in Json.Decode… at first it […]
fast piping allow you to transform your function code into more readable syntax, imaging you have human(person(age())) this is very inconvenience to see. with piping you can do it like this:
|
1 2 3 4 |
age ->person ->human |
which is exactly the same as human(person(age())) there are 3 different pipes as I understand you can do like
|
1 2 3 4 |
age |> person |> human |
or
|
1 |
human @@ age->person |
whats different […]
Recently I converted one of my old React project while studying React from Udacity sometime back, Since I am reading ReasonML recently so I thought I might as well convert to ReasonML language or ReasonReact, you can find it here. MyRead ReasonReact
Imaging if you need to access deep level of property and you are not sure that if such properties exists deep down, you are doing something like
|
1 |
books && books.book && books.book.authors && books.book.authors.author |
This is really difficult to read and understand sometime. there is something called optional chaining in javascript proposal which you can use if you include in babel-plugin-proposal-optional-chaining […]
Reason 101: variable assignment with let keyword cannot is immutable, but you can set it to mutable by assign to ref() example JS:
|
1 2 3 |
let count = 0; count ++; |
in reason:
|
1 2 3 4 5 |
/* let count = 0; this is immutable */ let count = ref(count); count := count ^ + 1; |
for string concat:
|
1 2 |
let stringConcat = “some string” ++ variable ++ “another string“; |
array in ReasonML is using [|”a”, “b”, “c”|] /* | = pipe symbol */
|
1 2 3 4 5 6 |
let test = [| “a”, “b”, “c” |]; |
and
|
1 2 3 4 5 6 |
list = [ “a”, “b”, “c” ]; |
list is immutable. in list you can […]
When you start to work with lots of React components, and you realised alot of component patterns are the same, then you want to reuse these component patterns which is where Higher Order Component(HOC) kicks in. Think of HOC as higher order function: usually you write function in Javascript:
|
1 2 3 4 |
const thisFunction = function(a, b) { return a + b; } thisFunction(1, 2); // return 3; |
Higher order function basically is […]
Recently Facebook has released the react 16.3 which bundled with a few awesome features including Context API and createRef(), I will talk abit about Context API since its quite hot topic. Context API its a feature that allows you to pass your data down to all child levels without passing props around like what you […]