Антон Спирин

Можно сделать так:
1. Метод оnClick передается из родительского компонента.
2. state иконки высчитывается по полученным props, но так же меняется по клику, для более комфортного пользовательского опыта.
3. По возвращению ответа от сервера обновляется вся карточка. Так же, обновляется state иконки в computeDerivedState, мало ли была ошибка и товар не попал в избранное.
4. В случае ошибки, левом нижнем углу экрана можно показать всплывающее уведомление. Для этого можно написать action и вызывать его в блоке catch асинхронных действий.

Через this в литерале объекта(вне тела функции) вы обращаетесь к глобальному контексту - window или undefined в строгом режиме. Демо.
Можно использовать геттер:

var lol = {
  salary: 15,
  bonus: 100,
  gen: 'girl',
  get total() {
     return this.salary + this.bonus;
   }
}

console.log(lol.total);

или метод:

var lol = {
  salary: 15,
  bonus: 100,
  gen: 'girl',
  getTotal() {
     return this.salary + this.bonus;
   }
}

console.log(lol.getTotal());

Tree shaking (встряхивание дерева) — термин объединения модулей JavaScript, обозначающий статический анализ всего импортированного кода и исключение того, что на самом деле не используется.

Для более прямолинейной аналогии рассмотрим живое дерево. Дерево встряхивается, и это заставляет мертвые листья отваливаться, оставляя только живые. В основе tree shaking лежит концепция живого включения кода (live code inclusion): мы включаем части, необходимые для начала, в отличие от удаления ненужных частей в конце — устранения «мертвого кода» (dead code elimination).

Tree shaking зависит от import и export модулей ES2015. Выражения import и export составляют статическую структуру модуля приложения. Когда модули объединяются для развертывания приложения, tree shaker анализирует статическую структуру модуля, чтобы исключить неиспользуемый экспорт, уменьшив размер окончательного пакета.

ES2015 позволяет указывать явный импорт. Например, вместо импорта всей библиотеки RxJS мы можем импортировать именно то, что хотим:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

Это отличается от динамического выражения require, используемого CommonJS или AMD. Tree shaking использует этот принцип для перемещения по зависимостям и исключения ненужных зависимостей для уменьшения размера приложения.

Принцип tree shaking не нов, но он только недавно был популяризирован с помощью сборщика rollup.js, объединяющего модули приложения. Webpack 2 также использует tree shaking. Концепция tree shaking также распространена в Angular с компиляцией AOT.

Источник

Для того, чтобы начать изучение, возможно, хватит. Подтяните ES6 и промисы.
Для того, чтобы написать полноценное, поддерживаемое SPA основ JS и изучения React в кратчайшие сроки, скорей всего не хватит.

Я так же, в свое время, JavaScript параллельно с Backbone изучал. Надо было в кратчайшие сроки начать писать приложение и меня выдернули из мобильной разработки. Так вышло, что навсегда.)

class ArrowUp extends Component {
  state = {
    isVisible: false,
  };

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    if (window.scrollY >= SOME_VALUE  && !this.state.isVisible) {
      this.setState({ isVisible: true });
    } else if (window.scrollY < SOME_VALUE && this.state.isVisible) {
      this.setState({ isVisible: false });
    }
  };

  render() { /* ... */ }
}

Проще некуда:
element.scrollIntoView();
Демо

В имплементации React как-то так:

handleLinkClick = e => {
  e.preventDefault();
  const element = document.getElementById(e.target.href);
  element.scrollIntoView();
};

function invertTree(tree) {
  let { left, right, ...rest } = tree;
  [ left, right ] = [ right, left ];

  return { left, right, ...rest };
}

или:

const invertTree = ({ left, right, ...rest }) => ({ left: right, right: left,  ...rest });

container.innerHTML += "<br />";
Во время этого вызова происходит преобразование innerHTML в строку, конкатенация, удаление всех потомков узла container, анализ получившейся строки и создание новых элементов-потомков.
Так как все элементы узла container заменяются новыми, то слушатели, которые вы вешали на потомков узла до вызова, естественно, не сохраняются.
Можно заменить на:

var br = document.createElement('br');      
container.appendChild(br);

Promise.all(data).then(console.log);

{this.props.massMedia.map(item => {
  const type = mediaType.find(el => el.id === item.type);

  return (
    <TableRow key={item.id} directory={item} directory1={type} />
  );
})}

Лаконичное решение не всегда лучшее.
Демонстрация проблемы
Лучше извлекать свойство безопасно. Например так:
const id = arr[0] && arr[0].id;
Либо, если надо достать несколько свойств, что-то вроде:

const first = arr[0] || {};  // const [ first = {} ] = arr;
const { id, name } = first;

Либо, если надо прервать выполнение в случае отсутствия данных:

const first = arr[0];

if (!first) return null;

const { id, name } = first;

Само получение первого элемента массива традиционным способом, при правильном форматировании, короче деструктуризации на один символ, поэтому нет особого смысла использовать последнюю в этом кейсе.

const getLastId = () => { /* some code */ };
const lastId = getLastId();

Например так:

import React from 'react';
import { render } from 'react-dom';
import configureStore from './store';

const store = configureStore();

store.dispatch(init());

render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root')
);

setTimeout(function() {
  nextSlide(currentNumber);
}, 5000);