Varb

Всегда когда вам приходит какая-то структура, нужно пробегать ее полностью по каждому элементу, чтобы сгенерировать JSX-элемент. Для массивов обычно используют .map метод, для объектов - например Object.keys (так же подойдут конечно, и цикл forEach для массива, и цикл for in для объекта и т.д.)

Так как у вас в JSON приходит не массив объектов, а объект объектов то вам нужно пробегать с помощью Object.keys, например, и потом еще применить map к получившемуся массиву ключей. Пример получившегося массива:



Применяем map:

const template = Object.keys(data.books).map(item => <span key={data.books[item].id}>{data.books[item].author} - {data.books[item].name}</span>)

В данном случае в переменной template окажутся 2 JSX-элемента (тэги span с данными). Вам скорее всего нужно, чтобы это было tr. Поменять не трудно)

А json-loader вам нужен для того, чтобы webpack мог корректно импортировать такие файлы, так как пока json-лоадера нет, вебпак не знает как обрабатывать файлы с расширением .json. По такому же принципу вы подключаете css-loader, например, чтобы webpack мог "импортить цсски"

Я не знаю как конкретно в Laravel, но в принципе CSRF токен должен передаваться при любых POST запросах на сервер.
UPD:
Почитал документацию к Laravel, там все доходчиво написано. Получить токен можно с помощью <?php echo csrf_token(); ?>. Т.к. у вас нет форм, то можно сделать следующим образом:
1. В header добавить тег

<meta name="_token" content="<?php echo csrf_token(); ?>">

2. Далее, если вы используете jQuery, то добавление токена в запрос будет выглядеть следующим образом.

var csrftoken = $('meta[name=_token]').attr('content');
$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken)
        }
    }
});

вы о косых пунктах меню?
тогда все просто:

li.active{
    -webkit-transform: skewX(-20deg); //для активно li
    transform: skewX(-20deg);
}
a{
    -webkit-transform: skewX(20deg); //для текста
    transform: skewX(20deg);
}

вот на скорую руку, дальше сам сможешь jsfiddle

Сейчас вызов console.log() происходит до того, как вы нажали на кнопку, а при нажатии на кнопку ничего не выводится.

Перенесите его вот сюда:

Там где подключается ваш js-файл добавьте в параметрах номер версии. Например так:
<script src="/my/script.js?v=1"></script>
При желании можете это дело автоматизировать

Если вам нужно плавно скрыть элемент - CSSTransitionGroup вполне подойдет. Прочтите документацию - https://facebook.github.io/react/docs/animation.html (не вижу смысла здесь ее переписывать). В общем принцип работы таков - компонент CSSTransitionGroup сохранит элемент в DOM на время перехода (анимации) и сразу после ее завершения - удалит (если речь об удалении DOM).

Вот так у меня выглядит код для такого меню:

<CSSTransitionGroup transitionName="ProductCategoriesMenu--submenu-transition" transitionEnter={false}>
          {category.products.length && isCategorySelected ? this.renderSubMenu(category) : null}
        </CSSTransitionGroup>

.ProductCategoriesMenu--submenu-transition-leave {
  max-height: 1000px;
  overflow: hidden;
}

.ProductCategoriesMenu--submenu-transition-leave-active {
  max-height: 0;
  transition: max-height 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

Стив Джобс и Билл Гейтс не заканчивали не потому, что они могли "сами все освоить", а потому что к тому моменту у них уже был свой бизнес, который приносил более чем прилично денег, и времени на учебу уже не хватало.

Ты сейчас готов бросить учебу, потому что ты уже нашел работу своей мечты на всю жизнь?
Нет?

Так учись.
Хочешь побыстрее закончить - кто тебе мешает пойти в деканат и попросить сдать экзамены экстерном? Ты же можешь сам все выучить быстрее, чем преподаватели тебе будут давать?

Вот и ответы на твои вопросы.

Лишняя закрывающая скобка

#left-side{
  padding: 40px 40px;
  width: 50%;
  
}

  
}
#hide{

Примерно так можно: jsfiddle.net/IonDen/d0LrsdL6

<div class="line">
    <div class="cont">Йо, какой-то блок</div>
    <div class="cont-line"><div></div></div>
    <div class="cont">Йо, какой-то блок</div>
</div>

.line {
    display: table;
    width: 100%;
}
.cont {
    vertical-align: middle;
    display: table-cell;
    white-space: nowrap;
    width: 1%;
}
.cont-line {
    vertical-align: middle;
    display: table-cell;
    padding: 0 10px;
}
.cont-line div {
    height: 2px;
    background: #000;
}

рассказываю на пальцах
object pool - он же пул синглтонов - он же registry в опенкарте. Это склад инструментов с двумя главными методами - положить в склад и забрать из склада. Инициализируется он в index.php

роутер в опенкарте работает через гет переменную route. А еще точнее если в урле нету знака вопроса то опенкарт будет считать такой урл -ЧПУшным и будет прогонять через seo_url контроллер, но это другая история. Через гет переменную route опенкарт понимает какой контроллер вызвать. route переменную разбирает конструктор класса Action (system/engine/action.php)

По идеологии MVC все запросы сыпятся на контроллер, контроллер содержит логику, модель содержит инструменты для этой логики, вьюха выводит то что наделал контроллер.
логика така. >index.php ........ $action=new Action($_GET['route']) > $action->execute(); и в этот момент вызывается контроллер в котором происходит все мясо. Сам контроллер в свою очередь тоже является объектом своего класса(это отдельная тема, но каждый контроллер это по сути класс) и внутри него есть переменная $this, к которой если обратиться то будет регистр со всеми синглтонами (работа с базой, работа с валютами, языками и прочее) и будут все модели, которые будут загружены в этот контроллер через синглтон $this->load->model('account/login').

все оооочень сжато но если че непонятно то мож спрашивать. на работе имею дело с сим чудом

Ну тут несколько моментов
1) Сначала подключите файл .less со стилями, потом библиотеку less

<link rel="stylesheet/less" href="/css/style.less">
    <script src="/js/less.js"></script>

2) Обязательно укажите rel для .less файла
rel="stylesheet/less"
Все должно быть нормально после этого

jsfiddle.net/46fLc