Book Image

ReasonML Quick Start Guide

By : Raphael Rafatpanah, Bruno Joseph D'mello
Book Image

ReasonML Quick Start Guide

By: Raphael Rafatpanah, Bruno Joseph D'mello

Overview of this book

ReasonML, also known as Reason, is a new syntax and toolchain for OCaml that was created by Facebook and is meant to be approachable for web developers. Although OCaml has several resources, most of them are from the perspective of systems development. This book, alternatively, explores Reason from the perspective of web development. You'll learn how to use Reason to build safer, simpler React applications and why you would want to do so. Reason supports immutability by default, which works quite well in the context of React. In learning Reason, you will also learn about its ecosystem – BuckleScript, JavaScript interoperability, and various npm workflows. We learn by building a real-world app shell, including a client-side router with page transitions, that we can customize for any Reason project. You'll learn how to leverage OCaml's excellent type system to enforce guarantees about business logic, as well as preventing runtime type errors.You'll also see how the type system can help offload concerns that we once had to keep in our heads. We'll explore using CSS-in-Reason, how to use external JSON in Reason, and how to unit-test critical business logic. By the end of the book, you'll understand why Reason is exploding in popularity and will have a solid foundation on which to continue your journey with Reason.

Related Content you might be interested in

Current Title:

Small book image
ReasonML Quick Start Guide
Raphael Rafatpanah | Bruno Joseph D'mello
Feb, 2019 | 180 pages
Small book image
Learn Type-Driven Development
Yawar Amin | Kamon Ayeva
Dec, 2018 | 180 pages
Table of Contents (10 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Introduction to ReasonML
Introduction to ReasonML
What is ReasonML?
Why Reason?
Exploring Reason
Summary
2
Setting Up a Development Environment
Setting Up a Development Environment
The Reason toolchain
Setting up a pure Reason project
Setting up a ReasonReact project
Summary
3
Creating ReasonReact Components
Creating ReasonReact Components
Component creation basics
Stateful components
Navigation menu
Client-side routing
Summary
4
BuckleScript, Belt, and Interoperability
BuckleScript, Belt, and Interoperability
Module scope
Data structures
Pipe operators
Using Belt
JavaScript interoperability
Binding to existing ReactJS components
Summary
5
Effective ML
Effective ML
Module signatures
Using module signatures
Phantom types
Polymorphic variants
Advanced type system features
Summary
6
CSS-in-JS (in Reason)
CSS-in-JS (in Reason)
What is CSS-in-JS?
Using styled-components
Using bs-css
Summary
7
JSON in Reason
JSON in Reason
Building views
Integrating with localStorage
Using bs-json
Using GraphQL
Summary
8
Unit Testing in Reason
Unit Testing in Reason
Testing with Jest
Summary
9
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Using bs-css

While there is no official recommendation from the Reason team for a CSS-in-JS solution, many are currently using a library called bs-css that wraps the emotion CSS-in-JS library (version 9). The bs-css library provides a type-safe API for use in Reason. With this approach, we can have the compiler check our CSS as well. We'll get a feel for this library by converting our App.scss, which we created in Chapter 3, Creating ReasonReact Components.

To follow along, clone this book's GitHub repository and start from Chapter06/app-start using the following code:

git clone https://github.com/PacktPublishing/ReasonML-Quick-Start-Guide.git
cd ReasonML-Quick-Start-Guide
cd Chapter06/app-start
npm install

To get started with bs-css, we'll include it as a dependency for both package.json and bsconfig.json as follows:

/* bsconfig.json */
...
"bs-dependencies&quot...
Previous Section
End of Section 4
Next Section