{"id":17095579,"url":"https://github.com/slavahatnuke/actives-reactjs-counter-example","last_synced_at":"2026-04-12T17:11:17.064Z","repository":{"id":151749178,"uuid":"64244956","full_name":"slavahatnuke/actives-reactjs-counter-example","owner":"slavahatnuke","description":"Pure Logic (PL) and Pure View (PV) binding example. Feel freedom of PV","archived":false,"fork":false,"pushed_at":"2016-08-01T18:57:34.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-28T23:31:17.725Z","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/slavahatnuke.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":"2016-07-26T18:29:43.000Z","updated_at":"2016-07-30T22:49:15.000Z","dependencies_parsed_at":"2023-07-09T00:45:12.974Z","dependency_job_id":null,"html_url":"https://github.com/slavahatnuke/actives-reactjs-counter-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavahatnuke%2Factives-reactjs-counter-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavahatnuke%2Factives-reactjs-counter-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavahatnuke%2Factives-reactjs-counter-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slavahatnuke%2Factives-reactjs-counter-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slavahatnuke","download_url":"https://codeload.github.com/slavahatnuke/actives-reactjs-counter-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245144021,"owners_count":20568049,"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-10-14T14:43:12.343Z","updated_at":"2026-04-12T17:11:17.016Z","avatar_url":"https://github.com/slavahatnuke.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReactJS Actives counter example. \nThere is an example with reactjs view.\n\n### How to start\n- `npm install`\n- `npm start`\n- `http://localhost:8080/` [http://localhost:8080/](http://localhost:8080/)\n\n\nThere are some required packages.\n```javascript\nimport React from 'react';\nimport {render} from 'react-dom';\n\nimport {Box} from 'actives';\nimport connect from 'actives-react';\n```\nPure logic and view.\n```javascript\n// pure logic, it means that logic does not know about view\nclass Counter {\n    constructor() {\n        this.counter = 0;\n    }\n\n    go() {\n        setInterval(() =\u003e this.up(), 1000);\n    }\n\n    up() {\n        this.counter++;\n    }\n\n    get() {\n        return this.counter;\n    }\n}\n\n// pure view, view does not know about logic at all\nlet CounterView = ({counter, onUp}) =\u003e {\n    return \u003cdiv\u003e\u003cp\u003e{counter}\u003c/p\u003e\u003cbutton onClick={onUp}\u003eup\u003c/button\u003e\u003c/div\u003e\n};\n```\n\nMake box and define state.\n```javascript\n// let's make state for counter\nlet box = new Box;\n// add counter to the box\nbox.add('counter', Counter);\n\n// connect state to the counter\nbox.connect('counterState', 'counter')\n    .state(({counter}) =\u003e {\n        return {\n            counter: counter.get()\n        }\n    })\n    .actions(({counter}) =\u003e {\n        return {\n            onUp: () =\u003e counter.up()\n        };\n    });\n```\n\nConnect state/actions to the view and render.\n```javascript\n// connect state with view, view should not know about real logic\nlet CounterWidget = connect(box.counterState, CounterView);\n\n// render widget now it's connected to state. And it will react on changes.\nrender(\u003cCounterWidget /\u003e, document.getElementById('app'));\n```\n\nYou can manipulate `counter` (logic instance). And it will present view.\n```javascript\n// lets GO!\nlet counter = box.counter;\ncounter.go();\n```\n\n\n### Todos example\nIt's an example with todo list. Follow to get more ideas [example](https://github.com/slavahatnuke/actives-reactjs-todos-example)\n\n### actives\nThe main idea of [actives](https://www.npmjs.com/package/actives)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslavahatnuke%2Factives-reactjs-counter-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslavahatnuke%2Factives-reactjs-counter-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslavahatnuke%2Factives-reactjs-counter-example/lists"}