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
510
A designer, a developer and a half-baked product walk into a bar...
kristinbaumann
1
240
Designing with React
kristinbaumann
2
540
Isomorphic JavaScript with ReactJS
kristinbaumann
1
360
Other Decks in Technology
See All in Technology
4月15日の AZ 障害をテクサポの中の人目線で振り返ってみる
kazzpapa3
2
150
Software Delivery Observability CI・CD , DORA metrics も Datadog で可視化しよう / datadog-ci-cd-observability
parupappa2929
0
110
Google CloudのAI Agent関連のサービス紹介
shukob
0
100
DynamoDB のデータを QuickSight で可視化する際につまづいたこと/stumbling-blocks-when-visualising-dynamodb-with-quicksight
emiki
0
170
Terraform にコントリビュートしていたら Azure のコストをやらかした話 / How I Messed Up Azure Costs While Contributing to Terraform
nnstt1
1
550
自動化の第一歩 -インフラ環境構築の自動化について-
smt7174
1
140
LangfuseではじめるAIアプリのLLMトレーシング
codenote
0
190
激動の一年を通じて見えてきた「技術でリードする」ということ
ktr_0731
8
7.8k
Vibe Coding Tools
ijin
1
280
インフラからSREへ
mirakui
19
7.1k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
17
5.8k
Sleep-time Compute: LLM推論コスト削減のための事前推論
sergicalsix
1
150
Featured
See All Featured
Embracing the Ebb and Flow
colly
85
4.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Designing for Performance
lara
608
69k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Side Projects
sachag
453
42k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
It's Worth the Effort
3n
184
28k
A designer walks into a library…
pauljervisheath
205
24k
Why Our Code Smells
bkeepers
PRO
336
57k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
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