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
130

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
520
A designer, a developer and a half-baked product walk into a bar...
Avatar for Kristin Baumann kristinbaumann
1
260
Designing with React
Avatar for Kristin Baumann kristinbaumann
2
570
Isomorphic JavaScript with ReactJS
Avatar for Kristin Baumann kristinbaumann
1
370

Other Decks in Technology

See All in Technology
初めてのDatabricks Apps開発
Avatar for Takaaki Yayoi taka_aki
1
280
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
Avatar for Claire Giordano clairegiordano
0
110
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
Avatar for Bo-Yi Wu appleboy
0
170
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
Avatar for did0es shuta13
3
180
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
Avatar for 弁護士ドットコム bengo4com
0
320
Copilot Studio ハンズオン - 生成オーケストレーションモード
Avatar for tomoyasasaki tomoyasasakimskk
0
220
知覚とデザイン
Avatar for Rinchoku rinchoku
1
520
QA業務を変える（！？）AIを併用した不具合分析の実践
Avatar for ma2ri__ ma2ri
0
130
20251027_マルチエージェントとは
Avatar for Almondoイベント担当 almondo_event
0
120
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
9k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.8k
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
Avatar for hhiroshell hhiroshell
0
140

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
It's Worth the Effort
Avatar for 3n 3n
187
28k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.7k
Done Done
Avatar for chrislema chrislema
185
16k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k

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