Максим

Центральный показатель для бизнеса, а следовательно и руководителей, как людей представляющих интересы этого самого бизнеса - это коэффициент возврата инвестиций (ROI). Соответственно, сотрудник должен приносить компании больше денег, чем потребляет. Естественно, что чем выше разрыв между затратами и прибылью, тем лучше, поэтому фонд оплаты труда руководитель должен держать на том минимальном уровне, который гарантирует бесперебойную работу сотрудников. Один из факторов этой бесперебойности - низкая текучка. Сотрудников терять нежелательно. И чем ценнее для компании сотрудник, чем более он профессионален и/или чем больше на него завязано, тем дороже обходится его потеря. Натурально в деньгах. Придётся затратить больше, чем обычно, денег на поддержание работы без него. Придётся затратить деньги и время (те же деньги) на поиск, найм, введение в работу, возможно, обучение нового сотрудника. При этом он может оказаться совсем неподходящих и цикл придётся повторить. Или может оказаться просто хуже прошлого и эффективность отдела снизится. Поэтому, когда сотрудник приходит просить прибавку, руководитель оценивает может ли этот сотрудник уйти или только блефует, насколько легко его будет заменить, какой урон компании будет нанесён его уходом. Потом руководитель оценивает стоимость расширения ФОТ - есть ли резервы, какой сейчас ROI, будет ли больший ROI от реинвестиции этих средств во что-то другое? Если уход сотрудника будет стоить меньше, чем увеличение ФОТа, сотруднику откажут.

Естественно, всё описанное справедливо для случая, когда руководитель - профессиональный менеджер. А то часто на месте руководителя сидит человек руководствующийся эмоциями и мутными соображениями вычитанными в сомнительной бизнес-литературе.

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

return state["users"].entities.forEach(user => {
  if (user.email === state["auth"].user.email) {
    return user;
  }
});

Серьёзно? А вы в курсе, что forEach возвращает undefined? Наверное, стоит использовать find:

return state.users.entities.find(user => user.email === state.auth.user.email);

можно в функцию handleSubmit используя fetch или axios засунуть post с вашими данными на сервер

Есть несколько вариантов.

js-to-native, нативное приложение с бизнес-логикой на js и нативными виджетами:

• react-native
  
• NativeScript — на выбор angular, с недавних пор vue, чистый js
  
• weex — аналог react-native для vue.js, из коробки так же работает под веб. С документацией пока грустновато, но народ работает.
  

Вроде как из этого react-native самый проработанный и стабильный. Имел дело только с ним, если это стабильно и проработанно, то в остальное даже страшно заглядывать (хотя NativeScript+ionic мне хвалили). Выглядит нативно на каждой платформе. Знания html и css по большей части не пригодятся: тэги/компоненты свои, css-свойства работают не все и не во всех сочетаниях.

webview, гибридное приложение, браузер на весь экран:

• cordova, старейшее живое решение
  

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

прочее:

• *.webmanifest и PWA, нечто среднее между установкой приложения и добавлением сайта в закладки.
  

По идее идеал, часто юзаешь сайт — типа ставишь приложение, редко — открываешь из браузера. У разработчика голова не болит как подружить веб, iOS и Android: везде выглядит и работает одинаково. На практике поддержка пока что пятнистая.

ставьте плагин eslint-plugin-react. Дополнительно если не установлены:
eslint
babel-eslint
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier
eslint-config-airbnb
eslint-plugin-prettier
Добавляйте так:

{
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "prettier"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    "no-plusplus": 0,
    "no-confusing-arrow": 0,
    "no-restricted-syntax": 0,
    "guard-for-in": 0,
    "class-methods-use-this": 0,
    "jsx-a11y/no-static-element-interactions": 0,
    "jsx-a11y/anchor-is-valid": 0,
    "react/no-danger": 0,
    "react/prop-types": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-curly-brace-presence": ["error", { "props": "never", "children": "never" }],
    "import/no-unresolved": ["error", { "commonjs": true }],
    "import/extensions": 0,
    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
    "import/prefer-default-export": 0,
    "prettier/prettier": ["error", {
      "singleQuote": true,
      "trailingComma": "all"
    }]
  }
}

Правила настройте под себя.

Если хотите precommit проверку, то поставьте lint-stаged и husky, и добавьте следующие строки в package.json:

"scripts": {
    // ваши скрипты
    "precommit": "./node_modules/.bin/lint-staged",
  },
  "lint-staged": {
    "**/*.js": [
      "./node_modules/.bin/prettier --write",
      "./node_modules/.bin/eslint --fix",
      "./node_modules/.bin/stylelint './app/**/*.js'", // если используете  css in js
      "git add"
    ]
  },

Теперь перед каждым вашим коммитом код будет приводиться в порядок на автомате если это возможно. И прерывать коммит ошибкой если нарушены правила.

Потому что это JSX. Можно исправить так:

render() {
  const { _sharedData: { auth_user } } =  this.props;

  const shouldShowIconMenu = +auth_user === 1;

  return (
    <AppBar>
      {shouldShowIconMenu && (
        <IconMenu>
          ...
        </IconMenu>
      )}
    </AppBar>
  );
}

