Антон Спирин

var data = response.data;
var category3 = data.filter(function(el) {
  return el.categoryid === '3';
});

var category3Lendth = category3.length;  // длина

У вас отсутствуют какие-либо скрипты для запуска. Скрипта it нет. Видимо, не все по видео делали.
Вы и webpack с babel не установили, webpack.config не настроили.
Изучать React по видео-урокам, думаю, не самый эффективный способ.
В вашей ситуации могу посоветовать, разве что, оставить эти видеоуроки, раз у вас не получается следовать инструкциям с экрана и найти какой-нибудь курс в виде цикла статей с примерами кода и изучать их.

По руководству по подключению React с официального сайта. Приучите себя помимо копирования примеров кода еще и читать все, что написано в статье. В них изложена вся информация об инструментах необходимых для сборки и запуска приложения и их настройках.
В статье написано про npm, webpack, babel, прессеты и конфигурации. И даже ссылка на create-react-app есть.
Думаю, вам стоит начать именно с create-react-app.
Если у вас плохо с английским, то могу только порекомендовать читать/смотреть уроки и статьи на русском языке.

https://vk.com/dev/access_token

Если удобно, то можно изменять данные через родителя.
Но правильней для вашей задачи использовать redux, так как имя пользователя может понадобиться в разных частях приложения, да и скорей всего будет приходить с сервера.

const obj = {
  'someName': {
    'id': 2
  },
  'someName2': {
    'id': 4
  }
};

const result = Object.values(obj).map(el => el.id);

console.log(result); // [2, 4]

Вы должны понимать, что когда происходит рендер React компонента происходят следующие вещи:
1. расчет нового узла Virtual DOM
2. добавление по полученной Virtual DOM модели элеменов в реальный DOM
когда же происходит перерендер React компонента, происходит примерно следующие:
1. расчет новой версии узла Virtual DOM
2. сверка ее со старой
3. при необходимости вносятся изменения в реальный DOM

Поэтому ваш вопрос поставлен некорректно. Если изменить Virtual DOM, не изменив после этого обычный, изменений на Веб-странице вы не увидите. Так как это лишь объект в памяти вашего приложения:

{
  type: 'ul', props: { 'class': 'list' }, children: [
    { type: 'li', props: {}, children: ['item 1'] },
    { type: 'li', props: {}, children: ['item 2'] }
  ]
}

Сам React изменяет DOM медленней, чем если бы вы изменяли его напрямую. Так как помимо самого изменения DOM, надо рассчитать новую версию Virtual DOM, сравнить со старой и только потом внести изменения. Об этом можете почитать в статьях ниже.

Статьи по теме:
Почему Virtual DOM медленней
Бенчмарк
Как работает Virtual DOM
Как написать ваш собственный виртуальный DOM

Метод здорового человека:
const lastElement = array[array.length - 1];

Методы курильщика:
const lastElement = [...array].pop();

const lastElement = array.slice(-1).pop();

const lastElement = array.slice(-1)[0];

Если надо не просто обратиться к последнему элементу, а при этом удалить его из массива:
const lastElement = array.pop();

Отказ от var современном модульном коде обусловлен тем, что использование только const и let, const для переменных которые не переопределяются и let для переменных которые переопределяются повышает читаемость кода и снижает когнитивную нагрузку с программиста, читающего код.
Такой код воспринимается легче и быстрей.
Так же в современном модульном коде нет ни одного объективного кейса для предпочтения var вместо const/let.

Гайдлайн AirBnb.
ESLint no-var

Если создали develop из master, после того как залили в master файлы, то в develop они уже есть.

Основы работы с модулями CommonJS:

tasks.js

const task1 = () => {};
const task2 = () => {};

module.exports = {
  task1,
  task2,
}

const tasks = require('./tasks');

const { task1, task2 } = tasks;

Если хотите изменить стили React.Component надо передавать методе render свойство className. Так же можно вынести все элементы компонента в статические поля, чтобы позже переопределять их стили.

const Wrapper = styled.div`
  // some styles
`;

const ChildElement = styled.div`
  // some styles
`;

class MyComponent extends React.Component {
  static ChildElement = ChildElement;
  
  render() {
    const { className } = this.props;

    return (
      <Wrapper className={className}>
        <ChildElement>Some text</ChildElement>
      </Wrapper>
    )
  }
}

export default MyComponent;

const SyledMyComponent = styled(MyComponent)`
  // some styles

  ${MyComponent.ChildElement} {
    // some styles for ChildElement
  }
`;

Метод extend работает только со StyledComponent:

const AbstractElement = styled.div`
  // some styles
`;

const ConcreteElement = AbstractElement.extend`
  // some styles
`;

const result = arr.filter(el => keys.includes(el.key));

Можно написать функцию которая будет писать токен в заголовки по-умолчанию и при получении токена ее вызывать.

import Axios from 'axios';

const setupAxios = token =>
  (Axios.defaults.headers = {
    Authorization: `Bearer ${token}`,
  });

export default setupAxios;

Так обрабатываете это действие во всех нужных редьюсерах. Они вызываются по цепочке.

Примерно так:

var videos = [
  'http://mysite.com/video/32412.mp4',
  'http://mysite.com/video/32412.mp4',
  'http://mysite.com/video/32412.mp4',
  'http://mysite.com/video/32412.mp4'
];

var nextBtn = document.getElementById("next-btn");
var videoPlayer = document.getElementById("video-player");
var currentVideo = 0;

nextBtn.addEventListener("click", function() {
  currentVideo++;
  if (currentVideo === videos.length) currentVideo = 0;
  videoPlayer.src = videos[currentVideo];
  videoPlayer.play();
});

Если надо только заполнять одну форму, то нет. Если надо еще и работать с полученными данными, то лучше использовать.

Смотря, что вы подразумеваете под сложными классами. Лучше стараться писать простые вещи. Принципы проектирования, которые должны вам помочь:
SOLID
KISS
Чем хуже тем лучше

Добавить правило display: inline-block;

Демо.

$(document).ready(function() {
  $.toast({
    heading: 'Welcome',
    text: 'This alert needs your attention.',
    position: 'top-right',
    icon: 'success',
    stack: false
  });
});