In the early 2010s, Facebook developers had a problem. Thousands of people were complaining about "phantom messages".

Users would see a little 1 notification badge by the "messages" icon, suggesting they had new messages. But when they'd click it, there wouldn't be anything new, just the same old messages.

At the time, the UI had 3 separate locations where message state was presented:

Users were getting phantom messages because these 3 parts of the UI were powered by separate views, and those views were getting out of sync.

This might seem like a trivial problem to solve, but Facebook is a tremendously complex app, with hundreds of developers across dozens of teams all collaborating, adding new features, moving fast and breaking things. Every week, some new edge-case would crop up, leading to phantom messages. It was like playing whack-a-mole; every time they fixed a bug, a new one would pop up.

The team eventually solved this problem by migrating to an experimental new internal tool: React. This problem, along with so many others, disappeared.

If you're interested in hearing a more-detailed version, this story is told by Jing Chen in a talk, Rethinking Web App Development at Facebook

*

.

The truly magical thing about React is that we don't have to worry about keeping our state (held in JavaScript) and our UI (in the DOM?) in sync.

With React, we're describing what we want the UI to be, based on the current application state. React takes those descriptions and makes it real.

I started building with React in 2015. I've had the privilege of working on a number of large React codebases, including Khan Academy, which was one of the first significant non-Facebook applications to migrate to it, and Unsplash, the internet's 250th most popular website

*

.

I can honestly say that I never want to build dynamic web applications any other way. Once you get comfortable with React, it becomes such a powerful tool.

I'm so excited to share the joy of React with you. Let's get started!