Dip your toe in React programming

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