Антон Спирин

Можно так: https://jsfiddle.net/rockon404/5dt5xh6t/

Запускаете, например, на 3000 и 3001.
если хотите с одного хоста, то настраиваете NGINX как-то так:

server {
    listen 80;
    server_name example.com;
    access_log /var/log/nginx/example.com;

    location / {
        proxy_pass         http://127.0.0.1:3000;
    }

    location /second-project-path {
        proxy_pass         http://127.0.0.1:3001;
    }
}

Корневой путь для первого проекта, /second-project-path для второго.

Если хосты тоже хотите разные, то так:

server {
    listen       80;
    server_name  first-project.com;
    access_log /var/log/nginx/first-project.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
    }
}

server {
    listen       80;
    server_name  second-project.com;
    access_log /var/log/nginx/second-project.com;

    location / {
        proxy_pass http://127.0.0.1:3001;
    }
}
}

Простейший вариант https://jsfiddle.net/hk6wscLt/

Можно так:

const c = a.map((i, el) => ({ selector: `#${el.id}`}));

Ваш вариант не работал, потому что вы до цикла создали объект и каждую итерацию меняли значение его ключа selector и пушили в массив. В итоге у вас в массиве все элементы ссылаются на один и тот же объект.
Ваш вариант исправить можно так:

var a = $("span[id ^= call]"),
c = [];
for (var i = 0; i < a.length; i++) {
  let b = {
    selector:"#" + a.eq(i).attr("id"),
  };

  c.push(b);
}

Решение https://jsfiddle.net/y030zsce/

Решил:
checkRange=(a,x,y,z=0)=>a.map(e=>z+=e<x==e>y)|z

UPD еще решение:
checkRange=(a,x,y)=>a.map(e=>a.a+=e<x==e>y)|a.a

По-хорошему redux.
Но вы так же можете передавать список из App в Items с колбек функцией, которая запишет в state компонента App id выбранного продукта, ее надо прокинуть через Items в каждый Item и там по клику вызывать:

class App extends Component {
  state = {
    activeItemId: -1,
  };
  
  selectItem = id => {
    this.setState({
       activeItemId: id,
    });
  };

  render() {
    const { items } = this.props;
    const { activeItemId } = this.state;
   
    const activeItem = items.find(item => item.id === selectedItemId);

    return (
      <Wrapper>
        <More item={activeItem} />
        <Items 
          items={items}
          onSelectItemCalback={this.selectItem}
        />
      </Wrapper>
    );
  }
}

Если надо построить список ссылкок, то массив должен быть примерно такого вида:

const links = [
  {
    label: 'Home',
    path: '/',
  },
  {
    label: 'About',
    path: '/about',
  },
  {
    label: 'Shop',
    path: '/shop',
  },
  {
    label: 'Home',
    path: '/',
  },
  {
    label: 'Contact',
    path: '/contact',
  },
];

Строится так:

return (
  <Wrapper>
    {links.map((link, i) => (
       <Link key={i} to={link.path}>
         {link.label}
       </Link>
     ))}
  </Wrapper>
);

Если же вам просто надо обратиться к конкретному элементу:
this.state.href[0] // первый элемент массива

Исправленный вариант:

it('test openModal', () => {
    expect(actions.openModal({ name: 'Some name'}, '1')).toEqual({
      type: types.OPEN_MODAL,
      payload: {
        id: '1',
          initData: {
            name: 'Some name',
        },
      },
    });
  });

Вы вместо аргументов передавали в actionCreator объект action, который actionCreator должен на основе аргументов создавать и возвращать. В итоге он у вас возвращал:

{
  type: types.OPEN_MODAL,  // тут естественно значение
  payload: {
    id: undefined,
    initData: {
      id: '1',
      initData: {
        name: 'Some name',
      },
    },
  },
}

Можно использовать applyContainerQuery из react-container-query.
Это будет лучше, чем по всему приложению ставить и снимать слушатели в функциях жизненного цикла.

import { applyContainerQuery } from 'react-container-query';
import { Hello, Boy, Wrapper } from '../somePlace';

const myQuery = {
  hasMinWidth: {
    minWidth: 1024,
  },
};

class MyComponent extends Component {
  ...
  render() {
    const {
      containerQuery: { hasMinWidth },
    } = this.props;

    return (
      <Wrapper>
        {hasMinWidth ? <Hello /> : <Boy />}
      </Wrapper>
    );
  }
}

export default applyContainerQuery(MyComponent, myQuery);

Вы мутируете старое состояние, естетсвенно у вас ничего не работает.
Исправить можно так:

export default function(state = initialState, action) {
   if (action.type === 'DIALOG_SELECTED') {
      return state;
   }
   if (action.type === 'DIALOG_DELETE') {
      const newState = [...state];
      newState.shift();

      return newState;
   }
   else {
      return state;
   }
}

