Dip your toe in React programming

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

@kristin_baumann 2 React everywhere!

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

@kristin_baumann Principle I: 4 Divide the UI in Components

@kristin_baumann Components 5

@kristin_baumann 6 App Components

@kristin_baumann 7 App Section Components

@kristin_baumann 8 Section App 6x ArticleThumb Components

@kristin_baumann Principle II: 9 Write ES6 and JSX

@kristin_baumann 10 ArticleThumb.js

@kristin_baumann 11 ArticleThumb.js

@kristin_baumann 12 Section.js

@kristin_baumann Connect React app with DOM 13 index.html

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

@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

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

@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

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

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

@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

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

Dip your toe in React programming

Dip your toe in React programming

Kristin Baumann

Transcript

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

@kristin_baumann 2 React everywhere!

@kristin_baumann 3 JavaScript library for building interactive user interfaces What

@kristin_baumann Principle I: 4 Divide the UI in Components

@kristin_baumann Components 5

@kristin_baumann 6 App Components

@kristin_baumann 7 App Section Components

@kristin_baumann 8 Section App 6x ArticleThumb Components

@kristin_baumann Principle II: 9 Write ES6 and JSX

@kristin_baumann 10 ArticleThumb.js

@kristin_baumann 11 ArticleThumb.js

@kristin_baumann 12 Section.js

@kristin_baumann Connect React app with DOM 13 index.html

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

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

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

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

@kristin_baumann State 18 Initialisation Update on event Render depending on

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

@kristin_baumann 5 reasons to start using React 20 -Fast applications

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

More Decks by Kristin Baumann

Other Decks in Technology

Featured