Christopher Chedeau wanted to save the web from obsolescence.

Chedeau joined Facebook as a front-end developer in 2012, just as the company embarked on a new “mobile-first” approach to development. At first the approach focused on using HTML5 and other web technologies to build mobile apps. “We already had all this expertise on the web, and if we could just put the web in a mobile app, we could work much faster,” Chedeau explained in a talk at Qcon in 2015.

The trouble was that these web-based apps didn’t have the same look and feel as true native apps. Features like touch handling and gestures, which are built into mobile application SDKs, weren’t available on the web and had to be built from scratch in ways that couldn’t always match the native versions. That’s a big part of why Mark Zuckerberg famously declared that betting too heavily on HTML5 was Facebook’s biggest mistake in their journey to become a mobile-first company.

When Chedeau heard the CEO say the company was betting against HTML5—and by extension the web technologies he’d spent much of his life learning—he took it as a challenge. He believed the web could work better, even for mobile. He liked that you could easily make updates, experiment with new ideas, and publish fast fixes without uploading new versions to an app store or asking someone to download special software.

To test these instincts, Chedeau and his teammates spent three months working on a mobile version of the Facebook photo viewer, exclusively using web technologies. They still couldn’t produce a quality experience. “At this point, I was like ‘There are two options,’” he said in the QCon talk. “The first one is, I’m not good enough. I didn’t choose the right tools for something like this, and the web is fine. The other option is that the web is fundamentally flawed with the current APIs.”

Then Chedeau heard about Jordan Walke, a fellow Facebook employee who in 2012 created React, a JavaScript user interface library widely used within the company. React essentially acts as a middle layer between a developer’s code and the browser, handling some of the more complex interactions with the browser automatically, and reducing the amount of work needed to create UI features. By 2014, Walke had some success taking React beyond web browsers to interact with native mobile APIs using JavaScript.

Intrigued, Chedeau teamed up with Walke and fellow Facebook engineers Ashwin Bharambe and Lin He for a weekend-long hackathon in 2014. By the end, they had a working version of React Native, a system that enabled developers to write native mobile applications using JavaScript and other web technologies.

With React Native, developers can use the same code they write for web applications without giving up the look, feel, and performance of native applications. “Using native interface features is key to creating a good mobile experience,” Facebook Developer Advocate Christine Abernathy explains. “In an iOS app, you want the buttons to look like iOS buttons. On Android, you want the buttons to look like Android buttons.”

Facebook open sourced React in 2013, following its acquisition of Instagram in 2012. As the Instagram team developed the first web-based version of its app, Facebook engineers had to make some changes for it to run outside of the company's core services, explains Facebook engineering director Tom Occhino. The work his team invested in making React usable by Instagram was the same work necessary to release it to the public. “So we decided to go for it,” Occhino says. “We’re big users and supporters of open source, so it just made sense to put React out there.”

React and React Native have become incredibly popular since their open source debut. Countless companies, including Airbnb, Reddit, and Microsoft have used the projects to build web, mobile, and even desktop applications. According to the State of JavaScript 2020 survey, 70% of the 23,765 respondents have used React and would use it again. Another 11% hadn’t used it but wanted to.

Facebook benefits from having contributors from outside of Facebook working on React, but it’s the ecosystem that’s grown around that’s an asset to everyone. Countless developers have created React-related tools that aren’t part of the core project, but make life easier for developers.

This ecosystem evolved, in part, out of necessity. React isn’t a complete front-end framework, like Vue.js or Google's Angular. Instead, developers typically require additional tools to build front-end applications. For example, many React developers combine the UI library with Relay, an open source data-fetching library also created by Facebook, as well as Redux, a state management system created by Dan Abramov prior to his employment at the company. “When people say ‘React’ they usually mean React plus all the other things that people use alongside React," says Swyx, a developer who maintains community documentation for using TypeScript with the library.

This growing ecosystem of developer tools built around React spawned multiple companies that have raised hundreds of millions in venture capital. Together, the React community has already changed the way people create software.

Paradigm shift

React wasn’t an overnight success. It took some time to catch on, mostly because it requires a different approach to programming than most developers were used to in 2013. But React’s power comes from those differences.

Programming can be like a game of Jenga. Pull one block, and the whole stack could crash. Actually, it’s more complicated than that, because it’s obvious when a Jenga tower crashes. Software bugs can go unnoticed for months, or even years. And the tower can grow precariously taller in a larger company, with dozens, hundreds, and even thousands of developers working on an application. If one developer, say, adds a button to their feature, it could end up breaking some other part of the interface maintained by another developer, or by a team of developers.

With React, developers can easily compartmentalize different parts of an interface so that they don't interfere with others. Each button, slideshow, and menu is isolated from the rest of the application. This makes it possible for new employees to jump in and start working on interface components without having to worry about the rest of the codebase.

React is able to prevent pieces of code from tripping each other up by embracing a programming paradigm called “reactive programming.” This paradigm makes it easier to create applications that juggle multiple different tasks at the same time.

Traditionally, JavaScript developers write “imperative” code. Imperative programming is a little like writing recipes. You write step-by-step instructions that tell the computer what to do with varying degrees of detail, much like you would write step-by-step directions to prepare a particular dish. Each step builds on the one before it. Leave a step out, and you may end up with a different meal.

