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
560
Isomorphic JavaScript with ReactJS
Avatar for Kristin Baumann kristinbaumann
1
370

Other Decks in Technology

See All in Technology
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
Avatar for Kosaku Ono kevinrobot34
1
120
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの？
Avatar for Makky12 smt7174
4
190
EncryptedSharedPreferences が deprecated になっちゃった！どうしよう！ / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
Avatar for Yuki Anzai yanzm
0
490
20250905_MeetUp_Ito-san_s_presentation.pdf
Avatar for MagicPod magicpod
1
100
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
Avatar for cm-usuda-keisuke cmusudakeisuke
1
280
共有と分離 - Compose Multiplatform "本番導入" の設計指針
Avatar for Ryo WATANABE error96num
2
1.2k
dbt開発 with Claude Codeのためのガードレール設計
Avatar for 10xinc 10xinc
2
1.3k
Unlocking the Power of AI Agents with LINE Bot MCP Server
Avatar for LINE Developers Thailand linedevth
0
120
実践！カスタムインストラクション＆スラッシュコマンド
Avatar for puku0x puku0x
0
550
なぜテストマネージャの視点が 必要なのか？ 〜 一歩先へ進むために 〜
Avatar for Sammy(MoritaMasami) moritamasami
0
240
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
Avatar for sh_fk2 sh_fk2
3
280
いま注目のAIエージェントを作ってみよう
Avatar for Marimo supermarimobros
0
360

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.5k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.4k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.6k

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