Антон Спирин

this.visibleCities = this.allCities.filter(city => this.defaultCitiesIds.includes(city.id))
  .map(city => ({ ...city, check: false }));

this.visibleCities = this.allCities.reduce((result, city) => {
  if (this.defaultCitiesIds.includes(city.id)) {
    city.check = false;
    result.push(city);
  }
  return result;
}, []);

1. React + koa/express + mongoDB
2. React + firebase
3. Gatsbyjs
4. Create React App
5. Next.js
6. Razzle
7. Rekit
etc

Вы видимо что-то где-то недопоняли. Каррирование с помощью compose заменить нельзя.
Его используют чтобы избавиться от вложенности:

// without compose
withLog(withRouter(connect(mapStateToProps)(withDropdown(props)(Component))));

// with compose
compose(
  withLog,
  withRouter,
  connect(mapStateToProps),
  withDropdown(props),
)(Component);

Так же использование compose позволяет передавать функции динамически:
const foo = compose(...functions);

Реализация compose есть в пакете redux.

return возращает в скобках html код

return не возвращает html код. JSX это лишь синтаксический сахар над JavaScript.

JSX вида:

render() {
  return (
    <h1 className="greeting">
      Hello, world!
    </h1>
  );
}

транслируется в JS вида:

render() {
  return React.createElement(
    'h1',
    { className: 'greeting' },
    'Hello, world!'
  );
}

результат выполнения render в этом случае будет следующий:

{
  $$typeof: Symbol(react.element),
  key: null,
  props: { className: "greeting", children: "Hello, world!" },
  ref: null,
  type: "h1",
  _owner: null,
  _store: { validated: false },
  _self: null,
  _source: null,
  __proto__: Object,
}

Возвращаемый объект это Virtual DOM Node. По ней библиотека создает элемент в реальном DOM.

React компилятор перед сборкой парсит данные в файлах компонентов...
...Я понимаю что реакт собирает все в ES2015...

React ничего не собирает. Никаких компиляторов библиотека не имеет. Процесс преобразования JSX в JS называется не компиляцией, а транспиляцией. Транспиляцию JSX в JS выполняют с помощью babel/TypeScript, а сборку обычно осуществляют с помощью библиотеки webpack.

или же это нормально для ES6

Нет. JSX не входит в спецификацию ECMAScript 2015

Думаю причина в этом.

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

Можно использовать нативный скрытый checkbox. Использовать его можно будет как контролируемый, так и как самостоятельный элемент. Слушать onChange или использовать ref. Стилизовать его можно под что угодно. Чтобы работало, надо обязательно использовать элемент label.
Думаю, это самый универсальный и оптимальный вариант для этой задачи.
Пример с использованием StyledComponents:

Ни одно свойство не является обязательным.

Можно. Ведь JQuery это библиотека написанная на JavaScript.

document.querySelectorAll('.hover').forEach(function(el) {
  el.addEventListener('mouseleave', function() {
    this.classList.remove('hover');
  });
});

Разбейте на подзадачи:

gulp.task('watch:article', function(){
  gulp.watch('web/src/style/less/article/**/*.less', ['less:article']); 
});
gulp.task('watch:less', ['watch:article', 'watch:other']);
gulp.task('watch', ['watch:less', 'watch:js']);

https://css-tricks.com/svg-sprites-use-better-icon...

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

React + любой css in js.

А с чего вы взяли что он там должен быть? Вам, думаю, стоит подтянуть основы JavaScript.

Если используете синтаксис ES6, используйте импорты и экспорты:
import React from 'react';

export default Task;

Хандлеры лучше биндить не в render, а в конструкторе:

constructor(props) {
  super(props);

  this.state = {
    isOpened: false,
  };

  this.clickHandler = this.clickHandler.bind(this);
}

Или определяйте хандлер как class field arrow function:

clickHandler = e => {
  // your stuff
};

Такая функция привязана к контексту экземпляра и биндить ее не надо.
create-react-app поддерживает такой синтаксис из коробки.

Нельзя передавать текущее состояние в метод setState, так как это асинхронный метод, к моменту вызова состояние может успеть измениться и будет использовано старое значение. Чтобы обновить состояние на основе предыдущего передавайте в setState функцию возвращающую объект. При вызове, первым аргументом в нее придет актуальное состояние на момент обновления:

this.setState(prevState => ({
  isOpened: !prevState.isOpened,
}));

Вместо var используйте const для неизменяемых значений и let для изменяемых.

Наконец, следите за чистотой кода. Вот хорошие гайдлайны от Airbnb:
Гайдлайн Airbnb по JavaScript
Гайдлайн Airbnb по React