<commit_before># Frontend - Display View Model Data in the Browser

In the previous lesson, you modified your application so that it can answer queries. At this moment, your application does not provide a frontent that would present this data to an end-user. In this lesson, you will learn how to create a React frontend to display your reSolve application's data.

You can use the standard HTTP API to communicate with a reSolve backend and implement the frontend using any client side technology.

To facilitate client-server communication, reSolve provides the **resolve-redux** library providing HOCs allowing you to easily connect your React components to the backend.

Create a **ShoppingList.js** file end the client application's containers folder. In this file, implement a component that displays a list of values obtained ftom the **data** prop:

**client/containers/ShoppingList.js**

<!-- prettier-ignore-start -->
[embedmd]:# (../../examples/shopping-list-tutorial/lesson-4/client/containers/ShoppingList.js /import \{ ListGroup/ /^\}/)
```js
import { ListGroup, ListGroupItem, Checkbox } from 'react-bootstrap'

export class ShoppingList extends React.PureComponent {
  render() {
    const list = this.props.data
    return (
      <ListGroup style={{ maxWidth: '500px', margin: 'auto' }}>
        {list.map(todo => (
          <ListGroupItem key={todo.id}>
            <Checkbox inline>{todo.text}</Checkbox>
          </ListGroupItem>
        ))}
      </ListGroup>
    )
  }
}
```
<!-- prettier-ignore-end -->

The example code uses components from the **react-bootstrap** library to keep the markup compact.

Now you can use the **resolve-redux** library's **connectViewModel** function to bind your component to **ShoppingList** view model implemented earlier:

<!-- prettier-ignore-start -->
[embedmd]:# (../../examples/shopping-list-tutorial/lesson-4/client/containers/ShoppingList.js /export const mapStateToOptions/ /export default connectViewModel/)
```js
export const mapStateToOptions = (state, ownProps) => {
  return {
    viewModelName: 'ShoppingList',
    aggregateIds: ['root-id']
  }
}

export default connectViewModel
```
<!-- prettier-ignore-end -->

Run your application to see the result:
![result](images/lesson4_result.png)<commit_msg>Lesson 4 - Update the content<commit_after># Frontend - Display View Model Data in the Browser

In the previous lesson, you modified your application so that it can answer queries. However, at this moment, your application does not provide a frontent that would present this data to an end-user. In this lesson, you will learn how to create a React frontend to display your reSolve application's data.

This tutorial sticks to React + redux as the default choice for building a frontend for a reSolve application. Both React and redux work well in congunction with reSolve's infrastructure. To facilitate interoperability of React + redux on the client and reSolve on the server, the **resolve-redux** library is provided. This library contains HOCs allowing you to easily connect your React components to the backend.

Note that, if required, you can use the standard HTTP API to communicate with a reSolve backend and implement the frontend using any client side technology.

### Implement a React Frontend

Create a **ShoppingList.js** file end the client application's containers folder. In this file, implement a component that displays a list of values obtained ftom the **data** prop:

**client/containers/ShoppingList.js**

<!-- prettier-ignore-start -->
[embedmd]:# (../../examples/shopping-list-tutorial/lesson-4/client/containers/ShoppingList.js /import \{ ListGroup/ /^\}/)
```js
import { ListGroup, ListGroupItem, Checkbox } from 'react-bootstrap'

export class ShoppingList extends React.PureComponent {
  render() {
    const list = this.props.data
    return (
      <ListGroup style={{ maxWidth: '500px', margin: 'auto' }}>
        {list.map(todo => (
          <ListGroupItem key={todo.id}>
            <Checkbox inline>{todo.text}</Checkbox>
          </ListGroupItem>
        ))}
      </ListGroup>
    )
  }
}
```
<!-- prettier-ignore-end -->

The example code uses components from the **react-bootstrap** library to keep the markup compact.

Now you can use the **resolve-redux** library's **connectViewModel** function to bind your component to **ShoppingList** view model implemented earlier:

<!-- prettier-ignore-start -->
[embedmd]:# (../../examples/shopping-list-tutorial/lesson-4/client/containers/ShoppingList.js /export const mapStateToOptions/ /export default connectViewModel/)
```js
export const mapStateToOptions = (state, ownProps) => {
  return {
    viewModelName: 'ShoppingList',
    aggregateIds: ['root-id']
  }
}

export default connectViewModel
```
<!-- prettier-ignore-end -->

Now you can place the shopping list within the application's root component:

**client/containers/App.js**

``` js
const App = () => (
  <div>
    ...
    <ShoppingList></ShoppingList>
  </div>
)
```

Run your application to see the result:
![result](images/lesson4_result.png)
{'fraction_non_alphanumeric': 0.11016949152542373, 'fraction_numerical': 0.002562081198265668, 'mean_word_length': 3.94157740993184, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 32, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6311824', 'n_tokens_mistral': 1420, 'n_tokens_neox': 1378, 'n_words': 536}