Hello new friend! :wave:

Welcome to what I hope is the best and most fun React learning resource on the internets. No TODO apps here, just fun interactive stuff that makes you look great at a dinner party.

240 pages, 8 example apps, a bunch of skill building blocks.

By reading this book, you will:

• build a really big interactive data visualization
• build a few silly animations
• learn the basics of D3.js
• master React
• learn the basics of Redux and MobX
• look into rendering rich animations on canvas
• explore React alternatives like Preact and Inferno

You might be thinking “How the hell does this all fit together to help me build interactive graphs and charts?”. They’re building blocks!

First I will show you the basics. Stuff like how to make React and D3 like each other, how to approach rendering, what to do with state.

Then you will build a big project to see how it all fits together.

When you’re comfortable with React and D3 working together, I will show you animation basics. Cool things like how to approach updating components with fine grained control and how to do transitions. I’ll show you that tricks from the gaming industry work here too.

Short on time? Don’t worry. The basic examples are built on Codepen, a web-based IDE. Read the explanation, run the code in your browser, master enough React to be dangerous.

In about an hour, you’ll know React well enough to explore on your own, to sell the tech to your boss and your team, and to assess if the React and D3 combination fits your needs.

I believe learning new tech should be exciting.

Foreword

I wrote the first version of this book in Spring 2015 as a dare. Can I learn a thing and write a book in a month? Yes.

That first version was 91 pages long and sold a few hundred copies. Great success! This version is 240 pages and sold over a hundred copies in preorders alone.

That makes me happy. If you’re one of those early supporters, thank you! You’re the best.

Here’s what I had to say about the first version:

I wrote this book for you as an experiment. The theory we’re testing is that technical content works better as a short e-book than as a long article.

You see, the issue with online articles is that they live and die by their length. As soon as you surpass 700 words, everything falls apart. Readers wander off to a different tab in search of memes and funny tweets, never to come back.

This hurts my precious writer’s ego, but more importantly, it sucks for you. If you’re not reading, you’re not learning.

So here we both are.

I’m counting on you to take some time away from the internet, to sit down and read. I’m counting on you to follow the examples. I’m counting on you to learn.

You’re counting on me to have invested more time, effort, and care in crafting this than I would have invested in an article. I have.

I’ve tried to keep this book as concise as possible. iA Writer estimates it will take you about an hour to read React+d3.js, but playing with the examples might take some time, too.

All of that still rings true. People are distracted, the internet is shiny, and it’s hard to keep readers for more than 5 minutes at a time.

I don’t know how fast you read, but I don’t really learn things with a 5-minute skim. I need to sit down, try stuff out, play around.

That’s what I’m hoping you’ll do with this book. Sit down, play with code, try the examples, and have some fun.

If you’re short on time: Read the theory. You’ll get the gist and learn the basics in about an hour. I promise :)

Why you should read React + D3v4

After an hour with React + D3v4, you’ll know how to make React and D3.js play together. You’ll know how to create composeable data visualizations. You’re going to understand why that’s a good idea, and you will have the tools to build your own library of interactive visualization components.

It’s going to be fun! I believe learning new tech should be exciting, so I did my best to inject joy whenever I could.