React

• nie jest frameworkiem
• biblioteka do zarządzania UI
• minimalne API

React - komponenty

źródło: https://facebook.github.io/react/img/blog/thinking-in-react-components.png

Staramy się wydzielić jak najmniejsze i jak najbardziej reużywalne części naszych widoków

• formularz
• lista
• element-listy
• przycisk
• input

React

// import biblioteki React
import React from 'react';

// Stworzenie klasy komponentu
// Komponenty muszą dziedziczyć z React.Component
class MyComponent extends React.Component {

    // Każdy komponent musi mieć funkcje render
    // jest ona odpowiedzialna za to jak nasz 
    // komponent będzie prezentowany na stronie
    render() {
        var name = "My Name";
        return (
            // JSX pozwala na tworzenie w przyjazny sposób html
            // wewnątrz javascript. Możemy osadzać kod javascript wewnątrz {}
            <div>Hello from react component {name + " appended string"}</div>
        )
    }
}

React - JSX

• możemy osadzać javascript wewnątrz {}
• class -> className
• style CSS pisane jako obiekt oraz "-" zamienione na camelCase (font-size -> fontSize)
• podpinanie eventów onClick, onChange, onFocus

React - JSX

<div>
    <h2 style={{ fontSize: 20, padding: 0 }}>Product form</h2>
    <label>{labelName}</label>
    <button onClick={this.addProduct}>Add product</button>
</div>

React - setState

class MyComponent extends React.Component {
    constructor(props) {
        this.state = {
            counter: 0
        };
    }

    increase() {
        this.setState({ counter: this.state.counter + 1 });
    }    

    render() {
        return (
            <div>
                <span>current counter: {this.state.counter}</span>
                <button onClick={this.increase}>Increase</button>
            </div>
        )
    }
}

React - props

class ChildComponent extends React.Component {
    render() {
        return <span>child component: {this.props.name}</span>
    }
}

class ParentComponent extends React.Component {
    render() {
        return (
            <div>
                <ChildComponent name={"props from parent"} />
            </div>
        )
    }
}

React - defaultProps

class ChildComponent extends React.Component {
    render() {
        return <span>child component: {this.props.name}</span>
    }
}

ChildComponent.defaultProps = {
    name: 'default name'
};

class ParentComponent extends React.Component {
    render() {
        return (
            <div>
                <ChildComponent name={"props from parent"} />
            </div>
        )
    }
}

React - propTypes

import PropTypes from 'prop-types';

class ChildComponent extends React.Component {
    render() {
        return <span>child component: {this.props.name}</span>
    }
}

ChildComponent.propTypes = {
    name: PropTypes.string.isRequired
};

yarn add prop-types

React - coding time!

• lista postów
• dodawanie postów
• usuwanie postów

React blog

Redux

Redux is a predictable state container for JavaScript apps.
 

Redux

Redux

Niemutowalne struktury

const arr = [1, 2, 3];

// źle, zmieniamy wartości istniejącej tablicy
arr.push(3);
arr.push(4);


// dobrze, tworzymy nową tablicę
const arr2 = [...arr, 3, 4];

const obj = { name: 'test' };

// źle, mutujemy istniejący obiekt
obj['new_key'] = 'new value';

// dobrze, stworzony został nowy obiekt
const obj2 = {...obj, new_key: 'new_value'};

Redux

import { createStore } from 'redux'

const initialState = {};
createStore(initialState);

react-redux

<Provider store={store}>
    <App />
</Provider>

import React from 'react';
import {connect} from 'react-redux';

class MyComponent extends React.Component {
    render() {
        return (
            <div>{this.props.todos}</div>
        );
    }
}


function mapStateToProps(state) {
  return { todos: state.todos }
}

export default connect(mapStateToProps)(MyComponent)