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
570
Isomorphic JavaScript with ReactJS
kristinbaumann
1
370
Other Decks in Technology
See All in Technology
[OCI Skill Mapping] AWSユーザーのためのOCI – IaaS編(Compute/Storage/Networking) (2025年10月8日開催)
oracle4engineer
PRO
1
180
映像エッジAIにおけるNode-RED活用事例
emirmatsui
0
130
OSSで50の競合と戦うためにやったこと
yamadashy
3
930
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
120
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
7
4.5k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
160
コンパウンド組織のCRE #cre_meetup
layerx
PRO
0
210
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
170
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
150
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
140
Featured
See All Featured
Side Projects
sachag
455
43k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Practical Orchestrator
shlominoach
190
11k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Unsuck your backbone
ammeep
671
58k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Language of Interfaces
destraynor
162
25k
How to Ace a Technical Interview
jacobian
280
24k
How STYLIGHT went responsive
nonsquared
100
5.8k
How GitHub (no longer) Works
holman
315
140k
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