Антон Спирин

render() {
  const { isSelected } = this.state;
  const content = isSelected ? '1' : '0';

  return (
    <App>
      <Button
        onClick={this.handleClick}
        isSelected={isSelected}
      >
        Button
      </Button>
      <p>{content}</p>
    </App>
  );
}

В примере div.App заменен на StyledComponent App

handleClick = panel => {
  const panelName = this.state.panelName === panel ? null : panel;
    
  this.setState({
    panelName,
  });
};

return возращает в скобках html код

return не возвращает html код. JSX это лишь синтаксический сахар над JavaScript.

JSX вида:

render() {
  return (
    <h1 className="greeting">
      Hello, world!
    </h1>
  );
}

транслируется в JS вида:

render() {
  return React.createElement(
    'h1',
    { className: 'greeting' },
    'Hello, world!'
  );
}

результат выполнения render в этом случае будет следующий:

{
  $$typeof: Symbol(react.element),
  key: null,
  props: { className: "greeting", children: "Hello, world!" },
  ref: null,
  type: "h1",
  _owner: null,
  _store: { validated: false },
  _self: null,
  _source: null,
  __proto__: Object,
}

Возвращаемый объект это Virtual DOM Node. По ней библиотека создает элемент в реальном DOM.

React компилятор перед сборкой парсит данные в файлах компонентов...
...Я понимаю что реакт собирает все в ES2015...

React ничего не собирает. Никаких компиляторов библиотека не имеет. Процесс преобразования JSX в JS называется не компиляцией, а транспиляцией. Транспиляцию JSX в JS выполняют с помощью babel/TypeScript, а сборку обычно осуществляют с помощью библиотеки webpack.

или же это нормально для ES6

Нет. JSX не входит в спецификацию ECMAScript 2015

1. Сами
2. Пишем ручками (+10 к читаемости, +10 к статическому анализу, -100 к когнитивной нагрузке) Конечно в случае если вы пишите dashboard с кучей моделей, имеет смыл написать CRUD Boilerplate
3. В 99.99% случаев хранение состояния форм в store бессмысленно и неоправданно

Лучше хранить все в красном компоненте. Интерфейс дочерних лучше описать так, чтобы хватило одного хандлера hanldeChange для всех компонентов. Компоненты зеленый, синий, желтый лишние. Это вроде форма, пусть в ней и находятся элементы формы, а не непонятные абстракции.

<Form>
  <DatePicker />
  <DatePicker />
  <Divider />
  <CheckBox />
  <CheckBox />
  <CheckBox />
  <Divider />
  <Input />
  <TextArea />
  <Button />
</Form>

лучше и понятней чем:

<Form>
  <DateFromToSelector />
  <FormCheckboxes />
  <Texts />
  <Button />
</Form>

И новому программисту не придется ничего искать.

Если вы хотите дождаться выполнения асинхронных вызовов в асинхронных функциях, то их надо делать с использованием ключевого слова await. Вызовы dispatch с передачей обычных объектов действий выполняются синхронно.

const someCall = () => async dispatch() => {
  dispatch({type: Constant.SOME_OPERATION_1});
  await dispatch(createAccount());
  dispatch({type: Constant.SOME_OPERATION_2});
};

export const createAccount = () => async (dispatch) => {
  await request api;
  dispatch({type: SMTH});
  await another request api;
  dispatch({type: SMTH2});
}

Так же для обработки неудачных ответов сервера можно использовать try/catch:

