Example project to show how to use components lazy loading in ReasonReact.
Reason / BuckleScript adaptation from https://medium.freecodecamp.org/how-to-use-react-lazy-and-suspense-for-components-lazy-loading-8d420ecac58.
yarn install yarn start # in another tab yarn run webpack
After you see the webpack compilation succeed (the
yarn 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
Run Project with Server
To run with the webpack development server run
yarn 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 (
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 yarn run server).
Build for Production
yarn run clean yarn run build yarn run webpack:production
This will replace the development artifact
build/Index.js for an optimized version as well as copy
build/. You can then deploy the contents of the
build directory (
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
"es6". Then re-run the above 2 commands. This will allow Webpack to remove unused code.