Learning ReasonReact Step by Step Part: 5

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

Learning ReasonReact Step by Step Part: 4

So far, we've created a simple form component with a useReducer hook. This form works with an email and a password - it could be a login form. But what if we would like to use the same logic to create a register form, too? Make The Form Component Re-Usable With a Custom Hook We know the shape of our data: we have three form fields: email, password, and username. We will only show the username field on the register page.
Read more →

Learning ReasonReact Step by Step Part: 3

In my last post I tried to create a custom hook function for React forms. That didn't work as I expected. Some kind folks helped me out and gave me some suggestions. Let's pivot and try something different. Instead of creating a custom hook, I'll take a step back and add the logic to the Form component. Maybe I can decouple it later. Using a Js.Dict to store data (email and password) proved to be difficult and seems to be an anti-pattern.
Read more →

Learning ReasonReact Step by Step Part: 0

My goal is to learn more in public, so that it also may help others. I've given ReasonReact a first try. I've read a bit of the documentation, took a peek into Exploring ReasonML, and found some useful blog posts. Let's try to build a form in Reason React! This is a simple project, but forms are one of the most common things you'll need in a web application. Installation & Setup Installation via npm or yarn is painless:
Read more →

How to Build a Markdown Preview App With Reagent

Why ClojureScript? With React, you build small components and combine them. You design from data and then flow it through functions (and React classes). You start with the programming logic. You then add your UI with HTML-like syntax (JSX). I enjoy the data-centric approach. It also powers the core of Clojure and ClojureScript. I hate Javascript's verbose syntax. Don't get me started on the object model and the pitfalls of this.
Read more →

Tutorial: Clojurescript App With Reagent For Beginners, Part 2

This is part 2 of my Clojurescript Reagent Tutorial. In part 1 we created a simple random quote app that displays quotes from the TV-series “Breaking Bad”. Here is the live demo: Breaking Bad Quotes. And here is the Github Repo, so you can see the whole code (minus the sensitive login details for Firebase): Github. Now it's time to deploy it. We will use Google Firebase for that, just to learn on how to do it.
Read more →

Tutorial: Clojurescript App With Reagent For Beginners, Part 1

Learning to code takes practice and building projects. So, here is how to build a simple “Random Quote Machine” with Clojurescript and Reagent. Hopefully, you'll get a sense on how Clojurescript and Reagent work. Here is the live demo: Breaking Bad Quotes. And here is the Github Repo, so you can see the whole code: Github. The app displays a quote from the “Breaking Bad” TV series with its author. You can click on a button to get a new quote.
Read more →