Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dip your toe in React programming

Avatar for Kristin Baumann Kristin Baumann
October 13, 2017
Technology
1
120

Dip your toe in React programming

Avatar for Kristin Baumann

Kristin Baumann

October 13, 2017
Tweet

More Decks by Kristin Baumann

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

Other Decks in Technology

See All in Technology
チェックツールを導入したけど使ってもらえなかった話 #GAADjp
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
150
Design for Failure - リージョンとAZについて
Avatar for 矢儀丈博 yuki_ink
0
130
とあるEdTechベンチャーのシステム構成こだわりN選 / edtech-system
Avatar for k.goto gotok365
5
380
20250514 1Passwordを使い倒す道場 vol.1
Avatar for Takumi Abe east_takumi
0
160
golang-migrate VS Atlas !? 技術選定のポイントと学び ~DBマイグレーションツール選定の実例を通して~ / golang-migrate vs Atlas ! What is the point of technology selection and what you can learn from the examples of DB migration tool selection?
Avatar for NTT Communications nttcom
0
110
KubeCon EU 2025 Recap - Kubernetes CRD Design for the Long Haul: Tips, Tricks, and Lessons Learned / Kubernetes Meetup Tokyo #70 / k8sjp70-crd-long-haul-recap
Avatar for Shingo Omura everpeace
0
110
インフラからSREへ
Avatar for Issei Naruta mirakui
20
7.8k
SRE本出版からまもなく10年！〜これまでに何が起こり、これから何が起こるのか〜
Avatar for katsuhisa_ katsuhisa91
PRO
0
360
Vibe Coding Tools
Avatar for Michael H. Oshita ijin
1
300
インラインRBSコメントに鯛pe checkersもニッコリ
Avatar for SansanTech sansantech
PRO
2
200
KubeCon + CloudNativeCon Europe 2025 Recap: The GPUs on the Bus Go 'Round and 'Round / Kubernetes Meetup Tokyo #70
Avatar for Preferred Networks pfn
PRO
0
160
転職したらMCPサーバーだった件
Avatar for nwiizo nwiizo
13
9.8k

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
720
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.5k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
6
560
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
6.9k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k

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