Антон Спирин

Для стилей - медиа-запросы.
Для рендера разных версий древа компонентов - user agent.

bootstrap:

import React from 'react';

const Example = () => (
  <div className="container-fluid">{/* children */}</div>
);

reactstrap:

import React from 'react';
import { Container } from 'reactstrap';

const Example = () => (
  <Container fluid>{/* children */}</Container>
);

react-bootstrap:

import React from 'react';
import Container from 'react-bootstrap/Container';

const Example = () => (
  <Container fluid>{/* children */}</Container>
);

1. Для того чтобы научиться отображать списки почитайте:
Списки и ключи
2. Вам достаточно всего одного роута с параметром. Почитать:
Responsive routes
3.

я не могу использовать api в общем

"Не могу" это нельзя, нет доступа или не умею? Если последнее, то:
AJAX и обращение к API (тут можно использовать хук useEffect)
Использование хука эффекта
Использование Fetch API
Axios: Example

1. В экшене меняем строку:

.then(data => dispatch(fetchSuccess(data.success)))

2. В редьюсере:

case 'LOGIN_USER_SUCCESS':
  return {
    ...state,
    key: action.key, 
  };

3. connect:

const mapStateToProps = state => ({
  success: state.authorisation.key,
});

export default connect(mapStateToProps)(YourComponent);

По-хорошему исправить:
authorisation ----> authorization

Написать функцию, которая принимает целое число и выводит в консоль таблицу умножения этого числа от 1 до 99
или еще одна:
Написать функцию, которая принимает массив целых чисел и увеличивает каждое четное вдвое

Такие элементарные вещи на техническом интервью у вас точно никто спрашивать не будет.

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

Это значит, что на должность фронтенд разработчика вас скорей всего погоняют и по css, и по javascript, и по фреймворку, а так же спросят о путях решения какой-нибудь типовой задачи.
Типовые вопросы по CSS, JS и конкретному фреймворку вы можете найти в интернете.

1. При успешной авторизации передавайте на клиент токен.
2. Храните токен в cookie. Проверяйте его наличие при инициализации и либо отрисовывайте вариант для залогиненного пользователя, предварительно скачав его данные, либо для гостя.
3. Располагая такими данными как id пользователя, вы с легкостью можете отличать стоит ли вам показывать кнопку edit в профиле или нет:

const { me, user } = this.props;
const isOwner = me.id === user.id;

return (
  <>
    {isOwner && <Button onClick={this.handleEditClick}>Edit</Button>}
    {/* other jsx */}
  </>
);

где me - текущий залогиненный пользователь, user - пользователь чей профиль загружен.

4. Само собой, все права надо проверять на стороне сервера. Для этого токен следует посылать в заголовках запросов.

Есть какой-то материал для осознания, как реализовать полноценный логин

Материала в интернете по теме море, только откройте Google и сделайте нужный запрос. Статей и руководств, которые содержат в себе все без исключения кейсы естественно нет, поэтому изучайте разные источники.

Как вариант можно использовать такой хак:

<span itemProp="price" {...{ content: '10.00' }}>10</span>

иногда удобно определять свойства в переменной:

const spanProps = {
  itemProp: 'price',
  content: '10.00',
};

return (
  <span {...spanProps}>10</span>
);

Хороший курс от Максим
https://github.com/markerikson/react-redux-links

Насколько понял вашу задачу, вы хотите вынести Header и рендерить под ним разные страницы. Это можно сделать, например, так:

const Amasia = () => (
  <div>Amasia</div>
);

const Product = ({ match }) => (
  <div>
    Page number: {match.params.page}
  </div>
);

const Header = () => (
  <header>
    <nav>
      <Link to="/">Amasia</Link>
      <Link to="/Mens/Hat/1">Product</Link>
    </nav>
    <div>Logo</div>
    <div>FormSearch</div>
    <div>ButSearch</div>
  </header>
);

const App = () => (
  <>
    <Header />
    <main>
      <Switch>
        <Route exact path="/" component={Amasia} />
        <Route exact path="/Mens/Hat/:page" component={Product} />
      </Switch>
    </main>
  </>  
);

const rootElement = document.getElementById("root");

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  rootElement,
);

React interview questions and answers

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },
};

file-loader

Пример использования изображений в коде:

import React from 'react';
import image from './image.png';

const Example = () => (
  <img src={image} />
);

или:

import React from 'react';

const Example = () => (
  <img src={require('./image.png')} />
);

Например так:

import React from 'react';
import data from './products.json';

const List = () => (
  <ul>
    {data.map(product => (
      <li key={product.id}>{product.title}</li>
    )}
  </ul>
);

Списки и ключи

Возможно, проблема с типом контента. В первом случае отправляете "application/x-www-form-urlencoded", во втором "application/json"

module.exports = {
  //...
  devServer: {
    historyApiFallback: true
  }
};

devServer.historyApiFallback

С версии React 15.5 PropTypes вынесены в отдельный пакет.

import React from 'react';
import PropTypes from 'prop-types';

// ...

Slider.propTypes = {
  slidePerView: PropTypes.string,
  slidesPerGroup: PropTypes.string,
  loop: PropTypes.string,
};

// ...

Списки и ключи

Забыли указать порт в запросе.

Изменение контекста из вложенного компонента