Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dip your toe in React programming

Dip your toe in React programming

C2dc413b54db210547885a5adc437e68?s=128

Kristin Baumann

October 13, 2017
Tweet

Transcript

  1. Code Motion Berlin · 12./13. Oct. 17 · Kristin Baumann

    Dip your toe in React Programming!
  2. @kristin_baumann 2 React everywhere!

  3. @kristin_baumann 3 JavaScript library for building interactive user interfaces What

    is React JS?
  4. @kristin_baumann Principle I: 4 Divide the UI in Components

  5. @kristin_baumann Components 5

  6. @kristin_baumann 6 App Components

  7. @kristin_baumann 7 App Section Components

  8. @kristin_baumann 8 Section App 6x ArticleThumb Components

  9. @kristin_baumann Principle II: 9 Write ES6 and JSX

  10. @kristin_baumann 10 ArticleThumb.js

  11. @kristin_baumann 11 ArticleThumb.js

  12. @kristin_baumann 12 Section.js

  13. @kristin_baumann Connect React app with DOM 13 index.html

  14. @kristin_baumann Connect React app with DOM 14 index.html index.js <App

    />
  15. @kristin_baumann Connect React app with DOM 15 index.html index.js <App

    /> Demo: www.kristin-baumann.com/react-medium-v1 Code: https://github.com/kristinbaumann/react-medium-clone-v1
  16. @kristin_baumann Principle III: 16 Control components with State and Props

  17. @kristin_baumann Properties (Props) 17 Section.js ArticleThumb.js - Parameters passed down

    from parent to child component - Used for configuration - Not changeable in child component
  18. @kristin_baumann State 18 Initialisation Update on event Render depending on

    state Section.js
  19. @kristin_baumann State & Props & Lifecycle 19 Demo: www.kristin-baumann.com/react-medium-v2 Code:

    https://github.com/kristinbaumann/react-medium-clone-v2
  20. @kristin_baumann 5 reasons to start using React 20 -Fast applications

    (rendering with Virtual DOM) -Enables confident development with proper testing -Open source software, well maintained by Facebook -Allows clientside and serverside rendering -Composable with existing applications
  21. @kristin_baumann Questions? 21 @kristin_baumann @kristinbaumann mail@kristin-baumann.com www.kristin-baumann.com