React all the things! Getting React to work with D3: The basics

1. React all the things!
Playing with React and D3

2. Freddy Rangel
Developer Advocate
• Full-Stack Developer experienced in:
Node, PHP, Go, Ruby on Rails, Sinatra,
and Grape, Python, Angular, React,
React Native, MEAN, Ionic, etc…
React and D3

3. What is React?
1
React and D3

4. • React is an open-source JS library for creating user interfaces that aims to address the
problems of building large applications with data that changes over time.
• React only cares about displaying UI components but it’ not the “V” in “MVC”
• Originally developed at Facebook, it is now used at Instagram, Netflix, Airbnb, and
HelloSign.
What is React?1
React and D3

5. Why Would I Use React?
2
React and D3

6. • React forces you to think in terms of small, reusable, compossible UI components
• React’s uni-directional makes it much easier to pinpoint source of bugs
• React is much easier to work with existing code that most other solutions
Why Would I Use React?2
React and D3

7. What is D3?
3
React and D3

8. • D3 (Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data-
visualizations.
• Give a lot of functionality out of the box
• Super popular but fairly low level
What is D3?3
React and D3

9. Why Would I Use React And D3?
4
React and D3

10. • React generally works pretty well with other libraries
• D3 is great for doing the math for data visualizations and React is great at rendering and
updating UI components.
• With React you can create a chart using D3 and reuse the component anywhere with
different data
• However, making React and D3 play nice is a little tricky since they treat data differently
Why Would I use React and D3?4
React and D3

11. Code
github.com/freddyrangel/playing-with-
react-and-d3
5
React and D3

12. Questions?
?
React and D3

13. Want a free t-shirt?
Visit: bit.ly/hello-free-shirt
+
React and D3

14. @frangel85 linkedin.com/in/frederickrangel
Thanks!
STAY IN TOUCH
@HelloSignAPI
React and D3