Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Dip your toe in React programming

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Kristin Baumann Kristin Baumann
October 13, 2017
Technology
160
1

Dip your toe in React programming

Avatar for Kristin Baumann

Kristin Baumann

October 13, 2017

More Decks by Kristin Baumann

See All by Kristin Baumann
The Sweetness of the JAMstack
Avatar for Kristin Baumann kristinbaumann
1
580
A designer, a developer and a half-baked product walk into a bar...
Avatar for Kristin Baumann kristinbaumann
1
320
Designing with React
Avatar for Kristin Baumann kristinbaumann
2
630
Isomorphic JavaScript with ReactJS
Avatar for Kristin Baumann kristinbaumann
1
400

Other Decks in Technology

See All in Technology
アウトプット初心者、半年間のふりかえり
Avatar for aoi 4o1sobblue
0
460
DBについての基礎説明（MySQL編） - コロプラ 2026年度 新卒研修
Avatar for COLOPL Inc. colopl
0
150
CTO Night｜NotionのAIエージェントとFDE
Avatar for Kazuki Hayakawa kzkhykw1991
0
270
Conditional PED-ANOVA: Hyperparameter Importance in Hierarchical & Dynamic Search Spaces
Avatar for Preferred Networks pfn
PRO
0
140
僕のハーネスを紹介します
Avatar for watany watany
3
1.1k
Claude の新機能を、 出た日に触って社内に届けるまで
Avatar for ふくだ（fukuda ryu） rfdnxbro
1
200
フロントエンドカンファレンス関西2026 - 速すぎるUIに、待ち時間を
Avatar for teamLab teamlab
PRO
0
210
10年後、Engineering 行為を剥奪されるとして、わたしたちは、どう、何を創ればいいだろうか。 / If Engineering Is Taken Away in 10 Years, How and What Should We Create?
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
220
「私が一番顧客に詳しい」を捨てる～ 全員が一次情報に精通する開発チームをつくり、PMが次のボトルネックへ染み出すまで
Avatar for 株式会社カミナシ kaminashi
0
200
Railsで挑む大量データ永続化 〜600億件を永続化するための設計とボトルネックとの戦い〜
Avatar for Shoichi Ochi occhi
1
990
Classmethod Company Deck
Avatar for Satoshi7 satoshi7
1
770
サブエージェントと Claude Mods で作る独自 Advisor ツールの話
Avatar for Kenichi Odo kenichiodo
2
180

Featured

See All Featured
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
2
730
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.8k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
6.1k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
560
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.6k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
1
490
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k

Transcript

  1. Code Motion Berlin · 12./13. Oct. 17 · Kristin Baumann

    Dip your toe in React Programming!

  2. @kristin_baumann 2 React everywhere!

  3. @kristin_baumann 3 JavaScript library for building interactive user interfaces What

    is React JS?

  4. @kristin_baumann Principle I: 4 Divide the UI in Components

  5. @kristin_baumann Components 5

  6. @kristin_baumann 6 App Components

  7. @kristin_baumann 7 App Section Components

  8. @kristin_baumann 8 Section App 6x ArticleThumb Components

  9. @kristin_baumann Principle II: 9 Write ES6 and JSX

  10. @kristin_baumann 10 ArticleThumb.js

  11. @kristin_baumann 11 ArticleThumb.js

  12. @kristin_baumann 12 Section.js

  13. @kristin_baumann Connect React app with DOM 13 index.html

  14. @kristin_baumann Connect React app with DOM 14 index.html index.js <App

    />

  15. @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

  16. @kristin_baumann Principle III: 16 Control components with State and Props

  17. @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

  18. @kristin_baumann State 18 Initialisation Update on event Render depending on

    state Section.js

  19. @kristin_baumann State & Props & Lifecycle 19 Demo: www.kristin-baumann.com/react-medium-v2 Code:

    https://github.com/kristinbaumann/react-medium-clone-v2

  20. @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

  21. @kristin_baumann Questions? 21 @kristin_baumann @kristinbaumann [email protected] www.kristin-baumann.com