Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mellson/rescript-intro
Repo for ReScript intro workshop
https://github.com/mellson/rescript-intro
Last synced: 2 months ago
JSON representation
Repo for ReScript intro workshop
- Host: GitHub
- URL: https://github.com/mellson/rescript-intro
- Owner: mellson
- License: mit
- Created: 2021-07-11T06:41:15.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T09:06:20.000Z (over 1 year ago)
- Last Synced: 2024-01-26T15:35:00.899Z (5 months ago)
- Language: JavaScript
- Size: 302 KB
- Stars: 6
- Watchers: 0
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-rescript - rescript-intro - A calculator Using ReScript, React + Tailwind. (ReScript / Example Apps)
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
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/).