How to tackle the React Ecosystem

2. Hello World!
React for Developers
#irDevConf ■ @sia_mac

3. ES6
The Sixth Edition, known as ECMAScript 2015.
#irDevConf ■ @sia_mac

4. › How to tackle the React Ecosystem __
¬ NPM
¬ JavaScript Module Bundlers
¬ ES6
¬ ReactJS
¬ Routing
¬ Flux
#irDevConf ■ @sia_mac

5. › AMD & CommonJS __
¬ NPM: “Node Package Manager”
¬ Dependencies, Scripts.
¬ AMD (RequireJS) — AngularJS<2, jQuery, BackboneJS,…
¬ CommonJS — ES6.
#irDevConf ■ @sia_mac

6. › CommonJS A format Writing Modules in Node.JS __
#irDevConf ■ @sia_mac
index.js maths.js:

7. › CommonJS in Browser __
¬ JavaScript Module Bundlers:
¬ Browserify (*ify)
¬ Webpack (*-loader)
¬ RollupJS
#irDevConf ■ @sia_mac

8. Webpack
JavaScript Module Bundler
#irDevConf ■ @sia_mac

9. #irDevConf ■ @sia_mac

10. Webpack != Grunt/Gulp
#irDevConf ■ @sia_mac

11. › Webpack vs. Grunt/Gulp Diagram __
Grunt/Gulp Diagram:
#irDevConf ■ @sia_mac
one.js
two.js
Concat
Uglify
...
grid.scss
typography.scss
Compile
Minify
...
Browser

12. › Webpack vs. Grunt/Gulp Diagram __
Webpack Diagram:
#irDevConf ■ @sia_mac
one.js
two.js
Concat
Uglify
...
grid.scss
typography.scss
Compile
Minify
...
BrowserBundle.js

13. › Webpack vs. Grunt/Gulp Diagram __
Grunt/Gulp Diagram:
#irDevConf ■ @sia_mac
one.js
two.js
Concat
Uglify
...
grid.scss
typography.scss
Compile
Minify
...
Browser

14. › How to tackle the React Ecosystem __
¬ NPM
¬ JavaScript Module Bundlers
¬ ES6 ✔ “https://goo.gl/81ha0d”
¬ ReactJS
¬ Routing
¬ Flux
#irDevConf ■ @sia_mac

15. React
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
#irDevConf ■ @sia_mac

16. › Facebook, Mother of dragons __
¬ Started by Facebook in 2013.
¬ Motivation — Building Large apps with data.
¬ Over 45k+ Star on Github.
¬ Sites Using React:
¬ Facebook, Instagram, Dropbox, PayPal, Uber, …
#irDevConf ■ @sia_mac

17. › Meet React __
#irDevConf ■ @sia_mac
NOT Another Framework!
Just a library for creating User Interfaces.

18. › Meet React __
#irDevConf ■ @sia_mac
Renders your User Interfaces
and responds to Events.

19. › Meet React __
#irDevConf ■ @sia_mac
React just “V” in ‘MVC’ (View)

20. › Meet React __
#irDevConf ■ @sia_mac
¬ React Has …
¬ No Controllers. No Directives.
¬ No Templates. No Global EventListener.
¬ No Models. No View Models.
¬ No Dirty Checking.

21. › Meet React __
#irDevConf ■ @sia_mac
Everything is a Component!
Everything is a Component!
Everything is a Component!
Everything is a Component!
Everything is a Component!

23. Main component:

24. Header CP

25. Header CP
Sidebar CP

26. Header CP
Sidebar CP Hero CP

27. › The Most important in Performance: __
#irDevConf ■ @sia_mac
Virtual DOM

28. › Virtual DOM: __
¬ Simple & Fast & Smart.
¬ On Every update:
¬ React builds a new virtual DOM subtree.
¬ Diffs it with the old One.
¬ Computes the minimal set of DOM mutations and puts
them in a queue.
¬ Batch executes all updates.
#irDevConf ■ @sia_mac

29. › JSX Allows you to write JS and XML Together: __
#irDevConf ■ @sia_mac
React JSX is a Sugar–Syntax for JS!

30. › Traditional Data flows: __
¬ No Framework: Any component can communicate with
any other component.
¬ BackboneJS: Pub–Sub.
¬ AngularJS: 2–way binding and $digest loop.
¬ ReactJS: 1–way data flow:
¬ Data handed from Parent to Child “Props”.
#irDevConf ■ @sia_mac

31. React vs. jQuery
#irDevConf ■ @sia_mac

32. › Playground __
#irDevConf ■ @sia_mac
I’ve achieved 0 Pokémon.
Another Pokémon +

33. › Playground __
#irDevConf ■ @sia_mac
I’ve achieved 1 Pokémon.
Another Pokémon +

34. › Playground __
#irDevConf ■ @sia_mac
I’ve achieved 2 Pokémons.
Another Pokémon +

35. › Playground __
#irDevConf ■ @sia_mac
I’ve achieved 2 Pokémons.
Another Pokémon +
Button Component

36. › Playground __
#irDevConf ■ @sia_mac
I’ve achieved 2 Pokémons.
Another Pokémon +

37. #irDevConf ■ @sia_mac
init
Button Component “jQuery”
thumbsUp
render
cacheElements handleClick

38. #irDevConf ■ @sia_mac
init
Button Component “React”
handleClick
thumbsUp
render
cacheElements

39. › State & Props: __
¬ Every Component has ‘state’ and ‘props’.
¬ ‘state’ is mutable and ‘props’ is immutable.
¬ Re-Render (Virtual DOM) the whole app once the
`state` changes.
#irDevConf ■ @sia_mac

40. › Why React? __
#irDevConf ■ @sia_mac
¬ Fast and Smart.
¬ Unidirectional data flow from parent components to child
components.
¬ Isomorphic (JS apps that can run both client-side and
server-side)
¬ Easy to debug & testable.
¬ Use JSX with familiar HTML like syntax for writing react
apps.

41. › Benefits of React? __
#irDevConf ■ @sia_mac
¬ Modular (Reusable)
¬ State–Based (Predictable)
¬ Independent (Testable)
¬ High-Performance (Virtual DOM)

42. bahamta.com/
mor.com.co/
evand.ir/
cinematicket.org/
New Version!

43. facebook.github.io/react/
References
#irDevConf ■ @sia_mac
www.slideshare.net/AndrewHull/react-js-and-why-its-awesome/

44. One more thing…
#irDevConf ■ @sia_mac

45. React Native
A framework for building native apps using React.
#irDevConf ■ @sia_mac

46. Thursday, Jul 21. 16:30 — 17:30.
“Public Workshop”
#irDevConf ■ @sia_mac