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
100
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
480
A designer, a developer and a half-baked product walk into a bar...
kristinbaumann
1
200
Designing with React
kristinbaumann
2
510
Isomorphic JavaScript with ReactJS
kristinbaumann
1
330
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
13k
The Role of Developer Relations in AI Product Success.
giftojabu1
0
130
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
250
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
120
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
0
190
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
Terraform Stacks入門 #HashiTalks
msato
0
360
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
3
130
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
6
660
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
9
1.1k
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
190
Evangelismo técnico: ¿qué, cómo y por qué?
trishagee
0
360
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
A better future with KSS
kneath
238
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Ruby is Unlike a Banana
tanoku
97
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Facilitating Awesome Meetings
lara
50
6.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Site-Speed That Sticks
csswizardry
0
28
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
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