Антон Спирин

При загрузке приложения, скрипты из "what" выполняются сразу, чего быть не должно.

Вы сами вызываете tt во время отрисовки компонента Home:

<Button className="def_btn" size="xl" level="2" onClick={tt("dsdd")}>

правильно так:

<Button className="def_btn" size="xl" level="2" onClick={() => tt("dsdd")}>

еще лучше написать хандлер обертку и передавать в кнопку его:

handler = () => {
  tt("dsdd");
};

<Button className="def_btn" size="xl" level="2" onClick={this.handler}>

По-хорошему, вообще не использовать jQuery в React разработке.

Свойством description надо передавать строку, а вы передаете объект.
Пример правильного использования компонента:

<Alert title="Title string" description="Description string" showIcon />;

MobX - библиотека для управления состоянием приложения.
React Context API - интерфейс для передачи данных вниз по древу компонентов.

Какие преимущества у mobX, в сравнении с React context API

Преимуществ нет, так как у инструментов разные задачи.

Надо в первую очередь в отталкиваться от задач.
Если в вашем проекте несколько размеров кнопок для одного разрешения, несколько стилей, то необходимо передавать соответствующие свойства:
<Button size="sm" type="outline" color="danger" />

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

На примере styled-components:

const StyledButton = styled.button`
  height: ${props => props.height.sm}px;

  ${media.md`
    height: ${props => props.height.md}px;
  `}

  ${media.lg`
    height: ${props => props.height.lg}px;
  `}
`;

const getHeightProp = size => {
  switch(size) {
    case 'sm':
      return { ... };
    case 'md':
      return {
        sm: 32,
        md: 48,
        lg: 64,
      };
    case 'lg':
      return { ... };
  }
};

const Button = ({ size }) => {
  return <StyledButton height={getHeightProp(size)} />;
}

При использовании других инструментов используют селекторы, модификаторы, объекты стилей и тп.

getUsers = () => {
  const { dispatch } = this.props;

  fetch(`https://api.github.com/search/users?q=Donetsk`)
    .then(res => res.json())
    .then(res => {
      return Promise.all(
        res.items.map(user => fetch(`https://api.github.com/users/${user.login}`).then(res => res.json()))
      ).then(users =>  {
        dispatch({ type: 'GET_USERS', users });
      });
    });          
};

import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  childRef = React.createRef();

  render() {
    return (
      <Child innerRef={this.childRef} />
    );
  }
}

import React, { Component } from 'react';

export default class Child extends Component {
  render() {
    const { innerRef } = this.props;

    return (
      <div ref={innerRef}></div>
    );
  }
}

Дублирующиеся свойства в литерале объекта переопределяют друг друга. В созданный объект попадает значение последнего. Пример.

Поэтому объект, возвращаемый вызовом функции:

prevState => ({
  counter: prevState.counter + 1,
  counter: prevState.counter + 1,
})

при prevState.counter === 0, будет создаваться как:

{
  counter: 0 + 1,
  counter: 0 + 1,  // результат этого выражения попадет в созданный объект
}

и на выходе получится объект:
{ counter: 1 }
Он и будет подмешан в новый объект состояния.

Исправленная версия.
1. Изменен протокол с http на https.
2. Исправлена опечатка в переменной isLoaded(было isloaded).

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

1. Добавляем скрипт в html шаблон к которому крепится приложение.
2. Инициализируем пустой массив в точке входа:
window._rutarget = [];
3. Пользуемся в любой части приложения:
window._rutarget.push({ 'event': 'showOffer' });

Можно написать свою обертку:

window._rutarget = [];

const AdService = {
  showOffer() {
    window._rutarget.push({'event': 'showOffer'});
  }, 
};

export default AdService;

В React Native тэг script использовать не получится, можно разве попробовать использовать WebVIew.

case ADD_PRODUCT_COMMENT:
  return {
    ...state,
    comments: {
      ...state.comments,
      allComments: [
        ...state.comments.allComments,
        action.payload,
      ],
     },
  };

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

По-хорошему, ваш запрос за комментариями надо вынести в асинхронное действие, а данные прокидывать в компонент из store вызовом connect.

class Example extends React.Component {
  componentDidMount() {
    const { fetchComments, productSlug } = this.props;
    fetchProductCommentsBySlug(productSlug);
  }

  handleRemoveComment = id => {
    this.props.removeProductCommentById(id); 
  };

  handleSubmitComment = e => {
    // ...
    this.props.postProductComment(productComment);
  };
  
  render() {
    const { comments, users } = this.props;
    // ...
  }
}

