# pure-frame
**Repository Path**: redraiment/pure-frame
## Basic Information
- **Project Name**: pure-frame
- **Description**: A data-driven, functional, and reactive framework for building Modern Web Apps in JavaScript. It leverages React, inspired by re-frame.
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-10
- **Last Updated**: 2022-06-06
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
Pure-frame
====
A data-driven, functional, and reactive framework for building Modern Web Apps in JavaScript. It leverages React, inspired by [re-frame](https://day8.github.io/re-frame/re-frame/).
# Concepts
# Install
## npm
```sh
npm i pure-frame
```
## yarn
```sh
yarn add pure-frame
```
# Example with create-react-app
## Step 0: setup
```sh
mkdir -p example/{src,public}
cd example
yarn init -y
yarn add pure-frame
yarn add --dev react-scripts
```
## Step 1: create public/index.html
```html
Hello pure-frame
```
## Step 2: create src/index.jsx
```js
import React from 'react';
import ReactDOM from 'react-dom';
import {
PureFrameRoot,
defineExtractor,
defineStateReducer,
defineView,
} from 'pure-frame';
// Step 1: create pure function component.
const ClickCount = ({ count, increase }) => (
<>
Hello pure-frame
{count}
);
// Step 2: define view, injects formulas and declares actions.
const ClickCountView = defineView({
injects: {
':count': 'count'
},
actions: {
'increase': ':increase'
}
}, ClickCount);
// Step 3: provide data (from state snapshot) for component.
defineExtractor(':count', 'count');
// Step 4: handle action from component.
defineStateReducer(':increase', state =>
state.update('count', count => count + 1));
// Step 5: Compose components.
ReactDOM.render(
,
document.getElementById('app')
);
```
## Step 3: start
```sh
yarn react-scripts start
```
