Константин Башаркевич

Если я вас правильно понял:

class Avatar extends React.Component {
  render() {
    const finalClassName = 'avatar ' + (this.props.className || '')
    return (
      <img className={finalClassName} src={this.props.user.avatarUrl} alt={this.props.user.name} />
    );
  }
}


class UserInfo extends React.Component {
  render() {
    return (
      <div className="user-info">
        <Avatar className="user-info__avatar" user={this.props.user} /> 
        <div className="user-info__name">{this.props.user.name}</div>
      </div>
    );
  }
}

Т.е. просто передавайте className как props компоненту Avatar, затем объединяйте в один классНейм:

// выражение в скобочках нужно, чтобы не получилось 'avatar undefined', когда className не передан.
// Я рекомендую указать className, равное '', в defaultProps компонента Avatar
const finalClassName = 'avatar ' + (this.props.className || '')

Также в npm есть удобный пакет https://www.npmjs.com/package/classnames , который позволяет формировать строку с классами. Ваш пример выглядел бы так:

const finalClassName = classnames({
  'avatar': true,
  [this.props.className]: !!this.props.className,
  'some-other-class': someCondition
})

Raphael.js (SVG) или чистый canvas

Потому, что в нём огромное количество ошибок:
1. Откуда взялся div, на который вешается EventListener?
2. Откуда взялся target?
3. Что за конструкция <code lang="css"">? В стандарте html такой нет.

Подозреваю, что должно быть как-то так https://jsfiddle.net/1dyv8qws/

Объекты ({}) в JS являются неупорядоченными множествами элементов, понятие "порядок" к ним неприменимо, один и тот же порядок обхода ключей через for..in не гарантируется (на разных движках может отличаться). Т.е., нельзя писать код, логика которого опиралась бы на порядок ключей в объекте. Для упорядоченных множеств в JS существуют массивы ([]). Вам нужно изменить тип переменной popUp1 с объекта на массив, чтобы контролировать порядок помещённых в него объектов.

sourcemaps

Обновите ноду и нпм, у Вас ну ооооооочень старая версия.

Неправильно выставлен offset.
Пример поправим, спасибо.

В CSS нет понятия слева и справа. Есть поток элементов.
Ваша задача изначально пахнет плохим проектированием. Никогда не используйте такие конструкции в реальных проектах, за исключением случаев, когда супер точно понимаете что делаете и зачем.

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

react, angular, webpack, nodejs, d3, phaser - везде необходимо знание JS.
Предположу, что Вы весьма недавно в мире frontend, где большинство в своей время так же начинали с сайтиков на jQuery. Но по мере карьерного роста, знание VanillaJS является неотъемлимой необходимостью.
Если хотите в будущем писать классные веб-приложения - учите JS = ES5, ES2015, ES7 (из него, пожалуй надо знать о декораторах, class properties, function bind для начала).

Решается очень просто: нужно зайти в свойства «моего компьютера» в то окошко настроек, где своп файл ставится. Только своп будет на второй вкладке, а на первой куча галок для визуальных эффектов. Нужно снять «fade out menu items after clicking».