{"id":13495624,"url":"https://github.com/bloodyowl/rescript-react-starter-kit","last_synced_at":"2025-03-22T10:30:54.854Z","repository":{"id":53779452,"uuid":"342974370","full_name":"bloodyowl/rescript-react-starter-kit","owner":"bloodyowl","description":"An opinionated starter kit for ReScript React","archived":false,"fork":false,"pushed_at":"2021-06-19T11:27:46.000Z","size":2076,"stargazers_count":57,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-18T10:21:18.674Z","etag":null,"topics":["react","rescript"],"latest_commit_sha":null,"homepage":"https://bloodyowl.github.io/rescript-react-starter-kit/","language":"ReScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bloodyowl.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":".github/FUNDING.yml","license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["bloodyowl"]}},"created_at":"2021-02-27T22:45:35.000Z","updated_at":"2024-11-04T23:53:37.000Z","dependencies_parsed_at":"2022-09-10T21:02:41.463Z","dependency_job_id":null,"html_url":"https://github.com/bloodyowl/rescript-react-starter-kit","commit_stats":null,"previous_names":[],"tags_count":10,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloodyowl%2Frescript-react-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloodyowl%2Frescript-react-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloodyowl%2Frescript-react-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloodyowl%2Frescript-react-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bloodyowl","download_url":"https://codeload.github.com/bloodyowl/rescript-react-starter-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244943635,"owners_count":20536272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","rescript"],"created_at":"2024-07-31T19:01:36.479Z","updated_at":"2025-03-22T10:30:54.110Z","avatar_url":"https://github.com/bloodyowl.png","language":"ReScript","funding_links":["https://github.com/sponsors/bloodyowl"],"categories":["ReScript"],"sub_categories":[],"readme":"# ReScript React Starter Kit\n\n\u003e An opinionated starter kit for ReScript React\n\n\u003cimg width=\"626\" alt=\"Screen Shot 2021-02-27 at 23 45 09\" src=\"https://user-images.githubusercontent.com/1688645/109402443-321f6a00-7956-11eb-8883-1e2e6d3ec3ad.png\"\u003e\n\n## What's inside\n\n### Familiar standard library\n\nThe configuration automatically gives you [Belt](https://rescript-lang.org/docs/manual/latest/api/belt) and [ReScriptJs.Js](https://github.com/bloodyowl/rescript-js) in scope.\n\nThis makes your code always default to JavaScript APIs if available, while giving you good manipulation functions for ReScript-specific types (like `Option` \u0026 `Result`)\n\nThis means that by default, the following code:\n\n```rescript\nlet x = [1, 2, 3]\n  -\u003eArray.map(x =\u003e x * 2)\n  -\u003eArray.forEach(Console.log)\n```\n\nwill compile to the following JS (no additional runtime cost!):\n\n```js\n[1, 2, 3]\n  .map(function (x) {\n    return x \u003c\u003c 1;\n  })\n  .forEach(function (prim) {\n    console.log(prim);\n  });\n```\n\nIf you need a specific data-structure from Belt, you can prefix with `Belt`'s scope:\n\n```rescript\nlet x = Belt.Map.String.fromArray([(\"a\", 1), (\"b\", 2)])\n```\n\n### Ready-to-go requests\n\nThis starter kit gives you three building blocks to handle API calls from the get go.\n\n#### AsyncData\n\n[AsyncData](https://github.com/bloodyowl/rescript-asyncdata) is a great way to represent asynchronous data in React component state. It's a variant type that can be either `NotAsked`, `Loading` or `Done(payload)`, leaving no room for the errors you get when managing those in different state cells.\n\n#### Future\n\nPromises don't play really well with React's effect cancellation model, [Future](https://github.com/bloodyowl/rescript-future) gives you a performant equivalent that has built-in cancellation and leaves error management to the [Result](https://rescript-lang.org/docs/manual/latest/api/belt/result) type.\n\n#### Request\n\n[Request](https://github.com/bloodyowl/rescript-request) gives you a simple API to perform API calls in a way that's easy to store in React component state.\n\n### Dev server\n\nOnce your project grows, having the compiler output files and webpack watching it can lead to long waiting times. Here, the development server waits for BuckleScript to be ready before it triggers a compilation.\n\nThe dev server supports basic **live reload**.\n\n### Testing library\n\nWith [ReScriptTest](https://github.com/bloodyowl/rescript-test), you get a light testing framework that plays nicely with React \u0026 lets you mock HTTP call responses.\n\nThe assertion part is on your side, the library simply runs and renders the tests.\n\n```rescript\nopen ReactTest\n\ntestWithReact(\"Robots renders\", container =\u003e {\n  let (future, resolve) = Deferred.make()\n\n  let fetchRobotsTxt = () =\u003e future\n\n  act(() =\u003e ReactDOM.render(\u003cRobots fetchRobotsTxt /\u003e, container))\n  Assert.elementContains(container, \"Loading\")\n\n  act(() =\u003e resolve(Ok({ok: true, status: 200, response: Some(\"My mock response\")})))\n\n  Assert.elementContains(container, \"My mock response\")\n})\n```\n\nCheck the example output in [this repo's GitHub Actions](https://github.com/bloodyowl/rescript-react-starter-kit/actions)\n\n### Styling with Emotion\n\nWith [some zero-cost bindings to Emotion](https://github.com/bloodyowl/rescript-react-starter-kit/blob/main/src/shared/Emotion.res), you get CSS-in-ReScript right away.\n\n```rescript\nmodule Styles = {\n  open Emotion\n  let actionButton = css({\n    \"borderStyle\": \"none\",\n    \"background\": \"hotpink\",\n    \"fontFamily\": \"inherit\",\n    \"color\": \"#fff\",\n    \"fontSize\": 20,\n    \"padding\": 10,\n    \"cursor\": \"pointer\",\n    \"borderRadius\": 10,\n    \"alignSelf\": \"center\",\n  })\n  let disabledButton = cx([actionButton, css({\"opacity\": \"0.3\"})])\n}\n```\n\n## Routing\n\nProvide a `PUBLIC_PATH` environment variable (defaults to `/`), the boilerplate takes care of the rest. Manage your routing using the `Router` \u0026 `\u003cLink /\u003e` modules.\n\n## Titles \u0026 metadata\n\nCall `\u003cHead /\u003e` with the metadata you like for a given route, this binds to [react-helmet](https://github.com/nfl/react-helmet).\n\n## Getting started\n\n```console\n$ yarn\n$ yarn start\n# And in a second terminal tab\n$ yarn server\n```\n\n## Commands\n\n### yarn start\n\nStarts ReScript compiler in watch mode\n\n### yarn server\n\nStarts the development server\n\n### yarn build\n\nBuilds the project\n\n### yarn bundle\n\nBundles the project in `build`\n\n### yarn test\n\nRuns the test suite\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbloodyowl%2Frescript-react-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbloodyowl%2Frescript-react-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbloodyowl%2Frescript-react-starter-kit/lists"}