lnked

Если ./ опустить тоже будет текущий каталог

Если ./ опустить, то поиск будет в node_modules, а там этого файла не будет ))

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

import {Login, LoginWrap, DataInput} from '../styledComponents/login.js'

return(
    <LoginWrap>
      <Login>
          <img src={logo} alt='logo'/>
          <h3>Login</h3>
        <DataInput>
          <input placeholder='Login' ref={loginInput}/>
          <input placeholder='Password' type='password' ref={passInput}/>
        </DataInput>
        <span>{loginError} &#160;</span>
        <input type='submit' value='Login' onClick={onLogin}/>
      </Login>
    </LoginWrap>
  )

Приложение на реакте будет работать на клиентской машине. Никаких файлов на клиентской машине прочитать/записать не получится. Схема может быть такой: реакт приложение шлет запрос на бэкенд -> бэкенд считывает данные из файла и отправляет их клиентскому приложению -> данные в клиентском приложении меняются и отправляются назад на бекэнд -> бекэнд записывает файл с новыми данными.

Либо юзать localStorage, но тогда, для json-данные будут разными для каждой машины.

!true === false
!false === true

!0 -> true
!1 -> false

экономия на символах? :)

<div id="app"></div>

function App() {
  const [ dark, setDark ] = React.useState(null);
  const updateDark = e => setDark(e.type === 'mouseover' ? e.currentTarget.id : null);

  return (
    <React.Fragment>
      {[ 'left', 'right' ].map(n => (
        <div
          id={n}
          key={n}
          onMouseOver={updateDark}
          onMouseLeave={updateDark}
          className={dark && dark !== n ? 'dark' : ''}
        ></div>
      ))}
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

super(props) используется для того, чтобы вызвать метод constructor(props) у React.Component, мы же пишем extends, грубо говоря, под капотом

class Component {
  constructor(props) {
    this.props = props;
  }
}

а без конструктора это выглядит так

import React, { Component } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

class Example extends Component {
  state = {
    collapse: false
  };

  toggle = () => {
    this.setState(state => ({ collapse: !state.collapse }));
  }

  render() {
    return (
      <div>
        <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
        <Collapse isOpen={this.state.collapse}>
          <Card>
            <CardBody>
            Anim pariatur cliche reprehenderit,
             enim eiusmod high life accusamus terry richardson ad squid. Nihil
             anim keffiyeh helvetica, craft beer labore wes anderson cred
             nesciunt sapiente ea proident.
            </CardBody>
          </Card>
        </Collapse>
      </div>
    );
  }
}

export default Example;

updateUser = (id, words) => {
  this.setState(({ users }) => ({
    users: users.map(n => n.id === id
      ? { ...n, words: [ ...n.words, ...words ] }
      : n
    ),
  }));
}

Порталы

задаешь стили для .slick-slide {padding: 0 15px;} к примеру. а для контейнера margin: 0 -15px;

Шаблонные строки
Тернарный оператор

1. https://developer.mozilla.org/ru/docs/Web/JavaScri...
2. https://developer.mozilla.org/ru/docs/Web/JavaScri...

Забудьте про реакт на ближайшие полгода и марш изучать js.

1. Как вы в этой схеме собираетесь слушать обновления history и переходить на другие страницы?
2. Чем вам не угодил готовый инструмент, отлично решающий эту задачу?

Например:

<Route path="/(A|B|C|D)/xx/xxx/:feeros" component={About} />

На самом деле, можно абстрагироваться и от конкретных значений.

При импорте макета в Zeplin для каждой иконки должно быть настроено в каких вариантах и расширениях она может быть экспортирована. После этого можно будет скачать все иконки скопом во вкладке Assets (иконка с ножиком примерно под аватаркой)

В чем причина?

В том, что вы все делаете неправильно.

Вам надо использовать клиентский роутинг. Например, react-router-dom.
React Training / React Router

exact уберите