I've moved this blog from Gatsby.js to Hugo. My build times have gone down from more than 7 minutes to a few seconds! The slow build times with Gatsby have been an ongoing concern for me. I've slowly been creeping towards Netlify's free 300-minutes-build-time cap. Hugo runs a magnitude faster, and it integrates well with Netlify. Hugo is a static site generator built with Golang. The project's selling points are incredible speed, ease of use, and the ability to configure tons of settings.

We've come quite far with our music player in ReasonReact. We created a React Context with state, a hook to manage the Context, and we started with our UI. In this post, we will create a component for the music player control buttons, and we will finally implement the functionality to play the track via the DOM API. You can find the complete code on GitHub. Create Player Controls Create src/PlayerControls.

Our goal is to create a music player with ReasonReact like this one: ☞ Demo. James King wrote the JavaScript version of the tutorial at upmostly. My blog post series is a port of the tutorial to ReasonML and ReasonReact. I encourage you to check out the original JavaScript tutorial if you're unsure about how useContext works. ReasonReact compiles (via BuckleScript) to React. We can leverage our existing React knowledge. We have all the power of React, but with the type-safety of OCaml, a mature language.

In the last post, we set up our project: a music player with useContext in ReasonReact. You can find the demo on GitHub pages and the full code on GitHub. The tutorial is a port from the React tutorial How to Use the useContext Hook in React by James King. Type-Driven Development ReasonReact is a statically typed language. We should now think about our data model and create types. That will help to flesh out our app's state.

What Are We Building? This tutorial will show you how to build a music player with ReasonReact and the useContext hook. You will learn how to bootstrap a ReasonReact project, how to build a simple application, and how to use hooks with ReasonReact. ☞ View Demo Why ReasonML and ReasonReact? ReasonReact provides a type-safe way to build React applications. It leverages the mature OCaml language that comes with a superb type system.

In the last post, we finally finished the custom useForm hook. You can see the code on GitHub. Use The Custom Hook Let's switch to our main form component: scr/Form.re. We need to connect the component to our custom hook. /* src/Form.re */ [@react.component] let make = (~formType) => { let logger = () => Js.log("Form submitted"); let (state, formRules, handleChange, handleSubmit) = UseForm.useForm(~formType, ~callback=logger); // JSX here }; So far, so good.

We set up our form validation rules, tackled state management and most of the logic. Now, we have to hook up our validation logic with the form. Each time a user types into the form, we want to update our validation rules immediately. We can then display the form validation status and give feedback to the user. The user should only be allowed to submit the form if all rules are valid.

What We've Done So Far We've laid the groundwork for adding form validation to our app. We defined our types; we have a simple form and a functioning useForm custom hook in a separate module. Create Form Rules And State Management Let's define our validation rules1. /* inside UseForm.re */ let registerFormRules: FormTypes.formRules = [| // (A) { id: 0, field: "username", message: "Username must have at least 5 characters.", valid: false, }, { id: 1, field: "email", message: "Email must have at least 5 characters.

What We've Done So Far So far, we've created a simple ReasonReact form with a custom useForm hook and client-side routing. The custom hook uses a useReducer to handle state and transitions. The state is a Reason Record, a type-safe immutable “object.” We first define a type for this record, then we create the initial state: type state = { username: string, email: string, password: string, }; let initialState = {username: "", email: "", password: ""}; The code for our custom hook looks very similar to JavaScript, but it uses some nice ReasonML features like pattern-matching.

Our reusable Form component works, but we don't have any routing. How can we navigate to our two forms (register and login)? Enter ReasonReact Router It's a breeze to set up the inbuilt ReasonReact Router. My forays into the world of React Router have been far more painful. /* src/App.re */ [@react.component] let make = () => { let url = ReasonReactRouter.useUrl(); switch (url.path) { | ["login"] => <Form formType="login"/> | ["register"] => <Form formType="register"/> | [] => <Main /> | _ => <NotFoundPage /> } } Yes, that's all (for development).