Олег Драпеза

https://codepen.io/anon/pen/EwLLbN

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

Писать на JSX позволяет babel, а не webpack, поэтому в примере на codepen добавлен скрипт с babel.

У меня аналогичная ситуация, настраиваю react-router для нового приложения. Сразу скажу, что паттернов, кроме документации, не попадалось)

В initialState для store вы сами решаете, что надо туда добавлять, в любом случае каждый редьюсер дает свой дефолтный кусочек общего state.

По переходам - разделите данные на общие, которые нужны до старта приложения, и конкретные для компонентов.

Про блок перехода - пример из документации, в зависимости от данных сверху, роут либо рендерит компонент, либо делает редирект.

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

Пример компонента, который запрашивает данные. Все свойства через connect, но вы можете так же менять и отслеживать состояние запроса в state.

// getUsers - свойство из mapDispatchToProps, запрос на сервер, по завершению обновляет users в вашем Store
// users - свойство из mapStateToProps
class UserListContainer extends Component {
  componentWillMount() {
    this.props.getUsers();
  }

  render() {
    const { users } = this.props;

    if (!users) {
      return <Spinner />
    }

    return <UserList data={users} />
  }
}

В моем приложении я включаю spinner при старте приложения, и выключаю в компоненте, который рендерится после получения нужных данных. Например можно делать так (свойства и методы так же через connect).
У вас будет крутиться прелоадер, пойдет запрос на токен, по успеху пойдет запрос на users, по успеху начнет рендериться UserListContainer, который должен выключить прелоадер.

class App extends Component {
  render() {
    const { appIsReady } = this.props;

    // наш лоадер на весь экран при appIsReady: false
    return (
        <div>
          {!appIsReady && <Spinner style='fullscreen' />}
          </Switch>
            <Route path='/' exact={true} component={Home} />
            <Route component={NotFound} />
          <Switch>
        </div>
    );
  }
}

class Home extends Component {
  componentWillMount() {
    if (!this.props.token) {
      this.props.getToken();
    }
  }

  render() {
    const { token } = this.props;

    if (!token) {
      return null;
    }

    // UserListContainer в willMount меняет appIsReady на true
    return <Route path='/users' component={UserListContainer} />  
  }
}

Во первых, вы объявили переменную btn, но не возвращаете ее в render.

Во вторых, зачем объявлять в Child this.state свойство someVar, если оно доступно вам из this.props?

Нет необходимости биндить this Child на коллбэк App, потому что тогда props.setVar метод будет вызывать setState у Child - this.props.setVar.bind(this, this.state.someVar)}

Вкратце, React сам обновляет компонент, если изменились его props (что происходит через коллбэк родителя).

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            someVar: 0
        }

        this.setVar = this.setVar.bind(this);
    }

    setVar(some) {
        this.setState({someVar: some});
    }

   render() {
        return (<Child someVar={this.state.someVar} setVar={this.setVar} />);
   }
}

export default class Child extends Component {
    constructor(props) {
        super(props);

        this.handleClick = this.handleClick.bind(this);
        this.getNext = this.getNext.bind(this);
    }

    getNext() {
        return this.props.someVar + 1;
    }

    handleClick() {
        this.props.setVar( this.getNext() )
    }

   render() {
       let btn = (<button type="button" onClick={this.handleClick}>Go</button>
       return (<div><btn /> {this.props.someVar}</div>);
   }
}

Сделайте декомпозицию редьюсера на несколько поменьше.
ссылка

Удалите babel-loader из конфига, точнее не добавляйте эту настройку в режиме разработки:

{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          cacheDirectory: true,
          plugins: ['transform-runtime', 'transform-decorators-legacy'],
          presets: ['es2015', 'react', 'stage-0']
        }
      }

И не ленитесь изучать, как работает webpack, все окажется очень легко и понятно.

Если честно, не уверен что вы целенаправленно изучали реакт.
Рекомендую потратить немного времени на этот курс: https://maxfarseer.gitbooks.io/react-course-ru/content/

Небольшой пример на ES5:
Для ограничения ввода, к примеру, возьмем готовый плагин react-numeric-input

var NumericInput = require('react-numeric-input');

var Calculator = React.createClass({
  getInitialState: function() {
    return {
      price: 0,
      offer: 0,
      result: 0
    };
  },
  caclResult: function() {
    this.setState({result: this.state.price - this.state.offer});
  },
  render: function() {
    return (
      <div className='calculator'>
        <NumericInput min={0} max={100} value={this.state.price} onChange={this.caclResult} />
        <NumericInput min={0} max={100} value={this.state.offer} onChange={this.caclResult} />
        <span>Итого: {this.state.result}</span>
      </div>
    )
  }
});