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
100
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
420
A designer, a developer and a half-baked product walk into a bar...
kristinbaumann
1
170
Designing with React
kristinbaumann
2
460
Isomorphic JavaScript with ReactJS
kristinbaumann
1
310
Other Decks in Technology
See All in Technology
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
4
1.4k
本当のAWS基礎
toru_kubota
1
610
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
770
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
310
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
8
610
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
7
3.5k
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
3
590
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
14
35k
.NET Profiler in 2024.
kkamegawa
2
850
ルーターでプレゼンする
puhitaku
1
3.2k
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
1.1k
Cloud Service Mesh に触れ合う
phaya72
1
140
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
165
13k
Typedesign – Prime Four
hannesfritz
36
2.1k
How GitHub (no longer) Works
holman
305
140k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
GraphQLとの向き合い方2022年版
quramy
33
12k
Scaling GitHub
holman
457
140k
Designing Experiences People Love
moore
136
23k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Product Roadmaps are Hard
iamctodd
45
9.7k
GitHub's CSS Performance
jonrohan
1025
450k
Making Projects Easy
brettharned
109
5.5k
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