https://github.com/jonathanconway/react-mvp

Lightweight Model-View-Presenter framework for React.
https://github.com/jonathanconway/react-mvp

Last synced: about 13 hours ago
JSON representation

Lightweight Model-View-Presenter framework for React.

• Host: GitHub
• URL: https://github.com/jonathanconway/react-mvp
• Owner: jonathanconway
• License: mit
• Created: 2017-09-19T00:46:43.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-19T00:54:16.000Z (over 7 years ago)
• Last Synced: 2024-10-06T12:06:44.887Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 42 KB
• Stars: 13
• Watchers: 2
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-mvp

Lightweight Model-View-Presenter framework for React.

![Diagram that depicts the Model View Presenter (MVP) GUI design pattern.](https://upload.wikimedia.org/wikipedia/commons/d/dc/Model_View_Presenter_GUI_Design_Pattern.png)

Bootstrapped with [create-react-app-minimal](http://conwy.codes/cram).

## Getting started

### Installing

```

npm install react-mvp

```

### Usage

Declare your view, as a "dumb" component, with all input and output taking place through props (values and event handlers).

```js

import React from 'react'

class TodoApp extends Component {

  render = () => {

    const { todoList, newItem, onAddNewItem, onChangeNewItem } = this.props

    return 


      


        Enter new item

        

        Add

      


      


        {todoList.map(item =>

          
{item}

        )}

      

    

  }

}

```


Then declare your model, with any needed defaults.

```js

class TodoAppModel {

  todoList = []

  newItem = ''

}

```

Then declare your presenter, as a class that inherits from `Presenter` in react-mvp.

```js

import { Presenter } from 'react-mvp'

class TodoAppPresenter extends Presenter {

  constructor(model, setModel) {

    super(model, setModel);

  }

  onChangeNewItem = event =>

    this.setModel({

      newItem: event.target.value

    })

  onAddNewItem = () =>

    this.setModel({

      newItem: '',

      todoList: this.model.todoList.concat([ this.model.newItem ])

    })

}

```

Finally, hook them all up together, using `connect`, and render the result. (This example assumes a web-browser.)

```js

import { connect } from 'react-mvp'

const App = connect(TodoAppModel, TodoAppPresenter, TodoApp)

import React from 'react'

import ReactDOM from 'react-dom'

ReactDOM.render(, document.getElementById('root'))

```

## Contributing

You're welcome to fork and/or contribute pull-requests and issues to the project.

### Cloning and installing

```bash

git clone https://github.com/jonathanconway/react-mvp

cd react-mvp

npm install

```

### Running tests

```bash

npm test

```