export const createAccount = () => async (dispatch) => {
  try {
    await request api;
    dispatch({type: SMTH});
    await another request api;
    dispatch({type: SMTH2});
  catch (e) {
    // handle error here
  }
}

Вы не передаете в компонент props.

public onRoute = () => {
  if (data.role_type === `/${document.location.pathname.split('/')[1]}`) {
    return <Component/>;  // тут ничего не передается
  }
  return this.context.router.history.push('/404');
}

так должно работать:

public onRoute = () => {
  if (data.role_type === `/${document.location.pathname.split('/')[1]}`) {
    return <Component {...this.props} />;
  }
  return this.context.router.history.push('/404');
}

Как альтернативу HOC можно сделать обертку над Routе, применив композицию.

<AuthRoute path='/some_path' component={SomeComponent} />

Зачем вы используете context в компоненте дочернем router остается загадкой.

Либо перепишите Grid на forwardRef по аналогии с примером:

const Grid = React.forwardRef((props, ref) => (
  <div ref={ref}>{props.children}</div>
));

Либо исправьте:

export class MyComponent extends React.Component {
  render() {
    return (
      <Grid innerRef={this.props.forwardRef} />
    );
  }
}

и в компоненте Grid:

const Grid = props => (
  <div ref={props.innerRef}>{props.children}</div>
);

Вы мутируете state:

this.state.data[this.state.id][e.target.name] = !checked;

До этого присваиваете ему значение props:

this.setState({
  data: this.props.data,
  id: this.props.id
});

Естественно props изменяется после мутации.

Банальный пример:

const a = { key: 'value' };
const b = a;
b.key = 'new value';
console.log(a.key); // new value

Почитайте о том, что такое передача по ссылке. Почитайте про иммутабельность.
И никогда больше не пишите ничего подобного:

this.state.data[this.state.id][e.target.name] = !checked;

Изменение state только через this.setState.

Код особо не разбирал. Скажу лишь, что вам компонент лучше разбить на несколько:

render () {
  const { match: { url } } = this.props;
  return (
    <Switch>
      <Route exact path={url} content={Tweets} />
      <Route exact path={url + '/with-replies'} content={WithReplies} />
      <Route exact path={url + '/media'} content={Media} />
    </Switch>
  )
}

Вместо:

render() {
  return someCondition ? (
      <Component
        prop1={a.prop1}
        prop2={a.prop2}
        prop3={a.prop3}
        prop4={a.prop4}
        prop5={a.prop5}
      />
    ) : (
      <Component
        prop1={b.prop1}
        prop2={b.prop2}
        prop3={b.prop3}
        prop4={b.prop4}
        prop5={b.prop5}
      />
    );
}

Лучше:

render() {
  const c = someCondition ? a : b;

  return (
    <Component
      prop1={c.prop1}
      prop2={c.prop2}
      prop3={c.prop3}
      prop4={c.prop4}
      prop5={c.prop5}
    />
  );
}

Всместо :

render() {
  return (
    <Wrapper>
      {condition1 &&
         condition2 &&
         condition3 &&
         condition4 && (
           <Component />
       )}
    </Wrapper>
  )
}

Лучше:

render() {
  const shouldShowComponent = condition1 && condition2 && condition3 && condition4; 

  return (
    <Wrapper>
      {shouldShowComponent && <Component />}
    </Wrapper>
  );
}

Вы передаете в вызов функции call строку, а она принимает первым аргументом функцию:
call(fn, ...args)
последующие аргументы передаются в вызов функции fn.

Могу посоветовать конкретизировать поиск. Например:
react dashboard
react weather app
react reddit client
react youtube client
react tic tac toe
etc

Вы уверены что понимаете как работает метод splice? Его вызов возвращает массив удаленных элементов, а не массив из которого эти элементы удалены.
Варианты решения:

handleNoteDel = index => {
  const notes = [...this.state.notes];
  notes.splice(index, 1);
  this.setState({ notes });
}

или:

handleNoteDel = index => {
  this.setState({
    notes: this.state.notes.filter((_, i) => i !== index),
  });
}

Provider передает данные store в контекст.
connect использует эти данные, поэтому использовать этот HOC можно только в компонентах дочерних Provider.
Вам надо немного реорганизовать структуру:

import { render } from 'react-dom';
import {createStore} from "redux";
import rootReducer from "../reducers";
import Auth from './components/Auth';

const store = createStore(rootReducer);

render(
  <Provider store={store}>
    <BrowserRouter>
      <Auth />
    </BrowserRouter>
  </Provider>, 
  document.getElementById('root'),
);

import React, {Component} from 'react';
import {connect} from 'react-redux';

class Auth extends Component {
  render() {
    return (
      <Switch>
        <Route exact path={this.props.api.signin} render={() => Test}/>
      </Switch>
    );
  }
}


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

export default connect(mapStateToProps)(Auth);

Заменить колбек на стрелочную функцию:

const point = points.map((obj, index) => (
  <li key={index}>
    {obj.address}
    <button onClick={this.deletePoint(obj)}>Удалитьточку</button>
  </li>
));

getPromoUrl = async (id, param) => {
  const data = await this.getPromise(id, param);
  console.log(data);   
  this.setState({ data });
};

или:

getPromoUrl = (id, param) => {
  this.getPromise(id, param).then(data => {
    console.log(data);   
    this.setState({ data });
  });
};

Хорошо изучите API Promise.