Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Hello World!
React for Developers
#irDevConf ■ @sia_mac
ES6
The Sixth Edition, known as ECMAScript 2015.
#irDevConf ■ @sia_mac
› How to tackle the React Ecosystem __
¬ NPM
¬ JavaScript Module Bundlers
¬ ES6
¬ ReactJS
¬ Routing
¬ Flux
#irDevConf ■ @s...
› AMD & CommonJS __
¬ NPM: “Node Package Manager”
¬ Dependencies, Scripts.
¬ AMD (RequireJS) — AngularJS<2, jQuery, Backbo...
› CommonJS A format Writing Modules in Node.JS __
#irDevConf ■ @sia_mac
index.js maths.js:
› CommonJS in Browser __
¬ JavaScript Module Bundlers:
¬ Browserify (*ify)
¬ Webpack (*-loader)
¬ RollupJS
#irDevConf ■ @s...
Webpack
JavaScript Module Bundler
#irDevConf ■ @sia_mac
#irDevConf ■ @sia_mac
Webpack != Grunt/Gulp
#irDevConf ■ @sia_mac
› Webpack vs. Grunt/Gulp Diagram __
Grunt/Gulp Diagram:
#irDevConf ■ @sia_mac
one.js
two.js
Concat
Uglify
...
grid.scss
ty...
› Webpack vs. Grunt/Gulp Diagram __
Webpack Diagram:
#irDevConf ■ @sia_mac
one.js
two.js
Concat
Uglify
...
grid.scss
typog...
› Webpack vs. Grunt/Gulp Diagram __
Grunt/Gulp Diagram:
#irDevConf ■ @sia_mac
one.js
two.js
Concat
Uglify
...
grid.scss
ty...
› How to tackle the React Ecosystem __
¬ NPM
¬ JavaScript Module Bundlers
¬ ES6 ✔ “https://goo.gl/81ha0d”
¬ ReactJS
¬ Rout...
React
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
#irDevConf ■ @sia_mac
› Facebook, Mother of dragons __
¬ Started by Facebook in 2013.
¬ Motivation — Building Large apps with data.
¬ Over 45k+ ...
› Meet React __
#irDevConf ■ @sia_mac
NOT Another Framework!

Just a library for creating User Interfaces.
› Meet React __
#irDevConf ■ @sia_mac
Renders your User Interfaces
and responds to Events.
› Meet React __
#irDevConf ■ @sia_mac
React just “V” in ‘MVC’ (View)
› Meet React __
#irDevConf ■ @sia_mac
¬ React Has …
¬ No Controllers. No Directives.
¬ No Templates. No Global EventListen...
› Meet React __
#irDevConf ■ @sia_mac
Everything is a Component!
Everything is a Component!
Everything is a Component!
Eve...
Main component:
Header CP
Header CP
Sidebar CP
Header CP
Sidebar CP Hero CP
› The Most important in Performance: __
#irDevConf ■ @sia_mac
Virtual DOM
› Virtual DOM: __
¬ Simple & Fast & Smart.
¬ On Every update:
¬ React builds a new virtual DOM subtree.
¬ Diffs it with th...
› JSX Allows you to write JS and XML Together: __
#irDevConf ■ @sia_mac
React JSX is a Sugar–Syntax for JS!
› Traditional Data flows: __
¬ No Framework: Any component can communicate with
any other component.
¬ BackboneJS: Pub–Sub...
React vs. jQuery
#irDevConf ■ @sia_mac
› Playground __
#irDevConf ■ @sia_mac
I’ve achieved 0 Pokémon.
Another Pokémon +
› Playground __
#irDevConf ■ @sia_mac
I’ve achieved 1 Pokémon.
Another Pokémon +
› Playground __
#irDevConf ■ @sia_mac
I’ve achieved 2 Pokémons.
Another Pokémon +
› Playground __
#irDevConf ■ @sia_mac
I’ve achieved 2 Pokémons.
Another Pokémon +
Button Component
› Playground __
#irDevConf ■ @sia_mac
I’ve achieved 2 Pokémons.
Another Pokémon +
#irDevConf ■ @sia_mac
init
Button Component “jQuery”
thumbsUp
render
cacheElements handleClick
#irDevConf ■ @sia_mac
init
Button Component “React”
handleClick
thumbsUp
render
cacheElements
› State & Props: __
¬ Every Component has ‘state’ and ‘props’.
¬ ‘state’ is mutable and ‘props’ is immutable.
¬ Re-Render ...
› Why React? __
#irDevConf ■ @sia_mac
¬ Fast and Smart.
¬ Unidirectional data flow from parent components to child
compone...
› Benefits of React? __
#irDevConf ■ @sia_mac
¬ Modular (Reusable)
¬ State–Based (Predictable)
¬ Independent (Testable)
¬ ...
bahamta.com/
mor.com.co/
evand.ir/
cinematicket.org/

New Version!
facebook.github.io/react/
References
#irDevConf ■ @sia_mac
www.slideshare.net/AndrewHull/react-js-and-why-its-awesome/
One more thing…
#irDevConf ■ @sia_mac
React Native
A framework for building native apps using React.
#irDevConf ■ @sia_mac
Thursday, Jul 21. 16:30 — 17:30.
“Public Workshop”
#irDevConf ■ @sia_mac
React for Developers
React for Developers
React for Developers
Upcoming SlideShare
Loading in …5
×

React for Developers

461 views

