How To Create a Music Player in Reason With The useContext Hook Part 4

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.
Read more →

How To Create a Music Player in Reason With The useContext Hook Part 3

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.
Read more →

How To Create a Music Player in Reason With The useContext Hook Part 2

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.
Read more →

How To Create a Music Player in Reason With The useContext Hook Part 1

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.
Read more →

Learning ReasonReact Step by Step Part: 10

Here are some reflections on my path to creating a first ReasonReact application. ReasonReact is still React ReasonReact's API stays as close as possible to React. As you know, ReasonML is a syntax and build chain for OCaml, but it compiles to JavaScript (and React.js). You can use your previous knowledge of building React applications. However, ReasonReact ships with the underlying assumptions of React and React hooks: one-way data binding, handling derived state or synchronizing state, the complexities of life-cycle management, useEffect, etc.
Read more →

Fast Node Management With fnm

fnm offers a speedy alternative to the Node.js manager NVM. Built with native ReasonML, it's significantly faster than NVM. fnm Setup Here's how I set it up on an Arch-based Linux system that uses the Fish shell as an interactive shell. Use the installation script from fnm: $ curl -fsSL https://github.com/Schniz/fnm/raw/master/.ci/install.sh | bash The command downloads fnm, installs it and adds a loader to bash. The installation script above adds the following lines to .
Read more →

Learning ReasonReact Step by Step Part: 9

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.
Read more →

Learning ReasonReact Step by Step Part: 8

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.
Read more →

Learning ReasonReact Step by Step Part: 7

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.
Read more →

Learning ReasonReact Step by Step Part: 6

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.
Read more →