Lecture for Binary Studio Academy PRO course about ReactJS by Oleksandr Kovalyov (JS developer at Binary Studio)

1. ReactJS binary-studio.com

2. React JS
JS library focused on UI, not a framework
one-way data flow
VirtualDOM

3. UI = f(x)
ReactJS
F - Component
x - state

4. MVC

5. Problems

6. Facebook problems

7. 2014
30th of April
F8 Facebook Developer Conference

8. Flux

9. Flux

10. Flux
Action
Dispatcher
Store
View
● Instead of MVC for React
● Unidirectional data flow
● Created by Facebook
● Many stores
Store
Store
...

11. Dispatcher
Central hub that messages all data flow
It is a registry of callbacks into the store
=> mechanism to deliver actions into the stores
Action
Dispatcher
Store
ViewStore
Store
...

12. Actions
triggered by the view
information about changes
Action
Dispatcher
Store
ViewStore
Store
...

13. Store
application state
reacts to specific actions
issue events when data or state updated
Action
Dispatcher
Store
ViewStore
Store
...

14. Views
Triggers actions
Reacts to specific events in the store
Action
Dispatcher
Store
ViewStore
Store
...

15. Race of Flux implementations
relay
flux
alt
reflux
flummox
fluxible
fluxxor
marty.js

16. Problems of Flux
Store contains store change logic and state
The state is being rewritten with every action
Dispatcher cannot dispatch while dispatching

17. 2015
End of the race
Redux wins!

18. Why Redux?
1. One global state
2. New state after each action (Time traveling)
3. State is read-only
4. Changes are made with pure functions (reducers)
5. Hot reload

19. Redux
View layer
Action
Dispatcher Store View
Provider Connect

20. ( previousState, action )
=> newState
Basic principle

21. Redux flow - Action
Whenever you want to change the
state of the application, you shoot
off an action.
Action function returns a formatted
action object

22. Redux flow - Reducer
Every reducer:
receive state
return new state
Not mutated old state! new one!

23. Redux flow - Store

24. Redux flow - Connect

25. Smart elements
How things works
no DOM markup, no styles
Provide data
call actions

26. Dumb elements
How things look
No app dependencies
Just props for data and callbacks
only UI state

27. Solved issues
1. Delegation is easier
a. top-down props is not required
2. Separation of concerns
a. Data fetching => actions
b. Data decorations => reducer
c. view logic
3. State management
a. App-specific

28. Redux Summary
One store
Reducers === (previousState, action) => newState
State changes only in reducers
Structured code
We have access to state in every moment

29. Server-side Environments
Node.js
ReactJS .NET
Nashorn

30. Tooling

31. React DevTools

32. Redux DevTools
devtools

33. Redux slider monitor
https://calesce.github.io/redux-slider-monitor/?debug_session=123

34. Webpack

35. Webpack
Like Grunt or Gulp, but different
Bundles
Uses javascript modules
Reduce the amount of AJAX requests
Totally configurable

36. Webpack
http://webpack.github.io/docs/configuration.html
Entry - entry files, which WP
will use

37. Webpack
http://webpack.github.io/docs/configuration.html
Output:
● path - location where
webpack will build the
files
● publicPath - location
where wwbpack serves
files from.

38. Webpack
http://webpack.github.io/docs/configuration.html
Loaders:
● Like tasks
● Transform files
● Preprocess files as you
require or import them.
Preloaders - the same but
before executing loaders
and building bundles

39. Webpack
http://webpack.github.io/docs/configuration.html
Plugins:
● Like tasks
● Work with bundle

40. Webpack
http://webpack.github.io/docs/configuration.html
Bundles:
● Lazy loading
● Resource per page

41. Webpack
Plugins
Loaders
Async build
Chunks
DevTools

42. Webpack-dev-server
When you need HTTP
Serves files virtually
Hot reload (works on socket.io)

43. Hot reload

44. Complementary-Tools
https://github.com/facebook/react/wiki/Complementary-Tools

45. Links
Redux video: egghead
Flux: Rus/Eng
Redux: Rus/Eng

46. Demo
https://bitbucket.org/oleksandrkovalov/bsa-2016-react-demo-2

47. Thank you!Let’s redux!