Максим

Кнокаут вряд ли, ибо старый уже (хотя вижу, что релиз вышел 17 ноября 2015...)
NodeJS - это бэкэнд вообще.

Далее, идете в гугл, пишите "{фреймворк} leaflet" и смотрите сколько есть материала, какой из них более подробный и вам больше нравится. Какие уже есть готовые решения и так далее. Например, react leaflet

Что делает WebApi .NET ? Как оно будет авторизовывать?

В общих словах:
Если по токену - то проблем нет. Делаете форму, отправляете данные - получаете в ответе токен. Токен храните как-нибудь, например в localStorage. На логаут токен очищаете. На "expired" - либо просто просите снова залогиниться, либо используете refresh-токены (сам с рефрешем не заморачивался).

Если не по токену, то почему и зачем?

Добрый день! Ваш вопрос очень хорошо разбирается во втором курсе на egghead от создателя Redux. Конкретно, один из самых близких к вашему вопросу ответ - https://egghead.io/lessons/javascript-redux-normal... (используется normalizr).

Но мой ответ, к вам не сколько в видео про "нормалайзер", а про то, что посмотрите весь курс и вы познакомитесь с такой темой, как селекторы. То есть, будете вытаскивать в компонентах только нужные данные с помощью определенных функций селекторов, которые опишете в ваших редьюсерах. У вас получится как минимум на 1 уровень глубже использовать combineReducers для того, чтобы держать:
а) массив id-шек
б) объект с ключами, в виде id ваших записей (объект объектов, так сказать)

Говорю это опираясь на свой опыт. После перехода на "массив с id" + "объект объектов" + селекторы => проблема указанная в вопросе исчезает!

Привожу скриншот из проекта, над которым сейчас работаю: (на странице рендерится список поставщиков)


P.S. этот вопрос будет подробно разобран в новом туториале, но боюсь он выйдет не раньше конца лета.

И вообще нормальна ли такая практика относительно react-а?

Нигде в популярных (и не очень) репозиториях я такого не встречал. А главное, как указал fetis26 - пользы от такого разделения никакого нет. Если найдете (пользу) или какой-то репозиторий, где так сделано - добавьте, хотя бы попробуем понять автора.

Другое дело, что иногда в render функции компонента, удобно определить какой-то кусочек JSX в переменную. Например:

let articlesHeaders
if (this.props.articles.length > 0) {
  articlesHeaders = this.props.articles.map(item => <h4 key={item.id}>item.title</h4>
} else {
  articlesHeaders = <button onClick={this.onTryAgainClick}> Try Again </button>
...
return (
  <div> bla bla .... </div>
  {articlesHeaders}
  <div> bla bla ... </div>
)

Обычно используется, когда есть какое то условие в if / else, где относительно нашего примера в articlesHeaders могла бы быть разная разметка (шаблон).

Как ответил copal , вам, действительно, нужно закрыть пробелы в знаниях самого js. А потом уже читать туториал по реакту.
Попробуйте в render компонента, сделать console.log(this.props) -> будет объект, с ключом data. Поэтому мы и пишем this.props.data.

По поводу map. (как там написано - Функция, создающая элемент в новом массиве, принимает три аргумента, вот как раз первые два и есть "текущий элемент" и "индекс"

p.s. учебник выбрали годный :) , но требуется повысить уровень основ JS, так будет лучше для обучения.

Есть хороший вариант: подключить actions через *

import * as UserActions from '../actions/UserActions'
...
const mapDispatchToProps = (dispatch) => {
  return {
    userActions: bindActionCreators(UserActions, dispatch)
  }
}

В таком случае, все действия юзера (а именно, все экспортируемые функции из файла UserActions) будут доступны из this.props.userActions (например, this.props.userActions.saveUser)

Так же, можно не писать return, если вы возвращаете объект (как раз наш случай)

const mapDispatchToProps = (dispatch) => ({
  userActions: bindActionCreators(UserActions, dispatch)
})

Обратите внимание на круглые скобки.

"Нужно больше кода".

Тем не менее, предположу:
а) при изменении topbarVisible "где-то там" - значение не изменяется (передается undefined/другое свойство, и topbarVisible остается не тронутым)
б) параметр изменяется, но в цепочке родителей-потомков есть shouldComponentUpdate, который блокирует изменение.

Нужно проверить всю цепочку. Где изменяется topbarVisible? В этом компоненте с помощью console.log / debugger посмотреть изменяется ли. Если все ок - идти дальше по цепочке, и смотреть в какой из компонентов новое значение props не пришло (либо console.log в componentWIllReceiveProps, либо debugger по шагам (кнопочка play), либо просто react панель-разработчика в консоли).

update: поздно заметил, почему у вас this.topbarVisible? Это разве не свойство, которое пришло в props? Если вы используете state, все равно не ясно зачем свойство подключать через this.

Как узнать?
Поиском по проекту "React.findDOMNode", но я подозреваю, что это где-то в самом верхнем компоненте у вас. Либо просто поиском по "findDOMNode", так как где-то может быть подключено так: import React, {findDOMNode} from 'react'

Как исправить?
а) npm install react-dom
б) везде где используете React.findDOMNode заменить на findDOMNode, предварительно в каждом файле проимпортировав: import { findDOMNode } from 'react-dom'

Суть ошибки в том, что функция findDOMNode переехала в отдельный пакет, а у вас она используется из пакета 'react'.

https://gaearon.github.io/react-dnd/ (от создателя Redux)
p.s. не знаю "небольшой" ли. Кода на github'e там порядком (но если присмотреться повнимательнее, окажется, что все не так плохо)

Конечно можно. React + Redux и дело в шляпе.
Для роутинга - react-router.
Для сборки/минификации/использования es6 и т.д. - webpack+babel
Для тестов - ммм, пожалуй, "мир реакта" просто сказка в вопросах тестирования. Есть много отличных инструментов.

---
В дополнение к предыдущему ответу: выбирать новую технологию для проекта стоит, только если сроки позволяют ( о чем там в принципе и написано). Использовать react для какой-то отдельной страницы/части можно.

Как сказал, Dan, создатель Redux (примерно, по памяти):

"Если у вас нет времени изучать А, то А не требуется на этом проекте"