Как отрендерить JSON в React.js?
Всегда когда вам приходит какая-то структура, нужно пробегать ее полностью по каждому элементу, чтобы сгенерировать 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 мог "импортить цсски"
Хочу добавить по структуре данных json. Если есть возможность, храните данные в формате массив чего-то, а не объект чего-то. Метод map для массива быстрее того же for in для объекта.{
    books: [ { id: 1, name: "Sample", author: "Somebody", genre: "Tales" }, { id: 2, name: "Sample2", author: "Somebody2", genre: "Tales2" } ]
}
book1, 2, ... N - вставлять нет смысла, т.к. книги хранятся в значении свойства "books", а id определяет порядковый номер