React: How to JavaScript Hipster

React: How to JavaScript Hipster

The goal of this presentation is to give the audience an overview of all the concepts they will need to know to become a React hipster. TL;DR Tell me what I will need to google later.

Da981fdeee4e1170b90334eac70652d6?s=128

Matthew Osborn

April 06, 2018
Tweet

Transcript

  1. How To JavaScript Hipster React Matthew M Osborn

  2. BACKGROUND

  3. Classes

  4. None
  5. None
  6. Arrays

  7. None
  8. Modules

  9. None
  10. None
  11. https://commons.wikimedia.org/wiki/File:Internet_Explorer_10%2B11_logo.svg

  12. Babel

  13. None
  14. None
  15. Webpack

  16. None
  17. LAB

  18. Contract Class • Start Date • Name • Contact Person

    Class • First Name • Last Name • Full Name “App” • List of Contracts • List of Active Contracts • Contracts by Contact
  19. React

  20. Components

  21. Atomic Design “…is methodology for creating design systems. There are

    five distinct levels in atomic design” - Brad Frost
  22. http://bradfrost.com/blog/post/atomic-web-design/

  23. State Machines

  24. None
  25. None
  26. Virtual DOM

  27. JSX

  28. None
  29. None
  30. None
  31. None
  32. Props

  33. None
  34. None
  35. None
  36. LAB

  37. But First…

  38. None
  39. None
  40. None
  41. • Use objects from lab 1 • Display a list

    of contracts • Show the contact • Show Start Date
  42. Next Steps

  43. State

  44. None
  45. None
  46. Events

  47. None
  48. None
  49. None
  50. Functional Components

  51. None
  52. Lifecycle

  53. ComponentDidMount

  54. ComponentDidMount ComponentDidUpdate

  55. ComponentDidMount ComponentDidUpdate ShouldComponentUpdate

  56. ComponentDidMount ComponentDidUpdate ShouldComponentUpdate ComponentWillReceiveProps

  57. ComponentDidMount ComponentDidUpdate ShouldComponentUpdate ComponentWillReceiveProps ComponentWillUnmount

  58. LAB

  59. • Performance tweaks • Search list of Contracts

  60. Next Level

  61. Portals

  62. None
  63. React-Router

  64. None
  65. Flux / Redux

  66. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

  67. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

  68. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

  69. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

  70. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

  71. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

  72. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

  73. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

  74. https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

  75. LAB

  76. C.R.U.D

  77. Related Info

  78. GrpahQL

  79. “GraphQL is a query language for APIs and a runtime

    for fulfilling those queries with your existing data … gives clients the power to ask for exactly what they need and nothing more...”
  80. https://www.neogaf.com/threads/media-create-thread-week-42-2017-oct-16-%C2%96-oct-22-read-intro-please.1454698/