Никита Гущин

Приложение вы оборачиваете в провайдер: он должен быть только один. Далее - вызываете коннект там, где нужны данные. При этом старайтесь избегать больших "коннектов" которые мапят кучу стейта и экшенов - т.к. это ведет к невероятному количеству ненужных ререндеров и перерасчетов state...

Как пример - список с большим количеством элементов. Самая первая идея - сделать коннект к компоненту списка и передать ему items из state:

const Item = props => (
  <li>{props.data.title}</li>
)

const List = props => (
  <ul>{props.items.map(item => <Item data={item} />}</ul>
)

const ConnectedList = connect(
  state => ({ items: state.someItems })
)(List)

Но что произойдет, если один айтем из store изменится? Правильно - ререндер всего списка. Даже если вы сделаете Item как PureComponent - все равно получится огромный оверхед.

Второй вариант: коннектить список, но передавать туда только массив id элементов Плюс - коннектить каждый элемент, и получать данные из стора по переданному id. При этом хранить в сторе мы будем отдельно все айтемы (в виде хэшмапа itemId -> item) и отдельно массив с id, либо просто используйте reselect, который поможет вам сделать преобразование items => itemsIds избежав ререндеров (в примере я упущу этот момент, для краткости).

const Item = props => (
  <li>{props.data.title}</li>
)

const ConnectedItem = connect(
  (state, props) => ({ data: state.someItems.entities[props.id] })
)(Item)

const List = props => (
  <ul>{props.items.map(id => <ConnectedItem id={id} />}</ul>
)

const ConnectedList = connect(
  state => ({ items: state.someItems.ids })
)(List)

Другими словами - даже 1000 подконекченных к стору компонентов лучше, чем 1 большой коннект (не скажу, что в 100% случаев, но все же).
Подробнее про этот момент почитать можно тут somebody32.github.io/high-performance-redux

PS
И в целом, я заметил, что вы активно изучаете react - поэтому, рекомендую вот этот цикл статей Practical Redux. Там очень много годной информации по react+redux

С react используется webpack в подавляющем большинстве случаев. Есть тонна готовых конфигов, которые можно просто скопипастить и все будет работать. Но в целом - в проекте вам может понадобится сделать что-то по другому и тогда возникают сложности. Поэтому для общего развития нужно хотя-бы поверхностно разбираться что там к чему (в идеале - попробовать такие фишки как tree shaking и code splitting).

Мой совет - для этого просто начните с нуля собирать проект. Подсматривайте готовые конфиги и постепенно собирайте свой, читая при этом документацию. При устройстве на работу будет однозначно плюсом, да и в собственной разработке не все же create-react-app'ом пользоваться.

PS а про gulp - не знаю, давно уже не приходилось его в живую использовать: все что нужно - может webpack

В общем-то ничего "такого" там нету. Если вы разрабатываете проект сложнее статического сайта-визитки -- вам нужна архитектура. Можно, конечно, все придумать самому на "чистом js", но это будет либо полная ерунда, либо не соизмеримо дороже чем просто взять готовый "фреймворк". Да и как вы потом будете объяснять пришедшему вам на смену разработчику что, почему и как сделано.

А уж если проект написан на ангуляре\реакте\yourFrameworkName, то соответствующий разработчик худо-бедно разберется в нем без чьей-либо помощи

Можно сделать так:

class MyComponent extends PureComponent {
  clickHandler = () => {
     // Так как это стрелочная функция - она будет забиндена при создании элемента (объекта)
  }

  render() {
    return (
      <SearchCollection onClick={this.clickHandler}/>
    )
  }
}

Или так:

class MyComponent extends PureComponent {

  constructor(props, context) {
    super(props, context)
    this.clickHandler = this.clickHandler.bind(this)
  }

  clickHandler() {
  }

  render() {
    return (
      <SearchCollection onClick={this.clickHandler}/>
    )
  }
}

Если shouldComponentUpdate вернула false - метод рендер текущего компонента не будет вызван. Соответственно дочерние компоненты тоже не начнут рендериться сами. Но может так случиться (например - по таймеру), что в дочернем компоненте вы вызовете setState - тогда он обновится (независимо от родителя)

но на клиенте, как раз наоборот, если дела обстоят с промисами, то каждая цепочка вызова функцию ждут друг-друга, т.е поочередно.

Это не верно. Цепочка не ждет друг друга - поток не блокируется, так же как и node. Когда приходит ответ сервера - вызывается соответствующий callback. Но во время ожидания - ваш код работает (например - вы захотели отрендерить анимацию загрузки).

В асинхронных экшенах вы можете менять стейт (диспатчить) когда вам угодно. Обычно это делается два раза - когда запрос отправлен (инициирован) и когда пришел ответ. Между этими моментами у вас могут быть и другие экшены (пользователь нажал на кнопку, или что-то еще произошло) и вы таже асинхронно их обрабатываете.

Вам в любом случае с browserHistory нужен будет какой-то веб сервер, сконфигурированный на отдачу статики и файла index.html по всем остальным GET запросам...

Вы хотите отказаться от webpack-dev-server? Если да - можно просто использовать express для раздачи статики, а на все остальные запросы отдавать index.html

const app = express()

// раздача статики (css, fonts, images, ...)
app.use('/static/', express.static(__dirname + '/../../public/static'))

app.get('/*', (req, res) => {
  res.send(/* ваш index.html  */)
})

Для этого лучше всего использовать компонент как класс:

class MyElement extends Component {

  componentDidMount() {
    // начиная с этого момента у вас есть доступ к 
    // this.container - это ссылка на DOM ноду (или реакт-элемент)

   jQuery(this.container) // например используем джейквери

    // или вызовем метод элемента
    // выведет в консоль 'Wow, so super!'
    this.componentWithMethod.mySuperMethod()
  }

  handle3dPartyContainerRef = node => {
    this.container = node
  }

  handleComponentRef= node => {
    this.componentWithMethod= node
  }

  render() {
    return (
      <div>
        <h1>Hello!</h1>
        <div ref={this.handle3dPartyContainerRef}  />
        <ComponentWithMethod ref={this.handleComponentRef} />
      </div>
    )
  }
}


class ComponentWithMethod extends Component {
  mySuperMethod = () => {
     // Вот так можно добавить метод к элементу
    // вызывать его можно если получить ссылку на установленный в DOM элемент 
    console.log('Wow, so super!')
  }

  render() {
    return (
      <span>just a node</span>
    )
  }
}

Про ref в реакте есть документация.

Потому что роуты не подходят. У вас :

<Router>
    <App>
      <Route exact path="/" component={Home}/>
      <Route path="/item0" component={Item0}/>
      <Route path="/item1" component={Item1}/>
    </App>  
  </Router>,

А на GH pages у вас роут /joonline/ . К счастью - есть простое решение - указать basepath (документация) относительно которой будут строиться все роуты приложения:

<Router  basename="/joonline"/>
    <App>
      <Route exact path="/" component={Home}/>
      <Route path="/item0" component={Item0}/>
      <Route path="/item1" component={Item1}/>
    </App>  
  </Router>,

Берете ваши макеты (если нету - делаете вайрфреймы) и описываете все компоненты, прикидываете бизнесс логику и прочее. На выходе у вас есть детальный список задач, который можно попробовать оценить по часам. Потом умножаете результат на 2, а лучше на 3... ну и если не очень с реактом - еще на 5 (или на 10) и получаете человеко-часы. Далее умножаете эту цифру на Вашу почасовую ставку и вот она - стоимость проекта.

Рабочий пример (jsfiddle)

Основная логика находится в компоненте SearchResults:

class SearchResults  extends React.PureComponent {

  render() {
	const { target, results } = this.props

  	return (
    	<div className="SearchResults">
    	  {_
        	.chain(results)
        	.map(word => word.split(target))
                .map(parts => _.reduce(
              	  parts,
                  (res, part) => res.length > 0
                   ? [ ...res, <span className="highlight">{target}</span>, part ]
                   : [ part ]
          	  ,
                  []
        	))
                .map(word => <span className="word">{word}</span>)
                .value()
          }
    	</div>
    )
  }
}

Разбиваем слова на массив (пример 'Mathieu'.split('th') => ['Ma', 'eu'])
.map(word => word.split(target))

Затем собираем их обратно, при этом слева от каждого "кусочка" слова вставляем наш разделитель (то, что нужно выделить цветом), попутно оборачивая его в span:

.map(parts => _.reduce(
  parts,
  (res, part) => res.length > 0
    ? [ ...res, <span className="highlight">{target}</span>, part ]
    : [ part ]
  ,
  []
))

Ну и затем оборачиваем получившийся массив в span, который будет являться контейнером для слова (результата поиска):
.map(word => <span className="word">{word}</span>)