Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tarsisexistence/reason-warehouse
⚡︎ Personal warehouse-application in ReasonML
https://github.com/tarsisexistence/reason-warehouse
react reason reasonreact
Last synced: about 2 months ago
JSON representation
⚡︎ Personal warehouse-application in ReasonML
- Host: GitHub
- URL: https://github.com/tarsisexistence/reason-warehouse
- Owner: tarsisexistence
- Created: 2020-04-29T17:05:23.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-17T17:48:00.000Z (2 months ago)
- Last Synced: 2024-10-20T02:29:28.172Z (2 months ago)
- Topics: react, reason, reasonreact
- Language: Reason
- Homepage:
- Size: 361 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReasonReact Template & Examples
This is:
- A template for your new ReasonReact project.
- A collection of thin examples illustrating ReasonReact usage.
- Extra helper documentation for ReasonReact (full ReasonReact docs [here](https://reasonml.github.io/reason-react/)).
`src` contains 4 sub-folders, each an independent, self-contained ReasonReact example. Feel free to delete any of them and shape this into your project! This template's more malleable than you might be used to =).
The point of this template and examples is to let you understand and personally tweak the entirely of it. We **don't** give you an opaque, elaborate mega build setup just to put some boxes on the screen. It strikes to stay transparent, learnable, and simple. You're encouraged to read every file; it's a great feeling, having the full picture of what you're using and being able to touch any part.
## Run
```sh
npm install
npm run server
# in a new tab
npm start
```
Open a new web page to `http://localhost:8000/`. Change any `.re` file in `src` to see the page auto-reload. **You don't need any bundler when you're developing**!
**How come we don't need any bundler during development**? We highly encourage you to open up `index.html` to check for yourself!
# Features Used
| | Blinking Greeting | Reducer from ReactJS Docs | Fetch Dog Pictures | Reason Using JS Using Reason |
|---------------------------|-------------------|---------------------------|--------------------|------------------------------|
| No props | | ✓ | | |
| Has props | | | | ✓ |
| Children props | ✓ | | | |
| No state | | | | ✓ |
| Has state | ✓ | | ✓ | |
| Has state with useReducer | | ✓ | | |
| ReasonReact using ReactJS | | | | ✓ |
| ReactJS using ReasonReact | | | | ✓ |
| useEffect | ✓ | | ✓ | |
| Dom attribute | ✓ | ✓ | | ✓ |
| Styling | ✓ | ✓ | ✓ | ✓ |
| React.array | | | ✓ | |
# Bundle for Production
We've included a convenience `UNUSED_webpack.config.js`, in case you want to ship your project to production. You can rename and/or remove that in favor of other bundlers, e.g. Rollup.
We've also provided a barebone `indexProduction.html`, to serve your bundle.
```sh
npm install webpack webpack-cli
# rename file
mv UNUSED_webpack.config.js webpack.config.js
# call webpack to bundle for production
./node_modules/.bin/webpack
open indexProduction.html
```
# Handle Routing Yourself
To serve the files, this template uses a minimal dependency called `moduleserve`. A URL such as `localhost:8000/scores/john` resolves to the file `scores/john.html`. If you'd like to override this and handle URL resolution yourself, change the `server` command in `package.json` from `moduleserve ./ --port 8000` to `moduleserve ./ --port 8000 --spa` (for "single page application"). This will make `moduleserve` serve the default `index.html` for any URL. Since `index.html` loads `Index.bs.js`, you can grab hold of the URL in the corresponding `Index.re` and do whatever you want.
By the way, ReasonReact comes with a small [router](https://reasonml.github.io/reason-react/docs/en/router) you might be interested in.