JSX это все-таки синтаксический сахар над React.createElement. Вызов if-else, как и for внутри JSX транслировался бы в нерабочий код. Пример:
JSX:

<div id={if (condition) { 'msg' }}>Hello World!</div>

В результате трансляции получаем невалидный код:

React.createElement("div", { id: if (condition) { 'msg' } }, "Hello World!");

Зачем вообще в товаре свойство addedToCart?
Представьте, что у вас в приложении есть или будет пагинация. Вы перешли вперед-назад и загрузили товары заново. Ключи при этом будут потеряны.

Сделайте селекторы checkIsProductAddedToCartSelector и isProductAddedToCartSelector. Первый пусть возвращает функцию принимающую id товара и возвращающую true если товар найден в store корзины. Второй пусть принимает id товара и возвращает булево значение, если товар найден или не найден в store корзины. Используйте для этого reselect.
И добавляйте их в mapStateToProps в connect.
В списке можно вызывать так:

const ProductsList = ({
  productsList,
  checkIsProductAddedToCart,
}) => (
  <ul>
    {productsList.map(product => (
      <Product
        addedToCart={checkIsProductAddedToCart(product.id)}
        product={product}
      />
    ))}
  </ul>
);

const mapStateToProps(state => ({
  productsList: productListSelector(state),
  checkIsProductAddedToCart: checkIsProductAddedToCartSelector(state),
}));

export default connect(mapStateToProps)(ProductsList);

В детализации так:

const mapStateToProps((state, ownProps) => ({
  isAddedToCart: isProductAddedToCartSelector(state, ownProps),
}));

export default connect(mapStateToProps)(ProductDetails);

Примерные реализации селекторов:

import { createSelector } from 'reselect';

const cartSelector = state => state.cart;

const cartProductsSelector = createSelector(
  cartSelector,
  cart => cart.products,
);

// возвращает функцию, принимающую id, которую можно использовать при построении списков
const checkIsProductAddedToCartSelector = createSelector(
  cartProductsSelector,
  products => id => products.some(product => product.id === id),
);

const productIdSelector = (_, props) => props.product.id;

// возвращает булево значение, важно чтобы в компоненте было свойство product
const isProductAddedToCartSelector = createSelector(
  cartProductsSelector,
  productIdSelector,
  (products, id) => products.some(product => product.id === id),
);

В IE11 background-image ставится точно так же как и во всех нормальных браузерах. Более того background-image нормально работал и в IE6. По всей видимости у вас проблема из-за чего-то другого.

Такие задачи легко решаются через родителя:

class Parent extends Component {
  state = {
    text: 'some text',
  };

  handleClick = () => {
    this.setState({ text: 'some other text'});
  };

  render() {
    const { text } = this.state;

    return (
      <Wrapper>
        <Button onClick={this.handleClick} />
        <Text>{text}</Text>
      </Wrapper>
    );
  }
}

В компонентной структуре , как и в любой другой древовидной, физически невозможно расположить два компонента, чтобы они не находились в одном общем родителе. Это факт.
Если вы не используете redux и задача носит частный характер, то передача колбека через родителя и даже через несколько компонентов, может быть простым и эффективным решением.
Другое дело, что в более менее сложном react приложении хорошо использовать redux или аналоги.

Исправьте:

const mapStateToProps = (state) => {
  projects: state.projects
}

на:

const mapStateToProps = (state) => ({
  projects: state.projects
});

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

Лучше сразу писать изоморфный проект, так как есть множество ньюансов которые стоит учитывать при разработке таких приложений. На github можно найти готовые боилерплейты. На написание своего может уйти от пары часов до пары дней, в зависимости от требуемого набора инструментов. Так же вы можете посмотреть в сторону таких инструментов как next.js, razzle, after . Но точно не знаю, насколько легко, при необходимости, мигрировать с таких решений.

class Example extends Component {
  state = {
    inputValue: '',
  };

  handleChange = e => { 
    const { name, value } = e.target;
    
    this.setState({
      [name]: value,
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    //  получить состояние формы можно обратившись к this.state
  };

  render() {
    const { inputValue } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        <input
          name="inputValue"
          value={inputValue}
          onChange={this.handleChange}
        />
        ...
      </form>
    );
  }

var x = document.getElementById("root").getAttribute("some-param");

https://codesandbox.io/s/mopx1nzpkj
у вас куча маленьких ошибок
1 вы не поключили connect и следовательно компонент не знает о функции setYear
2 вы выводите год как {year} но как только жмете на 1 из кнопок года то в редусер вы ложете не число а обьект
return { ...state, year: action.payload } это вернет вам {year:2017} и в компоненте уже к нему обращаться нужно вот так {year.year}

вот в этом моменте const { year, photos} = this.props вы получате ваши данные в компоненте. Выведите их в консоль и тогда вам станет немного понятнее в чем у вас ошибки

1. SSR нужен в проектах для которых важна индексация поисковиками.
2. Такие приложения называют не SPA, а изоморфными.
3. SSR в изоморфных приложениях используется с REST API, так что проблем с мобильным клиентом у вас не возникнет.
4. Рендерится все тоже самое, что и в SPA только на стороне сервера, после передачи клиенту приложение работает как обычное SPA и взамодействует с сервером по REST API.