Published on

How to tackle the React Ecosystem

Published in: Software
  • Be the first to comment

React for Developers

  1. 1. Hello World! React for Developers #irDevConf ■ @sia_mac
  2. 2. ES6 The Sixth Edition, known as ECMAScript 2015. #irDevConf ■ @sia_mac
  3. 3. › How to tackle the React Ecosystem __ ¬ NPM ¬ JavaScript Module Bundlers ¬ ES6 ¬ ReactJS ¬ Routing ¬ Flux #irDevConf ■ @sia_mac
  4. 4. › AMD & CommonJS __ ¬ NPM: “Node Package Manager” ¬ Dependencies, Scripts. ¬ AMD (RequireJS) — AngularJS<2, jQuery, BackboneJS,… ¬ CommonJS — ES6. #irDevConf ■ @sia_mac
  5. 5. › CommonJS A format Writing Modules in Node.JS __ #irDevConf ■ @sia_mac index.js maths.js:
  6. 6. › CommonJS in Browser __ ¬ JavaScript Module Bundlers: ¬ Browserify (*ify) ¬ Webpack (*-loader) ¬ RollupJS #irDevConf ■ @sia_mac
  7. 7. Webpack JavaScript Module Bundler #irDevConf ■ @sia_mac
  8. 8. #irDevConf ■ @sia_mac
  9. 9. Webpack != Grunt/Gulp #irDevConf ■ @sia_mac
  10. 10. › Webpack vs. Grunt/Gulp Diagram __ Grunt/Gulp Diagram: #irDevConf ■ @sia_mac one.js two.js Concat Uglify ... grid.scss typography.scss Compile Minify ... Browser
  11. 11. › Webpack vs. Grunt/Gulp Diagram __ Webpack Diagram: #irDevConf ■ @sia_mac one.js two.js Concat Uglify ... grid.scss typography.scss Compile Minify ... BrowserBundle.js
  12. 12. › Webpack vs. Grunt/Gulp Diagram __ Grunt/Gulp Diagram: #irDevConf ■ @sia_mac one.js two.js Concat Uglify ... grid.scss typography.scss Compile Minify ... Browser
  13. 13. › How to tackle the React Ecosystem __ ¬ NPM ¬ JavaScript Module Bundlers ¬ ES6 ✔ “https://goo.gl/81ha0d” ¬ ReactJS ¬ Routing ¬ Flux #irDevConf ■ @sia_mac
  14. 14. React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES #irDevConf ■ @sia_mac
  15. 15. › 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
  16. 16. › Meet React __ #irDevConf ■ @sia_mac NOT Another Framework!
 Just a library for creating User Interfaces.
  17. 17. › Meet React __ #irDevConf ■ @sia_mac Renders your User Interfaces and responds to Events.
  18. 18. › Meet React __ #irDevConf ■ @sia_mac React just “V” in ‘MVC’ (View)
  19. 19. › Meet React __ #irDevConf ■ @sia_mac ¬ React Has … ¬ No Controllers. No Directives. ¬ No Templates. No Global EventListener. ¬ No Models. No View Models. ¬ No Dirty Checking.
  20. 20. › 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!
  21. 21. Main component:
  22. 22. Header CP
  23. 23. Header CP Sidebar CP
  24. 24. Header CP Sidebar CP Hero CP
  25. 25. › The Most important in Performance: __ #irDevConf ■ @sia_mac Virtual DOM
  26. 26. › 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
  27. 27. › JSX Allows you to write JS and XML Together: __ #irDevConf ■ @sia_mac React JSX is a Sugar–Syntax for JS!
  28. 28. › 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
  29. 29. React vs. jQuery #irDevConf ■ @sia_mac
  30. 30. › Playground __ #irDevConf ■ @sia_mac I’ve achieved 0 Pokémon. Another Pokémon +
  31. 31. › Playground __ #irDevConf ■ @sia_mac I’ve achieved 1 Pokémon. Another Pokémon +
  32. 32. › Playground __ #irDevConf ■ @sia_mac I’ve achieved 2 Pokémons. Another Pokémon +
  33. 33. › Playground __ #irDevConf ■ @sia_mac I’ve achieved 2 Pokémons. Another Pokémon + Button Component
  34. 34. › Playground __ #irDevConf ■ @sia_mac I’ve achieved 2 Pokémons. Another Pokémon +
  35. 35. #irDevConf ■ @sia_mac init Button Component “jQuery” thumbsUp render cacheElements handleClick
  36. 36. #irDevConf ■ @sia_mac init Button Component “React” handleClick thumbsUp render cacheElements
  37. 37. › 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
  38. 38. › 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.
  39. 39. › Benefits of React? __ #irDevConf ■ @sia_mac ¬ Modular (Reusable) ¬ State–Based (Predictable) ¬ Independent (Testable) ¬ High-Performance (Virtual DOM)
  40. 40. bahamta.com/ mor.com.co/ evand.ir/ cinematicket.org/
 New Version!
  41. 41. facebook.github.io/react/ References #irDevConf ■ @sia_mac www.slideshare.net/AndrewHull/react-js-and-why-its-awesome/
  42. 42. One more thing… #irDevConf ■ @sia_mac
  43. 43. React Native A framework for building native apps using React. #irDevConf ■ @sia_mac
  44. 44. Thursday, Jul 21. 16:30 — 17:30. “Public Workshop” #irDevConf ■ @sia_mac

×