Тестирование в React

Если данная тема будет интересна, то в следующих статьях мы попробуем серьезно протестировать более сложное приложение, использующее redux, redux-saga, react-intl, модальные окошки и прочие элементы, усложняющие тестирование.

Тема очень интересная, очевидно. Хотелось бы поскорее увидеть продолжение!

React.js: собираем с нуля изоморфное / универсальное приложение. Часть 1: собираем стек

Ох, я понял! Эквивалентная запись с использованием spread:

  handleClick() {
    this.setState({...this.state, words: this.state.words.concat(['marklar'])});
  }

React.js: собираем с нуля изоморфное / универсальное приложение. Часть 1: собираем стек

Действительно, вот так работает:

  handleClick() {
    this.setState({words: this.state.words.concat(['marklar'])});
  }

Но тогда зачем нужна вот эта вариация с prevState?

  handleClick() {
    this.setState(prevState => ({
      words: prevState.words.concat(['marklar'])
    }));
  }

React.js: собираем с нуля изоморфное / универсальное приложение. Часть 1: собираем стек

Проблема другая. Но я не понимаю. Цитирую из статьи:

The problem is that PureComponent will do a simple comparison between the old and new values of this.props.words. Since this code mutates the words array in the handleClick method of WordAdder, the old and new values of this.props.words will compare as equal, even though the actual words in the array have changed. The ListOfWords will thus not update even though it has new words that shoud be rendered.

React.js: собираем с нуля изоморфное / универсальное приложение. Часть 1: собираем стек

Непонятно, тогда почему этот код работает?

src

React.js: собираем с нуля изоморфное / универсальное приложение. Часть 1: собираем стек

И ещё. Очень интересно почитать "разжёванную" версию вот этой статьи.

React.js: собираем с нуля изоморфное / универсальное приложение. Часть 1: собираем стек

Спасибо за труд. Штудируя статью документации по оптимизации производительности, не втыкаюсь, почему этот код не работает:

  handleClick() {
    // This section is bad style and causes a bug
    const words = this.state.words;
    words.push('marklar');
    this.setState({words: words});
  }

а этот работает:

  handleClick() {
    this.setState(prevState => ({
      words: prevState.words.concat(['marklar'])
    }));
  }

Спасите-помогите! :)

Offline-first приложение с Hoodie & React. Часть вторая: авторизация

А где же третья часть?

Offline-first приложение с Hoodie & React. Часть первая: браузерная база данных

Хотел бы удивиться реализации синхронизации клиентских данных.

http://youtu.be/1ddm7WCMclA
http://youtu.be/ZWNtxmrA4UY

Пособие по webpack

"hot reloading" — нет такого понятия.

// "Live Reloading" и "Hot Module Replacement", соответственно: 
$ webpack-dev-server  --inline --hot

Идеальный UI фреймворк

Внезапно, flow!

Horizon — realtime JavaScript бэкэнд

Функционал Хабра, примерно: посты, комменты, лайки, уведомления, личка.

Horizon — realtime JavaScript бэкэнд

Есть мнение, что у RethinkDB беда с инсертами. Это меня смущает.

Horizon — realtime JavaScript бэкэнд

Как же вовремя, спасибо! Вчера поставил, разбираюсь.

Clojure — трансдьюсеры, редьюсеры и прочая муть

Легко!

Переписываем сценарии тестирования на Clojure за 24 часа

Clojure прекрасен! Но как можно жить с любовницей, если дома ожидает жена с детишками?

Crosswalk Project — замена Android WebView. Развитие проекта

А почему не React Native?

JavaScript Performance, базы данных и поиски «серебряной пули»: видеозаписи ТОП-5 докладов HolyJS 2016

Прямо бальзам: — вопросы из зала задавайте в микрофон. Трансляции на высоте!

Crosswalk Project — замена Android WebView. Развитие проекта

А как там поживает iOS ?

От сообщества для сообщества — открытый хаб статей

Ой! Это я не в тему ляпнул. Там же каталог инструментов, а не статей.