Skip to content

MosesSupposes/Case-Aid-Companion

Repository files navigation

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).

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

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.

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 you might be interested in.

Todo

  • Auto-populate the next "From" input with the value of the last "To" input.
  • Incorporate a database
  • Add autocomplete feature that suggests destinations based on previous visits.
  • Cache the results of previous calculations
  • Auto-populate the state that the user is in for each calculation

Bugs

  • When a user clicks the "Undo" button all the way until there are no inputs left on the screen, the last distance calculated gets undone, but then when they click "Next Destination" again, the last undone calculation gets added back to the total. The expected behavior is that when they press "Next Destination" a new DestinationInpu is rendered and the total remains at 0 miles.

  • The undo works when you undo and then redo, but when you keep undoing, it skips ahead and doesn’t correspond with the last item you’re trying to undo

    Hint: set last starting point and last destination to “” inside the useeffect

About

A mileage tracker app tailored for case aids.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published