React architecture

name: inverse
layout: true
class: middle
---
class: title, center, middle, inverse
# Minimalizm w React
![](images/logo.png "Flux")
---
class: title, center, middle, inverse
# leniwy programista

---
class: title, center, middle, inverse
# leniwy programista
## więcej myśli mniej pisze
---
class: center
## MVC → Flux
---
class: center
## MVC
![](images/mvc1.png "Flux")
---
class: center
## MVC
![](images/mvc2.png "Flux")
---
class: center
## Flux
![](images/flux.png "Flux")
---
# Actions
Akcje wykonywane przez użytkownika, API, serwisy,
---
# Dispatcher
Hub pomiędzy akcjami a storem. Przesyła odpowiednie informacje do odpowiedniego stora
---

# Store
Redux store trzyma nam aktualny stan aplikacji
---
# View
React dostarcza komponentową architekturę opartą na wirtualnym DOMie.
Do widoków dostarczamy jedynie propsy (properties)
---
class: center
## Simple form
![](images/login.png "Flux")
---
class: center
![](images/input.png "Flux")
---
# Input component
## Props
  - label
  - value
  - placeholder
  - type

---
# Input component

## Props
  - label
  - value
  - placeholder
  - type

## Actions
  - onChange
---
class: center
```js
import React from 'react';
import styles from './Input.css';

const Input = ({ label, value, type, placeholder, onChange }) => (
  <div className={styles.container}>
    <p>{label}</p>
    <input
      defaultValue={value}
      type={type}
      placeholder={placeholder}
      onChange={(e) => { onChange(e.target.value); }}
    />
  </div>
);

export default Input;
```
---
class: center
![](images/button.png "Flux")
---
# Button component
## Props
  - text
---
# Button component

## Props
  - text

## Actions
  - onClick
---
```js
import React from 'react';
import styles from './Button.css';

const Button = ({ onClick, children }) => (
  <div className={styles.container}>
    <button onClick={onClick}>
      {children}
    </button>
  </div>
);

export default Button;
```
---
class: center
## Simple form
![](images/login.png "Flux")
---
class: center
![](images/actions.png "Flux")
---
class: center
![](images/props.png "Flux")
---
```js
import Button from 'Button';
import Input from 'Input';

export class App extends React.Component {
  render() {
    return (
        <div>
          <Input onChange={this.onChangeLogin}/>
          <Input onChange={this.onChangePassword}/>
          <Button onClick={this.onClick}>Login</Button>
        </div>
      );
  }
  onChangeLogin = () => {}
  onChangePassword = () => {}
  onClick = () => {}
}
```
---
```js
import Button from 'components/Button';
import Input from 'components/Input';
import { setLogin } from 'services/app';

export class App extends React.Component {
  render() {..}
  onChangeLogin = (login) => {
    this.props.dispatch(setLogin(login))
  }
  onChangePassword = () => {}
  onClick = () => {}
}
```
---
# KONIEC
---
class: title
# Źródła
---
Prototyowanie z React [Poprzednia prezentacja](https://archibold.github.io/react-prototyping/)
---
in depth overview [Flux](https://facebook.github.io/flux/docs/in-depth-overview.html#content)
---
[Flux and Redux](https://blog.andyet.com/2015/08/06/what-the-flux-lets-redux/)
---
[React + Webpack Yeoman generator](https://github.com/marcopeg/generator-reapp)
---
Napisz maila: [piotr.borysowski@gmail.com](mailto:piotr.borysowski@gmail.com)