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
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
600
Pure Goで体験するWasmの未来
askua
1
180
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
180
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
バイブコーディングと継続的デプロイメント
nwiizo
2
430
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
220
pprof vs runtime/trace (FlightRecorder)
task4233
0
170
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
2.5k
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
110
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
Azure Well-Architected Framework入門
tomokusaba
1
310
Featured
See All Featured
Scaling GitHub
holman
463
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
The Language of Interfaces
destraynor
162
25k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Building Adaptive Systems
keathley
43
2.8k
KATA
mclloyd
32
15k
GraphQLとの向き合い方2022年版
quramy
49
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Facilitating Awesome Meetings
lara
56
6.6k
A Modern Web Designer's Workflow
chriscoyier
697
190k
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