Fierfoxik

const app = new Vue({
    store,
    el: '#app',
    data() {
        return {}
    },
    computed: {
        rgbColors() {
            return this.$store.getters.rgbColors
        }
    },
    watch: {
        rgbColors(newValue, oldValue) {

        }
    }
});

function Block({ 
  children,
  isLoading, 
  isError, 
  isEmpty, 
  emptyText, 
  fetch,
}) {
  const showPreloader = isLoading && !isError;
  const allDataIsReady = !isLoading && !isError;
  const showEmptyText = allDataIsReady && isEmpty && emptyText;

  return (
    <Wrapper>
      {showPreloader && <Preloader />}
      {isError && <TryAgain fetch={fetch} />}
      {showEmptyText && <Empty>{emptyText}</Empty>}
      {allDataIsReady && children}
    </Wrapper>
  );
}

render() {
  const { isLoading, isError, orderList } = this.props;

  return (
    <Block
      isLoading={isLoading}
      isError={isError}
      isEmpty={!ordersList.length}
      fetch={this.fetchOrdersList}
      emptyText="You don't have any orders."
    >
      {ordersList.map(order => <Order key={order.id} order={order} />}
    </Block>
  )
}

var i
  , w
  , div
  , box
  , label
  , parent = document.body // к чему приклеивать блоки
  , perBlock = 5 // сколько в одном блоке
;
  
for( i = 0; i < widgetSettings.length; i++) {
  w = widgetSettings[i];

  box = document.createElement('input');
  box.type = 'checkbox';
  box.id = box.name = w.id;
  box.value = w.value;
  
  label = document.createElement('label');
  label.appendChild(box);
  label.appendChild( document.createTextNode(w.text));
  
  if( i % perBlock === 0) {
    if(div) parent.appendChild(div);
    div = document.createElement('div');
  }
  div.appendChild(label);
}
if( (i-1) % perBlock) parent.appendChild(div);

var arr = [{id:1}, {id:1}, {id:2}, {id:3}, {id:4}];

var result = arr.filter(elem=>elem.id==1);

function removeSomething(id) {
  return { type: 'RemoveSomething_Action', payload: { id } }
}

function reducer(state = initialState, action) {
  switch(action.type) {
    //...
    case 'RemoveSomething_Action':
      return state.filter(el => el.id !== action.payload.id)
    // ...
  }
}

class Cover extends Component { 
   state = {
     loaded: false,
     width: 0,
     height: 0,
   }

   componentDidMount() {
     const img = document.createElement('img')

     img.onload = e => {
       console.log('image loaded', img.width, img.height)
       this.setState({ loaded: true, width: img.width, height: img.height })
     }

     img.src = this.props.src
   }

  renderLoading() {
    return <div>loading... </div>
  }
  
  renderLoaded() {
    const { width, height } = this.state
    const isFits = width === 140 && height === 205
    return isFits
      ? <div>обложка успешно установлена</div>
      : <div>Обложка должна быть 140х205</div>
  }

   render() {
       return this.state.loaded ? this.renderLoaded() : this.renderLoading()
   }
}

export default function rootReducer(state = [], action) {
    console.log(action);
    if(action.type === 'BUTTON_CLICK'){
        return[
        ...state,
            action.book
        ]
            store.dispatch(state) // выкинуть отсюда.
    }
    return state;
}

export default class Inputs extends Component {
    constructor(props) {
        super(props)
        this.onAuthorChange = this.onAuthorChange.bind(this)
        this.onNameChange = this.onNameChange.bind(this)
        this.takeVal = this.this.takeVal.bind(this)
        this.state = {
            author: '',
            name: '',
        }
    }
    onAuthorChange(e) {
        this.setState({ author: e.target.value })
    }
    onNameChange(e) {
        this.setState({ name: e.target.value })
    }
    takeVal() {
        this.props.addItem({ // имя, под которым вы передали свой экшен в качестве пропса от родителя
            author: this.state.author,
            name: this.state.name,
        })
    }
    render() {
        const {author, name} = this.state
        return (
            <div className="app__enter">
                <div className="inputs-bock">
                    <input onChange={this.onAuthorChange} className="inputs-book__author" placeholder="Автор" type="text" value={author}/>
                    <input onChange={this.onNameChange} className="inputs-book__name" placeholder="Название" type="text" value={name}/>
                </div>
                <div className="button-wrap">
                    <button onClick={this.takeVal}>Добавить книгу</button>
                </div>
            </div>
        )
    }
}

import React, { Component } from 'react'
import Inputs from '../components/Inputs'
import { connect } from 'react-redux'

import {
  addItem,
} from '../../actions/UserActions'

class InputsContainer extends Component {
  render() {
    return <Inputs addItem={this.props.addItem} />
  }
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = (dispatch) => ({
  addItem: (params) => dispatch(addItem(params)),
})

export default connect(mapStateToProps, mapDispatchToProps)(InputsContainer)

add_action( 'wp_enqueue_scripts', 'register_my_styles' );

function register_my_styles() {
	wp_register_style( 'mystyle1', get_stylesheet_directory_uri().'/style1.css' );
	wp_enqueue_style( 'mystyle1' );
}

<?php if ( is_front_page() ) : ?>
         <div class="header-page clearfix">
              <h2 class="name-page">Акции</h2><a href="#" class="cart-btn">
              <div class="cart-btn__img"><img src=" <?php echo esc_url( get_template_directory_uri() );?>/img/shopping-bag.svg" alt=""></div>
              <div class="cart-btn__text">Ваша корзина</div></a>
         </div>
<?php else: ?>
        <div>AAAAAAAAAAAAAAAA</div>
<?php endif; ?>