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

Dip your toe in React programming

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
620
Isomorphic JavaScript with ReactJS
Avatar for Kristin Baumann kristinbaumann
1
400

Other Decks in Technology

See All in Technology
実体験から学ぶ分析エージェントの開発と運⽤
Avatar for Recruit recruitengineers
PRO
8
2.4k
Rustuna: Rustによる高速なOptuna実装
Avatar for Preferred Networks pfn
PRO
0
190
Claude の新機能を、 出た日に触って社内に届けるまで
Avatar for ふくだ（fukuda ryu） rfdnxbro
1
170
[JAWS-UG彩の国埼玉#12]そろそろ準備する？re:Invent2026をやさしく解説 / reinvent2026-sainokuni
Avatar for sh_fk2 sh_fk2
1
340
PagerDuty Tech Hub-鳴らすけれど、人は動かない
Avatar for shinji ezaki ezaki
0
170
日本語に強いオープンな大規模言語モデル「LLM-jp」
Avatar for Yusuke Oda odashi
4
1.1k
ストレスなくAIと付き合いたい！こんなときどうしてる？
Avatar for Nami Kimura namiki64
3
490
自作バイナリを動かす「入口」8選
Avatar for Takumi Sueda puhitaku
2
1.3k
Running Kotlin + Quarkus with Lambda
Avatar for Nealle nealle
1
3.7k
オントロジーって 結局なにもの？ AI エージェントに「意味」を渡す知識設計の話
Avatar for TomoyukiMurakami greenmidori
0
180
パッチ更新でterraform initが落ちた日
Avatar for gr1m0h grimoh
1
140
触りたくないデータに、どう触るか AI時代のRBACアクセスガバナンス
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
0
260

Featured

See All Featured
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.5k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.3k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
730
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.7k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7.1k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
2
35k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k

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