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.

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

572 views

Published on

React یا ری‌اکت فریم‌ورک جاواسکریپتی برای ساخت "User Interface" است که فیس‌بوک آن‌را توسعه داده و نگهدای می‌کند. ری‌اکت فریم‌ورکی Component محور است که خبری از MVC در آن نیست. Virtual DOM باعث شده تا سرعت خوبی در Render کردن داشته باشد. در ارائه React برای دولوپر‌ها از گذشته ی JS و ساختار React صحبت خواهد شد.

Published in: Education
  • Be the first to comment

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

  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

×