This document discusses React, a JavaScript library for building user interfaces. It provides an overview of React concepts like components, JSX, state and props, and the virtual DOM. Benefits of React mentioned include being fast, modular, state-based, independent and high-performance due to the virtual DOM. The document also briefly introduces React Native, which allows building native mobile apps using React.

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