Why is ReactJS

taking over the world?

Abstraction & Encapsulation

A component

Markup

Functionality

State

Styles

Props

import InteractiveBtn from '...';
import Carousal from '...';

class Page extends React.Component {
    render () {
        return (
            <div>
                <InteractiveBtn type={"previous"} />
                <Carousal />
                <InteractiveBtn type={"next"} />
            </div>
        )
    }
}

import InteractiveBtn from '...';
import Carousal from '...';

import styles from './styles'

class Page extends React.Component {
    render () {
        return (
            <div>
                <InteractiveBtn type={"previous"} className={styles["prev-btn"]}/>
                <Carousal />
                <InteractiveBtn type={"next"} className={styles["next-btn"]}/>
            </div>
        )
    }
}

import InteractiveBtn from '...';
import Carousal from '...';

import styles from './styles';

class Page extends React.Component {

    changeSlide(slide) {
        ...
    }

    render () {
        return (
            <div>
                <InteractiveBtn
                    type={"previous"}
                    className={styles["prev-btn"]}
                    onClick={this.changeSlide(current - 1)}
                />
    
                <Carousal />
    
                <InteractiveBtn
                    type={"next"}
                    className={styles["next-btn"]}
                    onClick={this.changeSlide(current + 1)}
                />
            </div>
        )
    }
}

import InteractiveBtn from '...';
import Carousal from '...';
import styles from './styles';

class Page extends React.Component {
    constructor(args) {
        super(args);
        this.state = {
            images: [ ... ]
            current: 0
        }
    }

    changeSlide(slide) {
        ...
    }

    render () {
        let current = this.state.current;

        return (
            <div>
                <InteractiveBtn
                    type={"previous"}
                    className={styles["prev-btn"]}
                    onClick={this.changeSlide(current - 1)}
                />
    
                <Carousal image = { this.state.images[current] } />
    
                <InteractiveBtn
                    type={"next"}
                    className={styles["next-btn"]}
                    onClick={this.changeSlide(current + 1)}
                />
            </div>
        )
        
    }
}

class Carousal extends React.Component {
    render () {
        return (
            <div>
                <img src = { this.props.image } />
            </div>
        )
        
    }
}

export default Carousal 

Time for some code?

https://goo.gl/7gedXd

Clone and checkout the `exercise-1` branch

Component A

State

Component B

State

How do I share the state?

Component A

State

Component B

Parent Component

Spaghetti Code.

:'(

Component A

State

Component B

Parent Component

What is Redux?

Is a methodology

Not just a framework

Maintain a single state

State change should be predictable

The Redux Family

Some more code?

Checkout the `exercise-2` branch