Home /

📝 ReasonML Applications for the React Developer egghead Collection Notes

Use BuckleScript to get up and running in a new ReasonReact project

  • bsb -init name-of-app -theme react to init a Reason React app
  • npm install && npm run start
  • We will also need to run webpack -w

Implement a Sticky Footer within a ReasonReact App Using the bs-css BuckleScript Package

  • yarn add bs-css
  • add bs-css to bs-dependencies in bsconfig.json
  • open Css to access the functions in that module
  • open Styles; in any component file you want to access the style modules we defined

Create a Layout Component for Displaying Child Components Inside of a ReasonReact App

  • use the[@react.component] decorator
  • use named arguments to access props ~children
  • ReasonReact.string to render a string to the page.

Up and Running with React Hooks inside of a ReasonML

  • npm i -g bs-platform
  • bsb -init generates a bucklescript project
  • bsb -init reason-react-app -theme react-hooks

Migrate an Existing BuckleScript Project to bs-platform v7

  • from version 5 to 7, theres no code in the video that you need to change

Use ReasonMLs Variant & Record types with ReasonReact's useReducer hook to Manage State

type state = {
count: int,
incrementValue: int,
}
type action = Click | UpdateIncrementValue | AddIncrementValue
  • You can use Reacts useReducer method with these types
let (state, dispatch) =
React.useReducer(
(state, action) =>
switch (action) {
| Click => {...state, count: state.count + 1}
| UpdateIncrementValue => {
...state,
incrementValue: state.incrementValue + 1,
}
| AddMany => {
count: state.count + state.incrementValue,
incrementValue: 0,
}
},
{count: 0, incrementValue: 0},
);