https://github.com/slavahatnuke/actives-reactjs-counter-example
Pure Logic (PL) and Pure View (PV) binding example. Feel freedom of PV
https://github.com/slavahatnuke/actives-reactjs-counter-example
Last synced: 2 months ago
JSON representation
Pure Logic (PL) and Pure View (PV) binding example. Feel freedom of PV
- Host: GitHub
- URL: https://github.com/slavahatnuke/actives-reactjs-counter-example
- Owner: slavahatnuke
- Created: 2016-07-26T18:29:43.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-08-01T18:57:34.000Z (almost 9 years ago)
- Last Synced: 2025-01-28T23:31:17.725Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactJS Actives counter example.
There is an example with reactjs view.
### How to start
- `npm install`
- `npm start`
- `http://localhost:8080/` [http://localhost:8080/](http://localhost:8080/)
There are some required packages.
```javascript
import React from 'react';
import {render} from 'react-dom';
import {Box} from 'actives';
import connect from 'actives-react';
```
Pure logic and view.
```javascript
// pure logic, it means that logic does not know about view
class Counter {
constructor() {
this.counter = 0;
}
go() {
setInterval(() => this.up(), 1000);
}
up() {
this.counter++;
}
get() {
return this.counter;
}
}
// pure view, view does not know about logic at all
let CounterView = ({counter, onUp}) => {
return
{counter}
up
};
```
Make box and define state.
```javascript
// let's make state for counter
let box = new Box;
// add counter to the box
box.add('counter', Counter);
// connect state to the counter
box.connect('counterState', 'counter')
.state(({counter}) => {
return {
counter: counter.get()
}
})
.actions(({counter}) => {
return {
onUp: () => counter.up()
};
});
```
Connect state/actions to the view and render.
```javascript
// connect state with view, view should not know about real logic
let CounterWidget = connect(box.counterState, CounterView);
// render widget now it's connected to state. And it will react on changes.
render(, document.getElementById('app'));
```
You can manipulate `counter` (logic instance). And it will present view.
```javascript
// lets GO!
let counter = box.counter;
counter.go();
```
### Todos example
It's an example with todo list. Follow to get more ideas [example](https://github.com/slavahatnuke/actives-reactjs-todos-example)
### actives
The main idea of [actives](https://www.npmjs.com/package/actives)