With React, developers write “declarative” code. This approach is a bit more like ordering food at a restaurant. You can ask for what you want—maybe specify a side dish or tell the kitchen to hold the pickles—but you don’t need to provide step-by-step instructions and you don’t have to worry that you’ll be served rare chicken when you order a burger. You can assume that the chef already knows the recipe.

The payoff for learning to think in this way is that not only do developers have to write less code, but React isolates these pieces of code from each other, which makes life easier for developers. “It's more pleasant to code when you don’t have to worry about side effects,” says Zoltan Olah, founder and CEO of the React tooling company Chromatic.

Another benefit of isolating different components is that it’s easier to recycle those components in other projects. “We like to think of React components as LEGO blocks that can be reused in different scenarios,” says Abernathy.

This is a huge boon to developers. “When I first started building web applications after college, there was little reuse of JavaScript code,” says Charlie Cheever, who co-founded Quora and is now CEO of React tooling company Expo. “We had to write everything in house because it was so hard to integrate third-party code into what we were doing.”

The catch, of course, is that developers had to start thinking in the declarative—a big shift from the more dominant imperative paradigm at the time. It took some time for developers to come around, but now a growing number of tools, such as Vue.js and Svelte, embrace the ideas first popularized by React.

Learning to work in this new paradigm takes some getting used to. Thankfully the growing React ecosystem has made it easier than ever for developers to get started.

It takes an ecosystem

The fact that React is just one set of blocks among the many necessary parts required to build front-end applications is actually part of its appeal. “React refuses to have an opinion on things like styling and routing,” Swyx says. “Some people find that frustrating, but others find it liberating. People like customization, they like being able to drop things into their existing setups.” Developers can pick which particular tools they want to use alongside React, crafting custom development stacks that fit their needs and preferences.

Many developers prefer to work with frameworks that reduce the number of decisions they have to make before they can jump into coding an application. Several open source projects are working to create a more curated experience for those who don’t want to have to pick and choose their components themselves.

For example, Kyle Mathews created the open source framework Gatsby to build a website for a sales software startup he founded in 2014. He soon realized that Gatsby was more interesting than his initial startup idea, and built a company around that instead.

“The idea behind Gatsby is to tap into this shift away from monolithic applications that run mostly on the backend towards these React-based, front-end centric websites,” Mathews says. “We're making it easy to build a UI that might talk to multiple different backend services while easily creating a consistent user experience.” For example, your site might have both ecommerce components and a blog. Gatsby is designed to make it easy to incorporate the best solutions for both, all on a single site.

Meanwhile, many of those who want an open source framework for building full-stack applications based on React and its related components have turned to Next.js. Next.js bundles many different React tools into a single framework to save you from fiddling around with your own stack. “Next.js started out as a way of democratizing what Facebook started,” says Guillermo Rauch, the project’s creator, and founder of the startup Vercel. However, it’s far more than just a beginner’s tool—Next.js is used by the likes of AT&T, Staples, and TikTok.

For those that want something even more opinionated, Blitz.js is a Next.js-based framework with more features, like conventions and scaffolding for structuring an application. Creator Brandon Bayer cites Ruby on Rails as his main source of inspiration. “I really appreciated all the productivity benefits of everything being a monolith, or one application,” he says. “React is a great way to build user interfaces, but I missed the simplicity of Rails.”

Cheever's startup Expo, meanwhile, is focused on mobile developers. The company makes an open source framework with a tidy bundle of tools for writing, building, and testing apps with React Native. It includes libraries for everything from embedding video players to communicating with biometrics like Face ID to interacting with a mobile phone’s accelerometer and gyroscope. Expo also has a web version. “It's a big deal for developers in Southeast Asia, where lots of people use iPhones but it's hard to get a Mac,” says Cheever.

All of these open source tools benefit from React, and add to its popularity. The easier it is for developers to get started with React, the more likely they are to contribute back to the core React project, making it better for the entire ecosystem. It’s a virtuous cycle of improvement.

Facebook also uses and contributes to many aspects of the ecosystem. In addition to Relay, the company has open sourced the testing framework Jest and the documentation website management system Docusaurus. They use tools like Gatsby and Next.js for websites for their various open source projects: For example, the React site is built on Gatsby. "It helps us stay in touch with how people use these technologies," Abernathy says.

Staying Power

React has plenty of longevity, despite the growing number of alternatives and the rapidly changing nature of technology. David Yang, founder of the coding school Full Stack Academy, says his curriculum emphasizes React due to employer demand.

And React keeps getting better. The React Native team is working on their next version, which will include major performance improvements and tools that make it easier for developers to take advantage of native mobile operating system features. In May 2020, Facebook took the Global Accessibility Awareness Day pledge and committed to making it easier for developers to build fully accessible mobile apps using React Native. In the year since, Abernathy says that the React Native team has conducted an extensive analysis to see what needed to be done, and is now working on improvements. And then there’s the partnership with Microsoft to bring React Native to the desktop.

At the heart of React is the open source community, which is really what gives it such staying power. “React has a huge ecosystem,” Yang says. “That makes it a pretty safe choice to build a business around.”