Как транспилировать код jsx при помощи gulp?

Gagatyn, советую познакомиться с прекрасным инструментом для сборки webpack.

Как правильно создать модель данных?

kachurinets, не обратил внимание, что в тегах Angular. В Angular разработке, конечно, свои представления о прекрасном.

Как правильно создать модель данных?

Зачем плодить сущности? Данные ведь и так приходят в исчерпывающем для отображения виде.

Macbook для начинающего фронт-разработчика?

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

Как дождаться выполнения dispatch'а с передачей в него async action в redux?

Данил Чекалин,

Посмотрите на исходный код...
Функция dispatch будет возвращать ссылку на саму async функцию и в await перед dispatch'ем нет ни какого смысла.

Если бы вы внимательней ознакомились с кодом по ссылке которую привели, то заметили бы, что функция на, подсвеченную вами, 197 строку попасть не может. Использование асинхронных действий подразумевает использование middleware. Такого как, например, redux-thunk. Вот, что проиcходит с dispatch при применении middleware вызовом applyMiddleware. А сценарий для возвращаемых функций, в случае использования redux-thunk, будет такой.

Без использования middleware должно выпасть исключение:

Actions must be plain objects. Use custom middleware for async actions.

Так что middleware, думаю, у вас подключено. И скорей всего это именно redux-thunk.

Web разработка в Windows под Linux?

Работайте под MacOS и будет вам счастье.
Для игр купите консоль или используйте отдельную машину на Windows. Как плюс такого решения, вы значительно меньше будете тратить времени на компьютерные игры, так как на рабочей машине их не будет.

Фейковые данные в состоянии реакта, прокидывание в пропсы?

как лучше делать сверстку массива

Что делать?

В каких случаях использовать Class, а в каких function (js)?

Дмитрий Евграфович,

мы ведь говорим о недостатках родных классов

Родные классы синтаксический сахар. У самого их синтаксиса в рамках возможностей языка недостатков нет.
А в ответе вы в ответе утверждаете, что функциональный синтаксис предпочтительней и лучше для использования. Именно с этим утверждением я и не согласен. Тем более, ни одного объективного аргумента именно на эту тему вы не предоставили.

И кивать на договоренности 20-летней давности относительно языка, написанного для легкого кода в условиях, когда требуются инструменты для написания сложного кода - так себе аргумент.

Это отлично работает и все это используют. Никаких неудобств это не приносит ни на телефонах, ни на серверах. Объективных недостатков, при решении задач договоренность не имеет. Ну и вводят в стандарт приватные свойства и методы.

А если это тот редкий случай, когда пишется действительно сложный фронт?

я пишу только очень сложный фронт(крупные стартапы, финтех, социальные сети). Наследование используется только:

class SomeComponent extends Component {
}

Что-то более, очень редкий кейс. Множественное наследование просто-напросто не нужно. В таких языках как например Java, C#, Swift оно отсутствует.

но вы ведь необходимость интерфейсов в ошибку проектирования не станете записывать? Или станете?

За последние годы вещи, которые реализуют на JS стали значительно сложней. Учитывая реалии проектов в которых работаю, лично я, без статической типизации и интерфейсов подобные проекты лучше не начинать.
Вас куда-то в сторону потянуло от начального утверждения, что функции использовать предпочтительней, а классы нет смысла, на недостатки отсутствия интерфейсов и типизации в больших проектах.

В каких случаях использовать Class, а в каких function (js)?

Дмитрий Евграфович,

использование интерфейсов

Можно использовать TypeScript или Flow. Тут претензии не к синтаксису классов, а к прототипной природе JavaScript.

использование приватных свойств

С самого рождения в JavaScript существует договоренность насчет приватных свойств и методов. Поэтому записывать это в недостатки так себе аргумент. Отсутствие этого ключевого слова никак не мешает решению задач, а видимость за пределами модуля решается ключевыми словами export и export default.

множественное наследование

Во многих отличных ООП языках его нет. И более того, если вам во фронтенде могло понадобиться множественное наследование, то скорей всего эта необходимость вызвана ошибками проектирования.

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

В каких случаях использовать Class, а в каких function (js)?

Дмитрий Евграфович, с какими задачами во фронтенде у вас возникают проблемы при использовании классов?

В каких случаях использовать Class, а в каких function (js)?

это просто синтаксический сахар

Не совсем. Попробуйте повторите без использования классов.

В каких случаях использовать Class, а в каких function (js)?

...поэтому их применение несколько сомнительно

Что за логический кульбит? Классы это удобный лаконичный синтаксис, снижающий когнитивную нагрузку. Использовать их можно только ради этого.

Почему происходит такая проблема с импортом модуля?

vs1710, TS вы не используете? Значит дело в настройках проекта в вашей IDE

Почему происходит такая проблема с импортом модуля?

webpack.config покажите

Как исправить ошибку Unexpected token, expected {?

Как вам вообще могло придти в голову объединить синтаксис объявления класса и объекта? Рано вам React изучать. Начните лучше с основ JavaScript.

Как удалить все функции на странице?

В случае с делегированием от document, поможет только удаление слушателей, да и то если в коде есть доступ к хандлерам.

Как удалить все функции на странице?

Скрипты применяются после загрузки. Удалять их бесполезно.

Почему React Router this.props.match.param не существует?

AplexPlex, переписав на Class Component получим:

class PrivateRoute extends React.Component {
  render() {
    const { isAuthenticated, component: Component, ...rest } = this.props;

    return (
      <Route {...rest} render={(Rouprops) => (
        isAuthenticated === true
          ? <Component {...props} />
          : <Redirect to='/login' />
      )} />
    );
  }
}

const mapStateToProps = state => ({
  isAuthenticated: state.user.isAuthenticated,
}); 

export default connect(mapStateToProps)(PrivateRoute);

думаю в таком виде отличия от HOC видно наглядней.

Почему React Router this.props.match.param не существует?

AplexPlex, это обычный компонент. Тут применяется прием композиции. В HOC применяется каррирование. Просто компонент в примере функциональный и отличий немного. Главное же отличие, это то что HOC вызывают как функцию передавая в него компонент.
export default someHOC(SomeComponent);
А такой компонент используется как компонент:

<PrivateRoute path="/somePath" component={SomeComponent} />;

Почему React Router this.props.match.param не существует?

AplexPlex, по поводу контекста, они, видимо, имеют ввиду, что не правильно использовать реализацию. Ведь ничто не мешает им ее изменить оставит нетронутым API. В итоге версия изменится, допустим с 4.3.1 на 4.3.2, а проект ваш больше не запустится, пока не внесете исправления. При использовании API библиотеки(withRouter), такого не случится по крайней мере до выхода react-router 5.

По поводу композиции, простой пример:

const PrivateRoute = ({ isAuthenticated, component: Component, ...rest }) => (
  <Route {...rest} render={(Rouprops) => (
    isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
);

const mapStateToProps = state => ({
  isAuthenticated: state.user.isAuthenticated,
}); 

export default connect(mapStateToProps)(PrivateRoute);