Dip your toe in React programming

Slide 1

Slide 1 text

Code Motion Berlin · 12./13. Oct. 17 · Kristin Baumann Dip your toe in React Programming!

Slide 2

Slide 2 text

@kristin_baumann 2 React everywhere!

Slide 3

Slide 3 text

@kristin_baumann 3 JavaScript library for building interactive user interfaces What is React JS?

Slide 4

Slide 4 text

@kristin_baumann Principle I: 4 Divide the UI in Components

Slide 5

Slide 5 text

@kristin_baumann Components 5

Slide 6

Slide 6 text

@kristin_baumann 6 App Components

Slide 7

Slide 7 text

@kristin_baumann 7 App Section Components

Slide 8

Slide 8 text

@kristin_baumann 8 Section App 6x ArticleThumb Components

Slide 9

Slide 9 text

@kristin_baumann Principle II: 9 Write ES6 and JSX

Slide 10

Slide 10 text

@kristin_baumann 10 ArticleThumb.js

Slide 11

Slide 11 text

@kristin_baumann 11 ArticleThumb.js

Slide 12

Slide 12 text

@kristin_baumann 12 Section.js

Slide 13

Slide 13 text

@kristin_baumann Connect React app with DOM 13 index.html

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@kristin_baumann Connect React app with DOM 15 index.html index.js Demo: www.kristin-baumann.com/react-medium-v1 Code: https://github.com/kristinbaumann/react-medium-clone-v1

Slide 16

Slide 16 text

@kristin_baumann Principle III: 16 Control components with State and Props

Slide 17

Slide 17 text

@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

Slide 18

Slide 18 text

@kristin_baumann State 18 Initialisation Update on event Render depending on state Section.js

Slide 19

Slide 19 text

@kristin_baumann State & Props & Lifecycle 19 Demo: www.kristin-baumann.com/react-medium-v2 Code: https://github.com/kristinbaumann/react-medium-clone-v2

Slide 20

Slide 20 text

@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

Slide 21

Slide 21 text

@kristin_baumann Questions? 21 @kristin_baumann @kristinbaumann [email protected] www.kristin-baumann.com