sajithdilshan

import React from "react";
import ColorAppStore from "../stores/ColorAppStore";

export default class ColorComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            color: ColorAppStore.getActiveColor()
        }

sajithdilshan

import dispatcher from "../Dispatcher";
import {EventEmitter} from "events";
import * as ColorAppActions from "../actions/ColorAppActions";

class ColorAppStore extends EventEmitter {

    constructor() {
        super();
        this.activeColor = "lightgrey";
    }

sajithdilshan

import React from "react";
import * as ColorAppActions from "../actions/ColorAppActions";

export default class ButtonComponent extends React.Component {

    onButtonClick = (colorName) => {
        ColorAppActions.changeColor(colorName)
    };

    render() {

sajithdilshan

import dispatcher from "../Dispatcher";

export const COLOR_APP_ACTIONS = {
    CHANGE_COLOR: 'colorAppActions.ChangeColor'
};

export function changeColor(colorName) {
    dispatcher.dispatch({
        type: COLOR_APP_ACTIONS.CHANGE_COLOR,
        value: colorName

sajithdilshan

import {Dispatcher} from "flux";

export default new Dispatcher();

sajithdilshan

.color-container {
    width: 400px;
    height: 400px;
}

.color-button {
    width: 50px;
    height: 20px;
    margin: 10px;
    background-color: #dddddd;

sajithdilshan

import React from "react";
import ButtonComponent from "./components/ButtonComponent";
import ColorComponent from "./components/ColorComponent";

export default class App extends React.Component {

    render() {
        return (
            <div>
                <ButtonComponent/>

sajithdilshan

import React from "react";

export default class ColorComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            color: "lightgrey"
        }
    }

sajithdilshan

import React from "react";

export default class ButtonComponent extends React.Component {

    render() {
        return (
            <div>
                <button className="color-button">Red</button>
                <button className="color-button">Blue</button>
            </div>

sajithdilshan

"GET /apple-touch-icon.png HTTP/1.1"	1
"GET /assets/css/style.css HTTP/1.1"	2
"GET /assets/data-tables/icons.css HTTP/1.1"	2
"GET /assets/data-tables/index.css HTTP/1.1"	2
"GET /assets/data-tables/themes/material.css HTTP/1.1"	3
"GET /assets/date-range-picker/daterangepicker.min.css HTTP/1.1"	2
"GET /assets/date-range-picker/daterangepicker.min.css.map HTTP/1.1"	16
"GET /assets/date-range-picker/daterangepicker.min.js HTTP/1.1"	2
"GET /assets/date-range-picker/daterangepicker.min.js.map HTTP/1.1"	15
"GET /assets/date-range-picker/moment.min.js HTTP/1.1"	4