Антон Спирин

<a 
  className={filter === 'all' ? 'active' : null}
  onClick={() => setFilter('all')}
>
  All Book
</a>

Нет

redux-thunk

const AuthRoute = ({ component: Component, render, isSignedIn, ...rest }) => (
  <Route {...rest} render={props => {
    if (!isSignedIn) return (
      <Redirect to={{
        pathname: "/signin",
        state: { referrer: props.history.location.pathname }
      }} />
    );

    if (render) return render({ ...props });

    return <Component {...props} />;

  }} />
);

const mapStateToProps = state => ({
  isSignedIn: isSignedInSelector(state),
});

export default connect(mapStateToProps)(AuthRoute);

<AuthRoute path="/admin" component={Admin} />

Ну и совсем простое решение без переадресации:

<Switch>
  {isSignedIn && <Route path="/admin" component={Admin} />}
  <Route path="/partner/:name" component={Partner}/>
  <Route component={() => <div>page not found</div>} />
</Switch>

https://reactjs.org

1. Почитайте про иммутабельность.
2. Никогда не изменяйте state напрямую.
3. По возможности не делайте bind в render.
4. Рефакторинг не имеет никакого отношения к перерисовке компонента.

createItem(task) {
  this.setState(prevState => ({
    tasks: [
      ...prevState.tasks,
      { name: task, status: false },
    ],
  }));
}

Весь остальной код по-хорошему бы переписать, но то, как это сделать выходит за рамки вашего вопроса.

Внимательно читаем документацию.

static getDerivedStateFromProps(props, state) {
  if (props.data !== state.data) {
    return {
      data: props.data,
    };
  }

  return null;
}

Но, по-хорошему, если данные хранятся в state родителя и изменяются там же, то в большинстве случаев их не надо писать в state дочернего компонента, можно, просто, использовать props.

Использовать @font-face и настроить webpack-file-loader для файлов шрифтов.
Нет принципиальной разницы будете вы при этом использовать injectGlobal или импорт scss/css файла.

render() {
  return (
    <Switch>
      <Route path='/category/list' render={() => this.getCategoryListWithBinding()} />
      <Route path='/category/form/:id' render={() => this.getCategoryFormWithBinding()} />
      <Redirect to='/category/list' />
    </Switch>
  );
}

Если лайаут одинаковый на каждом маршруте:

render() {
  return(
    <Wrapper>
      <Header />
      <Main />
      <Footer />
    </Wrapper>
  );
}

в компоненте Main располагаете Switch с маршрутами.

Если на разных страницах он может быть разный. То можно сделать контейнеры для контента:

const MainPageLayout = ({ children }) => (
  <Wrapper>
    <Header />
    <PageContent>
      {children}
    </PageContent>
    <Footer />
  </Wrapper>
);

и оборачивать в него код страницы:

const SomePage = () => (
  <MainPageLayout>
    {/* page code */}
  </MainPageLayout>
);

а в главном компоненте расположить Switch с маршрутами.

Компонент Router лучше расположить над всем приложением:

<Provider>
  <Router>
    <App />
  </Router>
</Provider>

Все зависит от задачи. Если надо показывать страницу по другому пути, то используйте роутер, если нет, то state.

1. React приложение это лишь модуль который рендерится в древе вашей страницы. Соответственно, это может быть как полноценное SPA приложение, так и небольшой виджет, ничего не подозревающий о содержимом остальной части страницы. Тут все зависит от задач, которые вы перед собой ставите.
2. Собирать бандл лучше с помощью webpack. Это сейчас стандарт фронтенд разработки.
3. Стили можно организовывать множеством способов. В экосистеме имеется множество разных инструментов для решения этой задачи. Если планируете переиспользование своего виджета, то стили лучше писать изолированные, если это лишь неотъемлемая часть проекта, содержащая сложную логику, то можно смело использовать общие стили проекта. Возвращаясь к вашему вопросу, нет, стили подключать напрямую не обязательно.

const Article = styled.div`
  &:before {
    background-image: url(${props => props.beforeImage});
  }
  &:after {
    background-image: url(${props => props.afterImage});
  }
`;

<Article beforeImage={beforeImage} afterImage={afterImage}>
  {/* ... */}
</Article>

{data.clients.map((value, index) => <Table.Cell key={index}>{value}</Table.Cell>)}

либо:

{data.clients.map((value, index) => (
  <Table.Cell key={index}>{value}</Table.Cell>
))}

Handling Events

1. Переименуйте все индексные файлы вindex.jsв нижнем регистре.
2. Соблюдайте регистр в путях при импортах.