Link: Jérôme Cukier’s Series on Visualization with React

While D3 is the standard way of doing visualization on the web right now, there’s a lot of interesting stuff happening in the world of JavaScript framework React. And it turns out, you can do some really interesting visualization stuff with React, once you understand the basics. In a series of very thorough postings, Jérôme Cukier takes you through the fundamentals of React and how to use it by itself or together with D3.

Reading all the postings is not a small undertaking, so be prepared to spend some time on them. You’ll also have to work on a project to actually put those things into practice, or they won’t stick. Jérôme happened to post his series just as I started work on a new prototype, and I had been curious about React for a while – so this turned out to be a great match for what I was starting to build. Jérôme is now a visualization person at Uber (according to his Twitter bio), but he worked at Facebook before and is quite familiar with React from his time there.

React is great when you’re dealing not just with a visualization, but a number of elements around it that interact with it. I had played with React for a bit a while ago, and never quite got it. My current project is a really good fit though, and Jérôme’s postings got me going in the right direction, and the rest has been fun and fascinating to figure out.

I was going to write brief summaries of the postings, but it turns out Jerome has already done that for me! So here I’m just quoting from his series announcement posting:

1. React vs D3, where we’ll explore similarities and differences between these two frameworks.
2. An ES6 primer. I have written all the examples in good, sensible, modern ES6 javascript, because as of 2016 this is probably the most common syntax. Without going too deep into the details, I’ll explain what parts of the language I used for the examples, and how they differ from ES5.
3. Gentle introduction to coding with React, where we’ll explore the high-level concepts of the framework and see how we can create visual elements from data. We’ll end on a presentation of JSX, a flavor of Javascript used to write React applications, which I’ll also use for most of the examples for the same reasons as ES6 – because it’s the most widespread way of writing React code today.
4. React components, the most important concept in React and the building blocks of React applications.
5. Beyond rendering. We’ll look at the React concept of lifecycle methods, and also how we can use d3 within React components.
6. Creating a React visualization web app – using what we’ve seen, and two libraries – Facebook’s create-react-app and Uber’s React-vis, we’ll create a small standalone React visualization that can be deployed on its own website.
7. The big leagues – in that last part, we’ll write together a more complex visualization with live data and several components interacting with one another.