Никита Гущин

Надо, чтобы при нажатии на элемент меню он выделялся другим цветом. Это все получилось сделать.

Странно, что одно работает, а другое - нет. Механизм ведь один и тот-же. Простейшая реализация предполагает сохранение выбранного элемента меню в state:

class MyMenu extends React.Component {

  constructor(props) {
    super(props);
    this.handleItemClick = this.handleItemClick.bind(this);
    this.state = { selectedItem: null };
  }

  handleItemClick(selectedItem) {
    console.log('handleItemClick', selectedItem);
    this.setState({ selectedItem });
  }

  render() {
    const { items } = this.props;
    const { selectedItem } = this.state;
    const { handleItemClick } = this;

    return (
      <ul>
        { items.map( (item, key) => (
            <MenuItem
                key={key}
                item={item}
                isActive={item === selectedItem}
                onClick={handleItemClick}
             />
        )) }
      </ul>
    );
  }
}

И, соответственно, в самом компоненте MenuItem проверяем - если флаг isActive === true, то добавляем класс или еще чего:
Рабочий пример

Потому что this в момент выполнения кода вряд-ли указывает на div.pop.

var $pop = $('div.dop');
$pop.myRat({'tekr': $pop.data('rat') });

Просто как я понимаю из позиционирования jquery и angularjs - библиотека, упрощенный javascript, а второе - фреймворк, написанный на javascript'е, так?

jQuery - библиотека, облегчающая работу с DOM
Angular - фреймворк для построения single page application (spa)

Ни то ни другое никак не "упрощает" javascript. Так что js Вам выучить придется.

Стартануть сервер можно сделав package.json на подобии того, что используется в angular-seed:

{
    ...
    "scripts": {
        ...
        "start": "http-server -a localhost -p 8000 -c-1",
        ...
    }
    ...
}

Вот ссылка на пакет http-server.
При такой настройке можно запустить сервер в консоли командой "npm start". А сам сервер Вам уже порекомендовали @zhak55 и @rock .

Потому что при нажатии кнопки выполнится только вот эта конструкция:

function(){
    btn_status = 'номер_кнопки';
}

Чтобы все заработало, при нажатии на кнопку надо вызывать еще и код со свитчем

switch(btn_status){
    // ..
}

Но мне крайне не нравится Ваша конструкция. Во-первых: если вы используете jQuery, то используйте его везде. Вместо:

btn_3.onclick = function(){
    btn_status = '3';
}

Пишите:

$(btn_3).click(function(){
    btn_status = '3';
});

Во-вторых: можно использовать this для смещения кнопки:

$(btn_3).click(function(){
    btn_status = '3';
    $(this).css({
        marginLeft : '5px'
    });
});

Могу предложить такой вариант: у вас будет код, который будет обрабатывать данные (грубо говоря - контроллер) и шаблон, который будет вставлять готовые данные в html (это называется view).

Функция рендера такого шаблона может выглядеть так:

function render($templateName, $templateData)
{
        extract($templateData,EXTR_SKIP);
        ob_start();
        require($templateName);
        return ob_get_clean();
}

В этой функции мы с помощью extract все ключи ассоциативного массива $templateData превращаем в переменные текущей области видимости (они попадут в шаблон). Первый параметр - путь к шаблону.

Вызываться в контроллере она будет примерно так:

$templateVars = array();
$templateVars['data'] = array();
$templateVars['content'] = array(); // итд
while ($templateVars['data'][] = mysqli_fetch_assoc($result));
$html = render('templates/templ1.php',$templateVars);
echo $html;

А код шаблона будет выглядеть примерно так (тот самый файл templates/templ1.php, который мы использовали выше):

<?php for($i = 0; $i != count($data); ++$i) { $row = $data[$i]; ?>
    <div class='panel panel-default'>
        <div class='panel-heading'><h4><?=$row['title']?></h4></div>
        <div class='panel-body story'>
            <?=$content[0]?>
            <div class='clearfix'></div>
            <hr>
            <div class='row'>
                <p class='col-xs-6 text-left'>
                      <a href='post.php?id=<?=$row['id']?>'>Прочитать</a>
                </p>
                <p class='col-xs-6 text-right'>
                      <span class='glyphicon glyphicon-comment'><?=$row['countcomments']?></span>
                </p>
            </div>
        </div>
    </div>
<?php } ?>

Очень желательно ничего с данными в шаблоне не делать.

У меня такое решение: берем прямоугольный блок и сдвигаем его - получается параллелограмм. Но проблема в том, что все содержимое будет тоже сдвинуто (например: обычный текст станет наклонным). Поэтому, внутри мы делаем еще контейнер, который сдвигаем в обратном направлении, и помещаем туда карту (в примере - просто картинка):
jsfiddle.net/Rc6MV/2

PS плохо, только то, что в классе .map появляется магия в виде margin-left: -45px - чтобы сдвинуть блок к началу параллелограмма (нижний левый угол)