Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Dip your toe in React programming
Search
Kristin Baumann
October 13, 2017
Technology
1
120
Dip your toe in React programming
Kristin Baumann
October 13, 2017
Tweet
Share
More Decks by Kristin Baumann
See All by Kristin Baumann
The Sweetness of the JAMstack
kristinbaumann
1
500
A designer, a developer and a half-baked product walk into a bar...
kristinbaumann
1
240
Designing with React
kristinbaumann
2
530
Isomorphic JavaScript with ReactJS
kristinbaumann
1
350
Other Decks in Technology
See All in Technology
AIエージェント入門
minorun365
PRO
35
20k
データモデルYANGの処理系を再発明した話
tjmtrhs
0
380
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.3k
エンジニアの健康管理術 / Engineer Health Management Techniques
y_sone
8
5.8k
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
230
エンジニアのキャリアパスと、 その中で自分が大切にしていること
noteinc
3
2.5k
OPENLOGI Company Profile
hr01
0
60k
Dify触ってみた。
niftycorp
PRO
0
100
困難を「一般解」で解く
fujiwara3
8
2.5k
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
190
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
890
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
330
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Facilitating Awesome Meetings
lara
53
6.3k
BBQ
matthewcrist
87
9.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
1.9k
Writing Fast Ruby
sferik
628
61k
Transcript
Code Motion Berlin · 12./13. Oct. 17 · Kristin Baumann
Dip your toe in React Programming!
@kristin_baumann 2 React everywhere!
@kristin_baumann 3 JavaScript library for building interactive user interfaces What
is React JS?
@kristin_baumann Principle I: 4 Divide the UI in Components
@kristin_baumann Components 5
@kristin_baumann 6 App Components
@kristin_baumann 7 App Section Components
@kristin_baumann 8 Section App 6x ArticleThumb Components
@kristin_baumann Principle II: 9 Write ES6 and JSX
@kristin_baumann 10 ArticleThumb.js
@kristin_baumann 11 ArticleThumb.js
@kristin_baumann 12 Section.js
@kristin_baumann Connect React app with DOM 13 index.html
@kristin_baumann Connect React app with DOM 14 index.html index.js <App
/>
@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
@kristin_baumann Principle III: 16 Control components with State and Props
@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
@kristin_baumann State 18 Initialisation Update on event Render depending on
state Section.js
@kristin_baumann State & Props & Lifecycle 19 Demo: www.kristin-baumann.com/react-medium-v2 Code:
https://github.com/kristinbaumann/react-medium-clone-v2
@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
@kristin_baumann Questions? 21 @kristin_baumann @kristinbaumann
[email protected]
www.kristin-baumann.com