I Hated React too Soon, Reconciled with It Quickly Afterwards Tugberk Ugurlu Software Engineer @ Redgate @tourismgeek http://tugberkugurlu.com https://flic.kr/p/cQRAYC

https://flic.kr/p/e6nUW Aim of the Talk

https://flic.kr/p/t3H9A Once upon a time…

https://flic.kr/p/cEJMpW

https://flic.kr/p/faTRHU

https://flic.kr/p/7yqhJt JSX!

https://flic.kr/p/6sZ7Kp

https://twitter.com/tourismgeek/status/637380542191796224

https://twitter.com/tourismgeek/status/637380542191796224

No content

https://flic.kr/p/6doME6

No content

No content

TODO: WHY! https://flic.kr/p/9yaos5

React is Simple Give it an input, get an output React does one thing and it does it well It has a small public API surface area

https://twitter.com/thomasfuchs/status/708675139253174273

React is Simple “React applications start complex but maintenance complexity of React applications doesn’t grow much as your applications grow

Its declarative and predictable nature High level of transferable knowledge Learn once, write everywhere

React shines with Redux

What is Redux? “Redux is a state management library for JavaScript applications, inspired by Flux and Elm.

What is Redux? (in human English) “Kind of like event sourcing and pub/sub, with a fancier name.

The Problem

Redux Store

The Meat of Redux Actions Reducers Store

The Meat of Redux Actions Actions describe updates

The Meat of Redux Reducers Reducers apply updates based on actions

The Meat of Redux Store Store is where everything comes together and it acts as the source of truth for the application state

Simple Example: Counter

React Usage (Manual Way)

Usage with React

The Whole Idea Data Down Actions Up http://www.samselikoff.com/blog/data-down-actions-up/

The Whole Idea You have one state, one state only for your entire application! https://flic.kr/p/9QQHW

The Whole Idea You never mutate the state! https://flic.kr/p/pzf72v

But why Redux and not flux, mobx, marty? https://flic.kr/p/NzcYg

It boils down to scientific reasons https://flic.kr/p/byrtr Well... NO!

Widely Adopted

Widely Adopted

Rich Docs and Resources http://redux.js.org/

Rich Ecosystem https://www.npmjs.com/search?q=redux

Rich Ecosystem http://redux-form.com/6.0.0-rc.5

Boost on Happiness with React and Redux https://flic.kr/p/99iZtS

https://twitter.com/dan_abramov/status/780475600716857344

https://github.com/facebook/react-devtools React Developer Tools

Redux Developer Tools https://github.com/gaearon/redux-devtools https://github.com/zalmoxisus/redux-devtools-extension

Redux Logger npm install redux-logger https://github.com/evgenyrodionov/redux-logger

Redux Immutable State Checker npm install redux-immutable-state-invariant https://github.com/leoasis/redux-immutable-state-invariant

Redux Undo npm install redux-undo https://github.com/omnidan/redux-undo

https://github.com/joshwcomeau/redux-vcr Redux VCR

https://twitter.com/tourismgeek/status/767629396916178947

https://egghead.io/courses/getting-started-with-redux Some Resources

https://egghead.io/courses/building-react-applications-with-idiomatic-redux Some Resources

Some Resources • My Blog Post on React: http://bit.ly/2jwicka • React Docs: https://facebook.github.io/react/docs/hello-world.html • Redux Docs: http://redux.js.org • The Redux Journey at react-europe 2016: http://bit.ly/2bJEZEP • Redux Usage with React: http://bit.ly/2bdAiVO • Presentational and Container Components: http://bit.ly/2bM3DpO • (Pluralsight Course) Building Applications with React and Redux in ES6: http://bit.ly/2bRAQ4T • Thinking in React: https://facebook.github.io/react/docs/thinking-in-react.html • React Reconciliation: https://facebook.github.io/react/docs/reconciliation.html • Influencers of Redux: https://github.com/reactjs/redux#influences • Why did you reinvented Event Sourcing?: https://github.com/gaearon/ama/issues/110

99% Boost on Dev Happiness npm install redux-logger https://github.com/evgenyrodionov/redux-logger https://twitter.com/tourismgeek/status/637380542191796224

Redux Internals: It’s Freakin Tiny!