bindActionCreators с connect не используют. Бессмысленно, так как connect сам его вызывает. Так будет лаконичней:

const mapStateToProps = state => ({
  dialogs: state.dialogs,
});

const mapDispatchToProps = {
  selectDialog: actions.selectDialog,
  deleteDialog: actions.deleteDialog, 
};

export default connect(mapStateToProps, mapDispatchToProps)(Sidebar);

Функции биндить каждый рендер не лучшая идея. Используйте class field function:

class Sidebar extends Component {

   selectDialog = () => {
      this.props.selectDialog();

   };
   deleteDialog = () => {
      this.props.deleteDialog();
   };

   render() {
      console.log('рендер сайдбара');
      return (
         <div className='sidebar'>
            <div className='sidebar__content'>
               <div className='sidebar__head'></div>
               <SidebarChatGroup chatName='Общий'>
                  <button onClick={this.selectDialog}>Выбрать</button>
                  <button onClick={this.deleteDialog}>удалить</button>
               </SidebarChatGroup>
            </div>
            <div className='sidebar__bg'></div>
         </div>
      )
   }
}

Вот вариант на ES6, используется spread operator:

const circle_1 = [7, 2, 3, 5, 16, 50, 25, 40],
      circle_2 = [2, 5, 10, 30, 25, 3, 10, 25],
      circle_3 = [25, 10, 2, 10, 5, 2, 10, 5],
      circle_4 = [7, 2, 3, 20, 3, 7, 2, 5],
      circle_5 = [2, 20, 1, 7, 25, 1, 25],
      circle_6 = [3];
      
function findSum(value, arrays, i = 0) {
  for (let j = 0; j < arrays[i].length; j++) {
    const el = arrays[i][j];
    
    if (i < arrays.length - 1) {
      const result = findSum(value - el, arrays, i + 1);
      
      if (result !== null) {
        return [el, ...result];
      }
    } else if (el === value) {
      return [el];
    }
  }
  return null;
}

console.log('result', findSum(136, [
  circle_1, 
  circle_2, 
  circle_3, 
  circle_4, 
  circle_5,
  circle_6
]));

// => result  [50, 30, 25, 3, 25, 3]

Демо: https://jsfiddle.net/0ho4g942/

"parser": "babel-eslint",
"parserOptions": {
   "ecmaFeatures": {
     "jsx": true
   }
 },

setState - ассинхронная функция. Можно использовать колбек:

this.setState({
  columnId,
}, this.fetchData);

но это не лучшее решение с точки зрения архитектуры, если вам надо вызывать fetchData по изменению разных частей state (пагинация, сортировка, количество элементов на странице и пр.).
В этом случае fetchData лучше вызывать в componentDidUpdate:

componentDidUpdate(_, prevState) {
  if (prevState.columnId !== this.state.columnId) {
    this.fetchData();
  }
}

Так все условия вызова fetchData по изменению состояния будут находиться в одном месте. Вместо кучи колбеков по функциям компонента. Но если собираетесь дергать только по onSortChange, то можно вызывать fetchData в колбеке setState.

File --> Preferences --> Languages & Frameworks --> JavaScript
JavaScript language version выбрать ECMAScript 6 или ту какую собираетесь использовать.

На MacOS Sierra Preferences находится в меню PhpStorm

dataLayer является массивом. Обращаться к его элементам надо по индексу.

dataLayer[0].ecommerce.add.products.push({ name: 'name'; price: 0 });

Для обычных цветов, принято использовать HEX значения:
color: #607D8B;

Для цветов с прозрачностью принято использовать RGBA:
color: rgba(0, 0, 0, 0.5);

Для полностью прозрачного принято использовать переменную transparent:
color: transparent;

Остальные html переменные цветов использовать можно, но зачем? В большинстве случаев HEX запись короче. Да и дизайнеры редко используют стандартные цвета.

Программы пипетки:
для Windows Just Color Picker или один из кучи аналогов,
для Linux GPick или один из аналогов,
на MacOS пока была без надобности, гуглите.

Используйте SCSS исходники. Их можно легко настроить и подключить только нужное.

Если у вас клиент это продавец. То:
GET /api/v1/{userId}/products
GET /api/v1/{userId}/product/{id}
POST /api/v1/{userId}/product
PATCH /api/v1/{userId)/product/{id}
DELETE /api/v1/{userId}/product/{id}

Если покупатель, то вам по-хорошему добавить сущность cart.
GET /api/v1/cart
POST /api/v1/cart/item
PATCH /api/v1/cart/item/{id}
DELETE /api/v1/cart/item/{id}
Тут если запросы приходят от пользователя, его id не нужен.

Заказы:
GET /api/v1/{userId}/orders
GET /api/v1/{userId}/order/{id}
POST /api/v1/{userId}/order
PATCH /api/v1/{userId)/order/{id}
DELETE /api/v1/{userId}/order/{id}

Разруливать эндпоинты через action плохая идея.