const mapStateToProps = state => ({
  users: usersSelector(state),
  comments: commentsSelector(state),
});

const mapDispatchToProps = {
  fetchProductCommentsBySlug,
  removeProductCommentById,
  postProductComment,
};

connect(mapStateToProps, mapDispatchToProps)(Example);

Неправильно. По-хорошему у вас должно быть состояние корзины с объектами описывающими позиции. Как минимум это количество и id продукта:

{
  product_id: "223af-b4535-54e21-31233-12a122-b453d",
  quantity: 2.
}

По ним уже циклом и отображают позиции корзины, подставляя нужные товары.
Total будет надежней считать в редьюсере. Значение total надо пересчитывать заново при каждом добавлении/удалении позиций из корзины и изменении их количества. Для этого будет удобно складывать в объект позиции еще и цену товара.

Для решения вашей проблемы вам достаточно обновлять все данные одним вызовом:

onClick(e) {
  const { value, type } = e.target.dataset;

  this.setState({
    letter: this.state.letter + value,
    lastType: this.state.newType,
    newType: type,
    compareType: type === this.state.newType,
  });
}

Вы передаете вторым аргументом в useEffect пустой массив. Это значит, что функция колбек будет вызвана только при монтировании компонента. Вам следует передавать в массив второго аргумента match.url, тогда колбек будет вызываться после монтирования и каждый раз при изменении url.

const Hat = ({ match }) => {
  // ...
  useEffect(() => {
    fetch(`https://foo0022.firebaseio.com//male/hat.json`)
      .then(res => res.json())
      .then(setArrProd);
  }, [match.url]);
  // ...
}

Вариант 1. Использовать шаблонный литерал:
<Link to={`/${item.anchor}`}>

MDN: Шаблонные строки.

Вариант 2. Конкатенация строк:
<Link to={'/' + item.anchor}>

class ComponentA extends React.PureComponent {
  state = { isMounted: true };

  removeB = () => {
    this.setState({ isMounted: false });
  };

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

    return (
      <div>
        {isMounted && <ComponentB />}
        <ComponentC onClick={this.removeB} />
      </div>
    );
  }
}

Ничто не мешает вам передавать объект cinema в компонент целиком:

{this.state.cinemas.map(cinema => <ListItemCinema key={cinema.id} cinema={cinema} />)}

const ListItemCinema = ({ cinema }) => {
  const { subway, shortTitle, labels, title, mail } = cinema.attributes;
  
  /* some code */  

  return (
    <div>
      {/* some code */}
      <ul>
        {subway.map(station => <li key={station.name}>{station.name}</li>)}
      </ul>
    </div>
  );
}

Cсылки по теме:
Build your own Front-end Framework / Library
Didact: a DIY guide to build your own React
https://github.com/pomber/didact
Build Your Own React — A Step By Step Guide

Шаг 1. Изменяем роутер:

<Switch>
  <Route path={"/"} exact render={() => <div>'100'</div>} />
  <Route path={"/male/hat"} exact component={ProductsList} />
  <Route path={"/male/hat/:to"} exact component={ProductDetails} />
</Switch>

Шаг 2. Пишем компонент для детализации:

const ProductDetails = ({ match }) => {
  const { to } = match.params;
  const [state, setState] = useState({ isFetching: true, hat: null });
  const { isFetching, product } = state;  

  useEffect(() => {
    (async () => {
      await fetch(`https://foo0022.firebaseio.com//male/hat.json`)
        .then(res => res.json())
        .then(data => {
          const product = data.find(item => item.to === to);
          setState({ isFetching: false, product });
        });
    })();
  }, []);
  
  if (isFetching) return <div>...Loading</div>;

  if (!product) return <div>404: Product not found</div>;

  return (
    <div>
      <h1>{product.title}</h1>
      <h2>{product.price}</h2>
    </div>
  );
}

Шаг 3. Изменяем компонент списка:

const ProductsList = () => {
  const [state, setState] = useState({ isFetching: true, products: [] });
  const { isFetching, products } = state;

  useEffect(() => {
    (async () => {
      await fetch(`https://foo0022.firebaseio.com//male/hat.json`)
        .then(res => res.json())
        .then(data => setState({ isFetching: false, products: data });
    })();
  }, []);
  
  if (isFetching) return <div>...Loading</div>;
  
  return (
    <ul>
      {products.map(({ to, title }) => (
          <li key={to}>
            <Link to={`/male/hat/${to}`}>{title}</Link>
          </li>
      ))}
    </ul>
  );
};