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
Responsive D3 The React Way
Search
John Bartos
March 16, 2016
Programming
0
200
Responsive D3 The React Way
Use higher-order components to abstract the nastiness of interacting with the real DOM
John Bartos
March 16, 2016
Tweet
Share
Other Decks in Programming
See All in Programming
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
180
Powerfully Typed TypeScript
euxn23
4
1.7k
酒飲んでたらテックリードになった話
spbaya0141
0
210
TypeScriptの型とパフォーマンス (TSKaigi 2024)
ypresto
14
4.6k
WinActorの勉強を継続する方法
tamai_63
0
130
CQRS meets modern Java
simas
PRO
2
480
Good first issues of TypeProf
mame
4
600
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
990
2024 コーディング研修
ckazu
2
660
mb_trim関数を作りました
youkidearitai
PRO
1
230
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
300
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
560
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
KATA
mclloyd
16
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Thoughts on Productivity
jonyablonski
60
3.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.7k
What's new in Ruby 2.0
geeforr
338
31k
Automating Front-end Workflow
addyosmani
1357
200k
Transcript
Making D3 Responsive The React Way https://johnbartos.github.io/react-d3-demo/ johnbartos.io
I'm John Bartos, and this is my first talk ever
You want to make sweet D3 visualizations that just work™
on all screen sizes (you also care about doing it properly)
But there's a problem...
D3 needs to know its size before runtime You don't
know size until runtime
Fortunately, there's an easy solution
ReactDOM.findDOMNode() GetBoundingClientRect() window.addEventListener('resize', ..) this.setState()
But there are two (2) things wrong with this approach!
findDOMNode() breaks component abstraction
A stateless component is now stateful
You need a higher-order component! (?)
HOCs are functions which take a component and returns another
component that wraps it (thats it)
Our HOC gets size exactly as before and passes it
as props to its child When 'resize' event fires, new props are passed, prompting a rerender
The HOC encapsulates all the nastiness
The wrapped component just gets props
There's a small catch – children render before parents Need
to set initial state in HOC
(Please clap)