Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Dip your toe in React programming
Search
Kristin Baumann
October 13, 2017
Technology
1
120
Dip your toe in React programming
Kristin Baumann
October 13, 2017
Tweet
Share
More Decks by Kristin Baumann
See All by Kristin Baumann
The Sweetness of the JAMstack
kristinbaumann
1
520
A designer, a developer and a half-baked product walk into a bar...
kristinbaumann
1
250
Designing with React
kristinbaumann
2
550
Isomorphic JavaScript with ReactJS
kristinbaumann
1
360
Other Decks in Technology
See All in Technology
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
590
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
370
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
1.9k
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
110
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
850
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.5k
SREのためのeBPF活用ステップアップガイド
egmc
2
1.2k
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.2k
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
910
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.8k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Why Our Code Smells
bkeepers
PRO
337
57k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
BBQ
matthewcrist
89
9.7k
Designing Experiences People Love
moore
142
24k
Agile that works and the tools we love
rasmusluckow
329
21k
RailsConf 2023
tenderlove
30
1.1k
Navigating Team Friction
lara
187
15k
Six Lessons from altMBA
skipperchong
28
3.9k
Designing for humans not robots
tammielis
253
25k
GitHub's CSS Performance
jonrohan
1031
460k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Transcript
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 mail@kristin-baumann.com www.kristin-baumann.com