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
OPENLOGI Company Profile for engineer
hr01
1
26k
MySQL InnoDB Data Recovery - The Last Resort
lefred
0
110
Part1 GitHubってなんだろう?その1
tomokusaba
3
740
本当に必要なのは「QAという技術」だった!試行錯誤から生まれた、品質とデリバリーの両取りアプローチ / Turns Out, "QA as a Discipline" Was the Key!
ar_tama
9
4.1k
Next.jsと状態管理のプラクティス
uhyo
3
1.3k
LLM アプリケーションのためのクラウドセキュリティ - CSPM の実装ポイント-
osakatechlab
0
370
Part1 GitHubってなんだろう?その2
tomokusaba
2
720
3D生成AIのための画像生成
kosukeito
2
620
Azure Maps Visual in PowerBIで分析しよう
nakasho
0
210
使えるデータ基盤を作る技術選定の秘訣 / selecting-the-right-data-technology
pei0804
5
890
TanStack Start 技術選定の裏側 / Findy-Lunch-LT-TanStack-Start
iktakahiro
0
110
Pythonデータ分析実践試験 出題傾向や学習のポイントとテクニカルハイライト
terapyon
1
140
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
KATA
mclloyd
29
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
840
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Agile that works and the tools we love
rasmusluckow
329
21k
How to Ace a Technical Interview
jacobian
276
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
A Modern Web Designer's Workflow
chriscoyier
693
190k
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 mail@kristin-baumann.com www.kristin-baumann.com