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
250
Designing with React
kristinbaumann
2
550
Isomorphic JavaScript with ReactJS
kristinbaumann
1
370
Other Decks in Technology
See All in Technology
AIエージェントを支える設計
tkikuchi1002
11
2.3k
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
280
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
4
520
alecthomas/kong はいいぞ
fujiwara3
6
1.1k
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
4
1.7k
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
270
【CEDEC2025】LLMを活用したゲーム開発支援と、生成AIの利活用を進める組織的な取り組み
cygames
PRO
1
1.6k
AI工学特論: MLOps・継続的評価
asei
10
2k
Tiptapで実現する堅牢で柔軟なエディター開発
kirik
1
150
人と生成AIの協調意思決定/Co‑decision making by people and generative AI
moriyuya
0
150
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
390
今日からあなたもGeminiを好きになる
subaruhello
1
650
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Designing for Performance
lara
610
69k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Fireside Chat
paigeccino
37
3.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Code Reviewing Like a Champion
maltzj
524
40k
Gamification - CAS2011
davidbonilla
81
5.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
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