Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jeescu/recomponent
⚛ Write react components differently.
https://github.com/jeescu/recomponent
component decoupled layered react restructure separate-view separation-of-concerns structured-component
Last synced: about 1 month ago
JSON representation
⚛ Write react components differently.
- Host: GitHub
- URL: https://github.com/jeescu/recomponent
- Owner: jeescu
- Created: 2017-07-11T09:33:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-08-03T13:15:40.000Z (over 7 years ago)
- Last Synced: 2024-11-13T02:49:14.336Z (about 2 months ago)
- Topics: component, decoupled, layered, react, restructure, separate-view, separation-of-concerns, structured-component
- Language: JavaScript
- Homepage:
- Size: 21.5 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# recomponent
[](https://travis-ci.org/reactjs/recomponent)
[](https://www.bithound.io/github/jeescu/recomponent)
[](https://www.npmjs.com/package/recomponent)
[](https://www.npmjs.com/package/recomponent)
> Writing react components redefined.
**recomponent** separates component view and logic while preserving its context. It creates a new way of structuring the components and allows us to keep our component clean and layered.
### Installation
```bash
npm install --save recomponent
```
## Usage
Create an `index.js` file under your component folder. Let's try to separate the concerns. Import your logic, view and css into this file and wrap them using `component.`
### Example
Check `test` folder for additional examples.
```js
import component from 'recomponent';
import MyComponentLogic from './MyComponent.js';
import MyComponentTemplate from './MyComponent.jsx';
import './MyComponent.css';
export default component({
logic: MyComponentLogic,
template: MyComponentTemplate,
styles: {}
});
```
## Component
Wraps your logic, view, store and styles in a single whole component.
#### `component({ ... })`
```
/**
* @params {object} - { logic, template, store, styles }
*
* @paramsKeys logic {component} optional - class-based component (wc extends `component`)
* @paramsKeys template {function} required - react view that can be rendered.
* @paramsKeys store {object} optional - initial store
* @paramsKeys styles {object} optional - styles to use on view
*/
component({ logic, template, store, styles })
```
### Store
**recomponent** provides optional store from your component. This store is just like a state of your component. The reason why it's separated aside from using component's state itself, because you might likely to have your own stored data provider that has its own purpose.
Use this as custom store for your specific component. If child components are also wrapped with **recomponent**, they can directly access the store from their context (`this.store` or `context.store` for dumb components).
You can add store by adding `store` key in declaration:
```js
export default component({
...
store: { title: 'My Store' }
})
```
#### `this.store`
Stored data from the `component` it was defined.
#### `this.setStore({ key: value })`
Update store and forces the component to update.
## Structure
By using the library, we will end up restructuring our component in different way. If our component is *class-based*, the logic and view (`render`) is separated. Thus, it's even more clean than before.
```
├── MyComponent # Your component.
│ ├── index.js # Main entry point. You can do `recomponent` init here.
│ ├── MyComponent.js # Your logic. You can also do `recomponent` here.
│ ├── MyComponent.jsx # Your template. File ext. is optional (change the filename if using `.js`)
│ └── MyComponent.css # Your css
```
### Rules
1. If your component is *class-based*, you can remove your `render` method in your logic. Also, there is no point on using **recomponent** on dumb components. But if you really like to, you can still declare it without the `logic`.
2. Heard about `arrow functions` are already bound to its scope? but we want our react templates to still access it's own context (`this`) like we normally do. Yes, I want you to use `normal function`
```js
// MyComponent.jsx
export default function (props) { // please do
// this - you'll get everything from the logic
// props - ah normal props, but you can get it also from the context.
return (
)
};
```
### Maintainer
[John Edward Escuyos](https://github.com/jeescu)
### License
MIT