This is a simple Minesweeper game I'm making while roughly following along a ReasonReact tutorial. It's still very much WIP (I'm learning ReasonML & ReasonReact) and I don't recommend you copy any of my mistakes. I'll later use this to seek feedback/reviews from more experienced Reason devs.
This basic version of Minesweeper now "works" at ~320 Lines of Code (wow, such compact, much expressive!), but still needs to be refactored a little.
- (Game) Better CSS / normalize
- (Meta) Modularize code properly
- (Meta) Probably make the Board module a stateful react component handling its own events
- (Meta) Reduce the number of mutable fields/properties in the grid
- (Game) Add "shortcut" move to reveal neighbours if a numbered cell is surrounded by the correct number of flags. (+45 LoC)
npm install
npm start
# in another tab
npm run webpackAfter you see the webpack compilation succeed (the npm run webpack step), open up build/index.html (no server needed!). Then modify whichever .re file in src and refresh the page to see the changes.
For more elaborate ReasonReact examples, please see https://github.com/reasonml-community/reason-react-example
To run with the webpack development server run npm run server and view in the browser at http://localhost:8000. Running in this environment provides hot reloading and support for routing; just edit and save the file and the browser will automatically refresh.
Note that any hot reload on a route will fall back to the root (/), so ReasonReact.Router.dangerouslyGetInitialUrl will likely be needed alongside the ReasonReact.Router.watchUrl logic to handle routing correctly on hot reload refreshes or simply opening the app at a URL that is not the root.
To use a port other than 8000 set the PORT environment variable (PORT=8080 npm run server).
npm run build
npm run webpack:productionThis will replace the development artifact build/Index.js for an optimized version as well as copy src/index.html into build/. You can then deploy the contents of the build directory (index.html and Index.js).
If you make use of routing (via ReasonReact.Router or similar logic) ensure that server-side routing handles your routes or that 404's are directed back to index.html (which is how the dev server is set up).
To enable dead code elimination, change bsconfig.json's package-specs module from "commonjs" to "es6". Then re-run the above 2 commands. This will allow Webpack to remove unused code.