{"id":19529939,"url":"https://github.com/loopmode/react-component-starter","last_synced_at":"2025-09-11T04:39:37.614Z","repository":{"id":140399886,"uuid":"42079846","full_name":"loopmode/react-component-starter","owner":"loopmode","description":"Boilerplate project. Setup for building a packaged react component that can be published to npm or linked in other projects.","archived":false,"fork":false,"pushed_at":"2018-02-24T16:06:47.000Z","size":149,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-08T16:26:17.450Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/loopmode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-09-07T23:55:37.000Z","updated_at":"2018-02-24T16:02:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"ad433f57-4c24-4172-9310-beadd867285b","html_url":"https://github.com/loopmode/react-component-starter","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loopmode%2Freact-component-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loopmode%2Freact-component-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loopmode%2Freact-component-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loopmode%2Freact-component-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loopmode","download_url":"https://codeload.github.com/loopmode/react-component-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240783109,"owners_count":19856776,"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":[],"created_at":"2024-11-11T01:28:12.931Z","updated_at":"2025-02-26T02:43:17.180Z","avatar_url":"https://github.com/loopmode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react component starter\n\n## What is it?\n\nIt's a boilerplate project for working on reusable react components.\nThe idea is to have a full setup for building a react component, and at the same time\nuse a `react-create-app` app for previewing your component and providing a demo/example.\n\n* Preconfigured `eslint` and `prettier`, works with `Sublime Text` with `SublimeLinter` out-of-the-box\n* Preconfigured `esdoc` for documentation\n* Preconfigured `jest` for testing\n* Uses a `create-react-app` app in `/demo` to preview your component in a \"realistic scenario\"\n\nConsider working with https://github.com/storybooks/storybook instead - it might be a better alternative.\n\n## How do I use it?\n\nThis is a boilerplate/template project. You clone it, then adjust it to fit your needs.\n\n* remove the `.git` folder\n* adjust package.json - make sure you specify a correct package name\n* adjust this readme file\n\n**NOTE:** Use `yarn setup` to install both the component and demo app dependencies!\n\n### CRA demo app\n\nIn order to use the app in `/demo` for \"live preview\" while you are working, you need to make your module available to the app.\nThe easiest way to achieve this is to `link` your module.\n\n* Run `yarn link` in the module folder (e.g. in this folder)\n* Run `yarn link \u003cyour-package-name\u003e` in the `/demo` folder\n\nE.g. if package name is `my-cool-module`\n\n```javascript\nyarn link\ncd demo\nyarn link my-cool-module\n```\n\n### package scripts\n\n* `yarn build` builds the code from `/src` (es6+) to `/lib` (es5)\n* `yarn build --watch` keeps watching and recompiling\n* `yarn test` runs the tests once\n* `yarn test --watch` keeps watching and testing (Note: this only works when your project is under git version control. Use `--watchAll` otherwise)\n* `yarn docs` builds the documentation\n* `yarn demo` starts the development server for the `/demo` app. Same as `cd demo \u0026\u0026 yarn start`\n\n### So how do I really use it?\n\nA typical workflow heavily relies on the `demo` app. So, you should have set up the `link` already.\nThen, you would manually launch two processes: One that keeps building your component via `yarn build --watch`, and one that keeps building the `demo` app via `yarn demo`.\nThat way, you basically get a full, hot-reloaded live working environment.\n\n## Upgrading to react 16:\n\nThis is using react 15. If you want to upgrade to react 16, make sure to install the same version for the `react-test-renderer`, or the tests will not run:\n\n```javascript\nyarn add react@16.2.0 react-dom@16.2.0 \u0026\u0026 yarn --dev react-test-renderer@16.2.0\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floopmode%2Freact-component-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floopmode%2Freact-component-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floopmode%2Freact-component-starter/lists"}