What you need to know

I’m going to assume you already know how to code and that you’re great with JavaScript. Many books have been written to teach the basics of JavaScript; this is not one of them.

If you’re struggling with modern JavaScript syntax, I suggest visiting my Interactive ES6 Cheatsheet

I’m also going to assume some knowledge of D3.js. Since it isn’t a widely-used library, I’m going to explain the specific bits that we use. If you want to learn D3.js in depth, you should the third edition of my first ever book, D3.js 4.x Data Visualization - Third Edition. Written by Ændrew Rininsland with some bits left from yours truly.

React is a new kid on the block… well it’s been 2 years but still. You’ll be fine even if this is your first time looking at React. This book is more about learning React than it is about learning D3.

All of the examples in React + D3v4 are written in modern JavaScript. Most code is ES6 – ECMAScript2015 – some might be 2016, maybe even 2017. I find it hard to keep track to be honest.

I’m going to explain any new syntax that we use.

How to read this book

Relax. Breathe. You’re here to learn. I’m here to teach. I promise Twitter and Facebook will still be there when we’re done.

For now, it’s just you and some fun code. To get the most out of this material, I suggest two things:

1. Try the example code yourself. Don’t just copy-paste; type it and execute it. Execute it frequently. If something doesn’t fit together, look at the linked Github repositories here. Each example has one.
2. If you already know something, skip that section. You’re awesome. Thanks for making this easier.

React + D3v4 is based on code samples. They look like this:

Each code sample starts with a commented out file path. That’s the file you’re editing. Like this:

Commands that you should run in the terminal start with an $ symbol, like this: