{"id":22740610,"url":"https://github.com/datarockets/dreact","last_synced_at":"2025-04-14T05:53:07.614Z","repository":{"id":43932887,"uuid":"116032987","full_name":"datarockets/dreact","owner":"datarockets","description":"(Deprecated) Build web applications as easy as datarockets do 🚀","archived":false,"fork":false,"pushed_at":"2023-10-08T16:47:55.000Z","size":2250,"stargazers_count":9,"open_issues_count":14,"forks_count":0,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-14T05:53:01.211Z","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/datarockets.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}},"created_at":"2018-01-02T16:08:06.000Z","updated_at":"2023-11-11T19:07:33.000Z","dependencies_parsed_at":"2022-08-26T13:41:35.942Z","dependency_job_id":null,"html_url":"https://github.com/datarockets/dreact","commit_stats":{"total_commits":109,"total_committers":3,"mean_commits":"36.333333333333336","dds":0.03669724770642202,"last_synced_commit":"4b45ceefa216d963e9228440750b1db60cc32a8e"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarockets%2Fdreact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarockets%2Fdreact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarockets%2Fdreact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datarockets%2Fdreact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datarockets","download_url":"https://codeload.github.com/datarockets/dreact/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830389,"owners_count":21168272,"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-12-10T23:09:32.091Z","updated_at":"2025-04-14T05:53:07.591Z","avatar_url":"https://github.com/datarockets.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dreact\n\nBuild web applications as easy as datarockets do 🚀\n\n```sh\nyarn add dreact\n```\n\n## What?\n\nMaintain projects easier by applying reusage of everything. It's based on [react-scripts (create react app)](https://github.com/facebook/create-react-app) so you can use all of its features. We provide redux and styled-components configuration out of the box.\n\nContent:\n\n- [Environment](#environment)\n- [How to organize the project](#how-to-organize-the-project)\n- [How to create and use store](#how-to-create-and-use-store)\n- [How to write sagas and containers related to store](#how-to-write-sagas-and-containers-related-to-store)\n- [How to write tests](#how-to-write-tests)\n- [How to integrate with Sentry](#how-to-integrate-with-sentry)\n- [Configuration](#configuration)\n- [CLI](#cli)\n- [Deployment](#deployment)\n\n## Environment\n\nThe app is based on [react-scripts](https://github.com/facebook/create-react-app). And book is based on [storybook](https://github.com/storybookjs/storybook).\n\n- #### Pug\n\n  We use Pug to write render methods. See [babel-plugin-transform-react-pug](https://github.com/pugjs/babel-plugin-transform-react-pug).\n\n- #### Aliases\n\n  We provide `src` and `UI` aliases that point to `./src` and `./src/UI`.\n\n- #### Pass variables from `.env.local`\n\n  I recommend to maintain `.env.sample` to always contain variables necessary for development and sync it via `dreact env-sync` command.\n\n- #### Configured tests\n\n  We use [Jest](https://jestjs.io) + [Enzyme](https://airbnb.io/enzyme/). To make test writing easier, we configured it:\n\n  - The execcution of console.error is forbidden. This is mostly to prevent mismatching of prop types.\n  - Extended functioinality with [jest-enzyme](https://github.com/FormidableLabs/enzyme-matchers/tree/master/packages/jest-enzyme#assertions).\n  - Element's attribute `TESTID` in tests for easier selecting nodes n tests.\n\n- #### Addons for storybook\n\n  We added [knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs), [storysource](https://github.com/storybookjs/storybook/tree/master/addons/storysource) and [actions](https://github.com/storybookjs/storybook/tree/master/addons/actions).\n\n- #### Simple creating action creators\n\n  All `new Action()` constructions inside `/src/collections/*/actions.js` will be transformed into `createAction` exported by `dreact/helper-actions`.\n\n- #### Success/Failure callbacks for actions\n\n  Each `.success()` and `.failure()` actions trigger callbacks passed to `.init()` action.\n\n  For example, when we initialize any action we can pass `onSuccess` and `onFailure` callbacks which will be triggered when corresponding success and failure actions are dispatched.\n\n  ```js\n  const message = new Action({\n    init: data =\u003e data, // It's important to pass values\n  })\n\n  const action = message.init({\n    text: 'hello',\n    onSuccess: () =\u003e alert('Message has been sent'),\n    onFailure: () =\u003e alert('Failed to send message'),\n  })\n  dispatch(action)\n\n  dispatch(message.success()) // Triggers `onSuccess` callback\n  dispatch(message.failure()) // Triggers `onFailure` callback\n  ```\n\n- #### Linting\n\n  We use eslint and stylelint to lint our files. Also we applied several custom rules there to reach our needs: we request named exports for collection stuff, we request using normal functions to define components, we require tests for each file in the app. [Take a look at all rules](./cli/environment/eslint-plugin-local).\n\n- #### Automatic imports\n\n  We import React and styled components where they are used automatically.\n\n## How to organize the project\n\nThe basic structure looks like this:\n\n```\n/config — to configure the project\n/public\n  index.html\n\n/src\n  /collections\n    ...\n    store.js\n  /components\n  /containers\n  /forms\n  /lib\n  /pages\n  /services\n  /UI\n\n  AppRouter.js\n  index.js\n  routes.js\n```\n\n## How to create and use store\n\nWe create and export store in `src/collections/store.js`:\n\n```js\nimport makeStoreConfigurer from 'dreact/helper-store'\n\nexport default makeStoreConfigurer()\n```\n\nEverything will be pulled from collections and added automatically. However you might need to extend it, so take a look at [`dreact/helper-store` documentation](./helper-store).\n\n_Note: When we create or remove collectons we should restart the app._\n\nTo connect the store with the app we need to modify `src/index.js`:\n\n```js\nimport ReactDOM from 'react-dom'\nimport { Provider } from 'dreact/helper-store'\n\nimport AppRouter from 'src/AppRouter'\n\nimport configureStore from 'src/collections/store'\n\nconst store = configureStore()\n\nReactDOM.render(\n  pug`\n    Provider(store=store)\n      AppRouter\n  `,\n  document.getElementById('root'),\n)\n```\n\n## How to write sagas and containers related to store\n\nSo basically we need saga effects and some hooks to maintain everything related to store. For that we have [`dreact/helper-store`](./helper-store).\n\n```js\nimport { effects, useDispatch, useSelector } from 'dreact/helper-store'\n```\n\n## How to write tests\n\nThere are no instructions. Earlier you've been told that we use enzyme for testing, but we built an enhancements on top of it, so to get an access to enzyme we should use `dreact/helper-test`.\n\nYour test may look like this:\n\n```js\nimport { shallow } from 'dreact/helper-test'\n\nimport Component from '.'\n\nit('is rendered', () =\u003e {\n  shallow(pug`Component Hello World`)\n})\n```\n\nTake a look at [`dreact/helper-test` documentation](./helper-test).\n\n## How to integrate with [Sentry](https://sentry.io)\n\nTo implement the integration with sentry we need to set `REACT_APP_SENTRY_DSN`, `REACT_APP_SENTRY_ENV` environment variables. Once they are set, it will start sending reports to sentry.\n\n## Configuration\n\n- #### `/config/babel.config.js`\n\n  The babel config will be based on this file and refined.\n\n- #### `/config/book.setup-item.js`\n\n  Specify a decorator for storybook. Usually used to add some wrappers around each story.\n\n  ```js\n  export default storyFn = pug`\n    p I'll appear before each story\n    = storyFn()\n  `\n  ```\n\n- #### `/config/eslint.config.js`\n\n  Modify our internal eslint config to conform your needs.\n\n- #### `/config/stylelint.config.js`\n\n  Modify our internal stylelint config to conform your needs.\n\n- #### `/config/jest.setup.js`\n\n  Setup jest to run tests on your terms.\n\n## CLI\n\n- #### `dreact app start`\n\n  Run the app in development mode\n\n- #### `dreact book start`\n\n  Run the book in development mode\n\n- #### `dreact lint js`\n\n  Lint JavaScript files\n\n- #### `dreact lint ts`\n\n  Lint Typescript (.ts, .tsx) files\n\n- #### `dreact lint styles`\n\n  Lint styles in the project\n\n- #### `dreact test`\n\n  Run tests in watch mode (on CI it will be run in a normal mode)\n\n- #### `dreact env-sync`\n\n  Synchronize `.env.sample` file with `.env.local`\n\n## Deployment\n\n- #### `dreact app build`\n\n  It creates `/build` directory that can be deployed to static server such as S3.\n\n- #### `dreact book build`\n\n  It creates `/book` directory that can be deployed to static server such as S3.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatarockets%2Fdreact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatarockets%2Fdreact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatarockets%2Fdreact/lists"}