https://github.com/slavahatnuke/ireactivity-web-simple-list-example
https://github.com/slavahatnuke/ireactivity-web-simple-list-example
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/slavahatnuke/ireactivity-web-simple-list-example
- Owner: slavahatnuke
- Created: 2017-04-07T23:49:51.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-15T01:56:05.000Z (about 8 years ago)
- Last Synced: 2025-01-28T23:31:17.802Z (4 months ago)
- Language: JavaScript
- Size: 127 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# iReactivity: Simple list example
It's just present idea [src/index.js](./src/index.js)
of iReactivity [https://www.npmjs.com/package/ireactivity](https://www.npmjs.com/package/ireactivity)
---
```jsx harmony
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, connect, update, render} from 'ireactivity';
import {input, submit} from 'ireactivity-form-dom';
const uid = () => Math.random().toString(35).slice(2, 8).toUpperCase();
const store = {
todos: [
{title: 'Todo #1', id: uid()},
{title: 'Todo #2', id: uid()}
]
};
const TodoForm = ({onSave}) => {
const todo = {
title: ''
};
const save = () => {
onSave({...todo});
update(todo, () => todo.title = '');
};
return render(todo, () =>
{todo.title}
ok
)
};
const TodoView = ({todo, onRemove}) =>
onRemove(todo)}>x
{todo.title}
const Todo = connect(TodoView, {
onRemove: (store) => (todo) => {
store.todos = store.todos.filter((aTodo) => todo !== aTodo)
}
});
const TodosView = ({todos}) =>
{todos.map((todo) => )}
;
const Todos = connect(TodosView, {
todos: (store) => store.todos
});
const TodoPlusView = ({onSave}) =>
const TodoPlus = connect(TodoPlusView, {
onSave: (store) => (todo) => {
let id = uid();
// store.todos = [...store.todos, {title: `Todo #${id}`, id: id}]
store.todos = [...store.todos, {...todo, id}]
}
});
const AppView = () =>
List
;
const App = AppView;
ReactDOM.render(
,
document.getElementById('root'));
```
## How to start
- `npm install`
- `npm start`
## iReactivity
[https://www.npmjs.com/package/ireactivity](https://www.npmjs.com/package/ireactivity) - Simple React binding