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