Today I finished my first TypeScript experiment with React. Here are some thoughts after using ReasonReact first, and now TypeScript second. Setup Is Not Better Than ReasonReact I used Create React App to bootstrap the app. npx create-react-app <project-name> –typescript But then I had to setup ESLint and Prettier with TypeScript. ReasonML & BuckleScript: npm install -g bs-platform bsb -init <project-name> -theme react-hooks After that you’re done.
I’m not sure how it happened. But a while ago, I agreed to hold a tech talk. 😱 Today, I was able to prepare for the talk. I woefully underestimated the amount of work! I now have a new appreciation for all the speakers. Tools I decided to use Remark.js to create slides from a Markdown file. With the CLI tool backslide you can easily automate the process. I found it painless to create decent-looking slides with minimal effort.
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.
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.