React JS

2020-02-27 383浏览

  • 1.React and why it’s awesome Andrew Hull @aghull normative.com
  • 2.React First Impressions
  • 3.React First Impressions
  • 4.React First Impressions WT F? !
  • 5.“Reaction” to React
  • 6.“Reaction” to React “Ugly.”
  • 7.“Reaction” to React “Ugly.” “Separation of concerns!!”
  • 8.“Reaction” to React “Ugly.” “Separation of concerns!!” “React is a templating language.”
  • 9.“Reaction” to React
  • 10.“Reaction” to React • Don’t sweat it
  • 11.“Reaction” to React • Don’t sweat it • JSX
  • 12.“Reaction” to React • Don’t sweat it • JSX • It’s actually just Javascript
  • 13.“Reaction” to React • • • • Don’t sweat it JSX It’s actually just Javascript It’s not a templating language
  • 14.“Reaction” to React • • • • • Don’t sweat it JSX It’s actually just Javascript It’s not a templating language If you don’t like it, you don’t hafta
  • 15.React Second Impressions
  • 16.React Second Impressions • Oh! There’s 2-way data-binding, like Angular!
  • 17.React Second Impressions • Oh! There’s 2-way data-binding, like Angular! • Oh! It can work with Backbone. How I do?
  • 18.React Second Impressions • Oh! There’s 2-way data-binding, like Angular! • Oh! It can work with Backbone. How I do? • Oh! It can do animations and SVG!
  • 19.React Second Impressions • Oh! There’s 2-way data-binding, like Angular! • Oh! It can work with Backbone. How I do? • Oh! It can do animations and SVG! Wait. Let’s back up.
  • 20.Some Fundamentals
  • 21.#1 Everything is a Component
  • 22.React has no…
  • 23.React has no… … controllers
  • 24.React has no… … controllers … directives
  • 25.React has no… … controllers … directives … templates
  • 26.React has no… … controllers … directives … templates … global event listeners
  • 27.React has no… … controllers … directives … templates … global event listeners … models
  • 28.React has no… … controllers … directives … templates … global event listeners … models … no view models
  • 29.React has no… … controllers … directives … templates … global event listeners … models … no view models Just
  • 30.React has no… … controllers … directives … templates … global event listeners … models … no view models Just Components
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.“Separation of concerns!!”
  • 36.“Separation “Do you even of concerns!!” MVC?”
  • 37.What if we “separate” another way?
  • 38.What if we “separate” another way? CartComponent
  • 39.What if we “separate” another way? CartComponent CartListComponent
  • 40.What if we “separate” another way? CartComponent CartListComponent CartItemComponent
  • 41.What if we “separate” another way? CartComponent CartListComponent CartItemComponent ButtonComponent
  • 42.Separation of Concerns Components
  • 43.Separation of Concerns Components •composable
  • 44.Separation of Concerns Components •composable •reusable
  • 45.Separation of Concerns Components •composable •reusable •maintainable
  • 46.Separation of Concerns Components •composable •reusable •maintainable •testable
  • 47.Separation of Concerns Components •composable •reusable •maintainable •testable *If* Components are truly self-contained
  • 48.#2 Single Source of Truth
  • 49.Traditional data flows
  • 50.Traditional data flows Noframework:Any component can communicate with any other component
  • 51.Traditional data flows Noframework:Any component can communicate with any other componentBackbone:Pub-sub
 item.on('change:name',