Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hokaccha/react-micro-container
Micro framework for React
https://github.com/hokaccha/react-micro-container
Last synced: about 2 months ago
JSON representation
Micro framework for React
- Host: GitHub
- URL: https://github.com/hokaccha/react-micro-container
- Owner: hokaccha
- Created: 2016-03-14T10:51:55.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-22T02:06:59.000Z (about 7 years ago)
- Last Synced: 2024-08-09T03:28:46.534Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 573 KB
- Stars: 89
- Watchers: 3
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-micro-container
[](https://travis-ci.org/hokaccha/react-micro-container)
[](https://badge.fury.io/js/react-micro-container)
Flux is good architecture for react applications, but it's too complex to build small react application. For small applications, it's important to separate stateless components and stateful container components.
`react-micro-container` provides minimum features for container components.
## Installation
```
$ npm install react-micro-container
```
## Usage
Create stateless components that receive `dispatch` function via `props`.
```javascript
import React from 'react';
class Counter extends React.Component {
render() {
return (
{this.props.count}
this.props.dispatch('increment', 1)}>+1
this.props.dispatch('decrement', 1)}>-1
this.props.dispatch('increment', 100)}>+100
);
}
}
```
Next, create container class that has `dispatch` and `subscribe`. You can handle events and update state in the container.
```javascript
import React from 'react';
import MicroContainer from 'react-micro-container';
import Counter from '../components/counter';
class CounterContainer extends MicroContainer {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentDidMount() {
this.subscribe({
increment: this.handleIncrement,
decrement: this.handleDecrement,
});
}
handleIncrement(count) {
this.setState({ count: this.state.count + count });
}
handleDecrement(count) {
this.setState({ count: this.state.count - count });
}
render() {
return ;
}
}
```
Finally, mount to DOM. `CounterContainer` is also just a react component.
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import CounterContainer from './containers/counter';
ReactDOM.render(, document.getElementById('app'));
```
## Thanks
This library is inspired by [mizchi](https://github.com/mizchi)'s article. Thanks!
## License
MIT