mishapsv

Жусть какая. Зачем вы используете здесь <p>? Зачем вы используете BOM названия классов вручную?

button, input[type="search"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Готово. Попробуйте: jsbin.com/gacakezego/edit?html,css,output

class MainPage extends React.Component {
  constructor(props) {
          super(props);
          this.handleClick = this.handleClick.bind(this);
          this.state = {
            shown: false
          }
        }
        handleClick() {
          this.setState({
            shown: true
          });
        }

    render() {
        var styles = this.state.shown ? {
          display: 'block'
        } : {
          display: 'none'
        }
        return (
            <div className="orders-page">
                <div className="inner">
                    <div className="grid hidden-palm margin-bottom-30">
                        <CreateOrderButton onClick={this.handleClick} />
                        <PopupNewOrder style={styles} />
                    </div>
                </div>
            </div>
        );
    }
};

Так у вас state – объект. А filter – метод массива.

вы выводите в списке ВСЕ ! что пришло
соотв в первом случае приходит два элемента списка
во втором случае (свои данные) - приходит 16 элементов - собственно они и выводятся

Есть замечательный пакет classnames, который позволяет удобно создавать строку классов из объекта по условию.
И получаем:

{ boxes.map(box => (
  <button type="button" className={classNames({
    'btn': true,
    'btn-default': box.btn1 === 'Новое сообщение',
    'brn-primary': box.btn1 !== 'Новое сообщение'
  })}>
    ывыв
  </button>
                                            
)) }

Если уникальный класс всего один, то проще всего через switch/case или reduce, но если таких классов много, то чем обходить массив, лучше обращаться по ключу:

const statuses = {
'new_message': ["Новое сообщение", "btn-default"],
'pay': ["Оплатить", "btn-primary"]
...
};

className={statuses[box.btn1][1]}

Можно конечно оставить ключами и кириллические статусы, но это менее надежно, как мне кажется.

Можно еще хранить текст кнопки и класс не в массиве, а во вложенном объекте, для лучшей читаемости

P.S. Добавил пример

Ну что же вы используете ES6, а названия классов с маленькой буквы пишите. Назовите свой второй класс BtnOrderAction и будет вам счастье.

Каждое значение в scripts — это, по сути, скрипт операционной системы. Все верно, написаны они для *nix, и под виндой работать не будут даже при всех переменных окружения, потому что конструкция типа NODE_PATH=$NODE_PATH:./shared не является валидной для виндового интерпретатора командной строки. Надо исправить на что-то такое: SET NODE_PATH=%NODE_PATH%;.\shared. Скорее всего, путь к папке shared должен быть абсолютным.
Команду build надо поменять как-то так:

cmd /C "set NODE_ENV=production && webpack --progress --color -p --config webpack.prod.config.js"

Другие способы:
1) сделать форк, написать на JS кросс-платформенные скрипты, которые запускают нужные вещи с нужными параметрами, положить их в папку bin проекта и послать pull-request
2) одуматься и перейти на линукс.

P.S. Сейчас для кроссплатформенного запуска с нужными переменными среды есть set-env (не путать с setenv).

Дополнил ответ Руслан Абдуллаев
тыц

Должно быть как-то так
Основная проблема - getInitialState заменяется на коструктор и в ES6-синтаксисе нет автобайндинга, поэтому либо использовать .bind(this), либо стрелочные функции:

handleChange = (e) => {
    this.setState({val: e.target.value});
  }

  tick = () => {
    this.setState({
      first: new Date() - this.state.start
    });
  }