Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mellson/rescript-intro

Repo for ReScript intro workshop
https://github.com/mellson/rescript-intro

Last synced: about 2 months ago
JSON representation

Repo for ReScript intro workshop

Awesome Lists containing this project

README

        

# ReScript Intro

This repo is a used to support [this meetup](https://www.meetup.com/spiced-academy/events/279779940) where we build a calculator Using ReScript, React + Tailwind.

You can find an example of the calculator deployed [here](https://rescript-calculator.netlify.app/). This code to this version of the calculator is available in the example branch of this repo.

## Tech Stack

The technologies used in this project:

- [ReScript](https://rescript-lang.org/)
- React in the form of [rescript-react](https://rescript-lang.org/docs/react/latest/introduction#sidebar)
- [TailwindCSS](https://tailwindcss.com/)
- [Vite.js](https://vitejs.dev/)

## Getting started

The project includes a .vscode folder with extension suggestions and setup for running in vscode.

1. Install the dependencies by running `yarn`.

2. Open this repo in vscode and install the suggested extension. The theme used in the meetup is [GitHub Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme) in the dark variant.

3. Open a `.res` file, for instance `App.res` and start the build which should be suggested by the popup in the bottom right corner.

4. Start Vite by running `yarn dev`.

5. Open http://localhost:3000 and you should be up and running.

# Building the calculator

![Example calculator](media/calculator.png)

This is how the example calculator looks like. This is a basic calculator that supports addition, subtraction, multiplication and division. To support these operations, the calculator is built around a simple state machine. There's a very basic state machine implementation in the `src/Machine.res` file. This allows you to create an instance of the state machine and use it to create the calculator.

## States

The states we need for the example calculator is shown in the following diagram.

```
┌────DigitPressed
│ │
▼ │
┌─────────────┐ ┌─────────────┐ │
│ │ │ │ │
│ Initial │────DigitPressed───▶│ Typing │──┘
│ │ │ │
└─────────────┘ └─────────────┘
▲ │ ▲ │
│ │ │ OperationPressed OperationPressed
├───────────ClearPressed────┘ │ └────────┐ ┌────or DigitPressed
│ │ │ │ │
│ │ ▼ ▼ │
│ │ ┌─────────────┐ │
│ │ │ │ │
├───────────ClearPressed───────────┼───────────────│ Operating │──┘
│ │ │ │
│ │ └─────────────┘
│ │ ▲ │
│ │ │ │
│ │ │ EqualsPressed
│ │ │ │
│ │ OperationPressed │ ┌───EqualsPressed
│ │ │ │ │ │
│ │ │ ▼ ▼ │
│ DigitPressed └──────┌─────────────┐ │
│ │ │ │ │
│ └──────────────────────│ Result │──┘
│ │ │
└───────────ClearPressed──────────────────────────────────└─────────────┘
```

## Great to know

You can find a really helpful online ReScript community at the official [ReScript forum](https://forum.rescript-lang.org/).