ReasonML Quick Start Guide
Build fast and type-safe React applications that leverage the JavaScript and OCaml ecosystems
Raphael Rafatpanah, Bruno Joseph D'mello
- 180 pages
- English
- ePUB (mobile friendly)
- Available on iOS & Android
ReasonML Quick Start Guide
Build fast and type-safe React applications that leverage the JavaScript and OCaml ecosystems
Raphael Rafatpanah, Bruno Joseph D'mello
About This Book
A hands on approach to learning ReasonML from the perspective of a web developer.
Key Features
- Hands on learning by building a real world app shell that includes client-side routing and more.
- Understand Reason's ecosystem including BuckleScript and various npm workflows.
- Learn how Reason differs from TypeScript and Flow, and how to use it to make refactoring less stressful.
Book Description
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.
What you will learn
- Learn why Reason is exploding in popularity and why it's the future of React
- Become familiar with Reason's syntax and semantics
- Learn about Reason's ecosystem: BuckleScript and JavaScript interoperability
- Learn how to build React applications with Reason
- Learn how to use Reason's type system as a tool to provide amazing guarantees
- Gain a solid foundation on which to continue your journey
Who this book is for
The target audience of this book is web developers who are somewhat familiar with ReactJS and who want to learn why ReasonML is the future of ReactJS.
Frequently asked questions
Information
Creating ReasonReact Components
git clone https://github.com/PacktPublishing/ReasonML-Quick-Start-Guide.git
cd ReasonML-Quick-Start-Guide
cd Chapter03/start
npm install
- Explore creating stateless and stateful ReasonReact components
- Create an application that includes navigation and routing
- See how so many of the ReactJS concepts you're already familiar with map nicely to ReasonReact
- Learn how ReasonReact can help us create more robust components thanks to Reason's type system
Component creation basics
let component = ReasonReact.statelessComponent("App");
let make = _children => {
...component,
render: _self => <div> {ReasonReact.string("hello world")} </div>,
};
ReactDOMRe.renderToElementWithId(<App />, "root");
Component templates
- ReasonReact.statelessComponent
- ReasonReact.statelessComponentWithRetainedProps
- ReasonReact.reducerComponent
- ReasonReact.reducerComponentWithRetainedProps
- render
- didMount
- willReceiveProps
- shouldUpdate
- willUpdate
- didUpdate
- willUnmount
self
- state
- handle
- send
Event handlers
let component = ReasonReact.statelessComponent("App");
let make = _children => {
...component,
render: _self =>
<div onClick={_event => Js.log("clicked")}>
{ReasonReact.string("hello world")}
</div>,
};
unit
Random.bool()
let component = ReasonReact.statelessComponent("App");
let make = _children => {
...component,
render: _self =>
<div onClick={_event => 42}> {ReasonReact.string("hello world")} </div>,
};
Error: This expression has type int but an expression was expected of type
unit
JSX
<div>"hello ...