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
130
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
260
Designing with React
kristinbaumann
2
560
Isomorphic JavaScript with ReactJS
kristinbaumann
1
370
Other Decks in Technology
See All in Technology
Goのビルドシステムの変遷 / The history of Go's build system
ymotongpoo
12
3.5k
GopherCon Tour 概略
logica0419
2
160
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
190
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
120
入門 FormObject / An Introduction to FormObject #kaigionrails
expajp
2
1.6k
DEFCON CHV CTF 2025 Write-up
bata_24
0
200
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
850
実装で解き明かす並行処理の歴史
zozotech
PRO
1
130
What is BigQuery?
aizack_harks
0
120
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
310
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
320
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
2
1k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
570
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
How to train your dragon (web standard)
notwaldorf
96
6.2k
The Cult of Friendly URLs
andyhume
79
6.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Unsuck your backbone
ammeep
671
58k
Thoughts on Productivity
jonyablonski
70
4.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Documentation Writing (for coders)
carmenintech
75
5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
840
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
[email protected]
www.kristin-baumann.com