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 ■ @sia_mac
› AMD & CommonJS __
¬ NPM: “Node Package Manager”
¬ Dependencies, Scripts.
¬ AMD (RequireJS) — AngularJS<2, jQuery, BackboneJS,…
¬ CommonJS — ES6.
#irDevConf ■ @sia_mac
› 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 ■ @sia_mac
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
typography.scss
Compile
Minify
...
Browser
› Webpack vs. Grunt/Gulp Diagram __
Webpack Diagram:
#irDevConf ■ @sia_mac
one.js
two.js
Concat
Uglify
...
grid.scss
typography.scss
Compile
Minify
...
BrowserBundle.js
› Webpack vs. Grunt/Gulp Diagram __
Grunt/Gulp Diagram:
#irDevConf ■ @sia_mac
one.js
two.js
Concat
Uglify
...
grid.scss
typography.scss
Compile
Minify
...
Browser
› How to tackle the React Ecosystem __
¬ NPM
¬ JavaScript Module Bundlers
¬ ES6 ✔ “https://goo.gl/81ha0d”
¬ ReactJS
¬ Routing
¬ Flux
#irDevConf ■ @sia_mac
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+ Star on Github.
¬ Sites Using React:
¬ Facebook, Instagram, Dropbox, PayPal, Uber, …
#irDevConf ■ @sia_mac
› 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 EventListener.
¬ No Models. No View Models.
¬ No Dirty Checking.
› 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!
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 the old One.
¬ Computes the minimal set of DOM mutations and puts
them in a queue.
¬ Batch executes all updates.
#irDevConf ■ @sia_mac
› 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.
¬ AngularJS: 2–way binding and $digest loop.
¬ ReactJS: 1–way data flow:
¬ Data handed from Parent to Child “Props”.
#irDevConf ■ @sia_mac
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 (Virtual DOM) the whole app once the
`state` changes.
#irDevConf ■ @sia_mac
› 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.
› Benefits of React? __
#irDevConf ■ @sia_mac
¬ Modular (Reusable)
¬ State–Based (Predictable)
¬ Independent (Testable)
¬ High-Performance (Virtual DOM)
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‌ برای دولوپرها

React‌ برای دولوپرها

  • 2.
    Hello World! React forDevelopers #irDevConf ■ @sia_mac
  • 3.
    ES6 The Sixth Edition,known as ECMAScript 2015. #irDevConf ■ @sia_mac
  • 4.
    › How totackle 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 Aformat Writing Modules in Node.JS __ #irDevConf ■ @sia_mac index.js maths.js:
  • 7.
    › CommonJS inBrowser __ ¬ JavaScript Module Bundlers: ¬ Browserify (*ify) ¬ Webpack (*-loader) ¬ RollupJS #irDevConf ■ @sia_mac
  • 8.
  • 9.
  • 10.
  • 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 totackle the React Ecosystem __ ¬ NPM ¬ JavaScript Module Bundlers ¬ ES6 ✔ “https://goo.gl/81ha0d” ¬ ReactJS ¬ Routing ¬ Flux #irDevConf ■ @sia_mac
  • 15.
    React A JAVASCRIPT LIBRARYFOR BUILDING USER INTERFACES #irDevConf ■ @sia_mac
  • 16.
    › Facebook, Motherof 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.
  • 24.
  • 25.
  • 26.
  • 27.
    › The Mostimportant 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 Allowsyou to write JS and XML Together: __ #irDevConf ■ @sia_mac React JSX is a Sugar–Syntax for JS!
  • 30.
    › Traditional Dataflows: __ ¬ 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.
  • 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 ButtonComponent “jQuery” thumbsUp render cacheElements handleClick
  • 38.
    #irDevConf ■ @sia_mac init ButtonComponent “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 ofReact? __ #irDevConf ■ @sia_mac ¬ Modular (Reusable) ¬ State–Based (Predictable) ¬ Independent (Testable) ¬ High-Performance (Virtual DOM)
  • 42.
  • 43.
  • 44.
  • 45.
    React Native A frameworkfor building native apps using React. #irDevConf ■ @sia_mac
  • 46.
    Thursday, Jul 21.16:30 — 17:30. “Public Workshop” #irDevConf ■ @sia_mac