scorecard
  1. Home
  2. Enterprise
  3. Enterprise Software
  4. Everything you need to know about React, a project started at Facebook that now helps Twitter, Pinterest, and Asana keep their apps looking good and working great

Everything you need to know about React, a project started at Facebook that now helps Twitter, Pinterest, and Asana keep their apps looking good and working great

Rosalie Chan   

Everything you need to know about React, a project started at Facebook that now helps Twitter, Pinterest, and Asana keep their apps looking good and working great
Enterprise8 min read

FILE PHOTO: Facebook CEO Mark Zuckerberg makes his keynote speech during Facebook Inc's annual F8 developers conference in San Jose, California, U.S., April 30, 2019.  REUTERS/Stephen Lam

Reuters

Facebook CEO Mark Zuckerberg makes his keynote speech during Facebook Inc's annual F8 developers conference in San Jose

  • React is a JavaScript library that's used to build user interfaces, or how a user interacts with an application.
  • Originally, a Facebook engineer built React as an internal project to manage its ads. In 2013, Facebook released it as open source - and it exploded in popularity.
  • Today, React underpins some of the most popular features on apps from the likes of Twitter, Pinterest, Asana, Uber, Airbnb, and more.
  • React popularized a completely new way of programming that makes building websites much faster, easier, and more consistent.
  • Click here for more BI Prime stories.

If you've ever liked a status on Facebook, tweeted from your phone, checked off an item on your to-do list on Asana, or pinned a photo on Pinterest, then you've crossed paths with React.

Today, many core features of some of the most popular apps today are quietly underpinned by React, a framework that was originally built by Facebook engineers and released as open source in 2013.

React is a tool for building user interfaces (UI), which is to say, what an application looks like and how people interact with it.

It's built on JavaScript, the most popular programming language according to the mega-popular code hosting site GitHub, which keeps tabs on such things. Users can reuse components that have already been built, such as buttons.

React started within Facebook, and the team used it for two years before releasing it as open source. That move opened up the doors to allowing anyone to use, modify, or download it for free. In the years since, React has become one of the most popular tools on the web, and is used by companies like Airbnb, Twitter, Uber, Asana, and Pinterest.

"There's a certain flexibility in it that you can use it for a variety of different things," KellyAnn Fitzpatrick, industry analyst at RedMonk, told Business Insider. "Any time you have a framework or a tool that's flexible in that way, the flexibility itself can be a draw."

Facebook News Feed

Facebook

Facebook's News Feed uses React.

It's still used by Facebook, but it's picked up a large, passionate community, which hosts scores of meetups, plenty of conference talks, and an innumerable number of blog posts devoted solely to React.

It's also spawned another version of React, called React Native, for developing apps for iOS and Android devices. That offshoot has also quickly picked up in popularity: According to GitHub, it's the second most popular open source project out there, with over 10,000 contributors.

Carl Bergenhem, product manager at software consultancy Progress, says that using React is like building a house with Lego - if someone else had already made the tricky parts like the roof for you ahead of time. You can build most of it to your liking, and then just click on the pre-made part at the end when you're ready. And if you use React to build a component that's really good, you can sock it away wholesale, and re-use it whenever you have need of it.

"If you're building some sort of website, you want to make sure it's something people want to work with," Bergenhem told Business Insider. "We kind of see a critical need for people not to have to reinvent the wheel."

How React started

In 2011, Jordan Walke, a software engineer at Facebook, created the first version of React - but only for Facebook's use. He was working on the codebase for Facebook advertising product, but at the time, ads were difficult to create and manage.

"That UI was very complex so there were a lot of forms that were interconnected," Dan Abramov, a software engineer in the React team at Facebook, told Business Insider. "It was pretty difficult to make it work correctly. There were always bugs that were hard to fix."

To fix this, Walke came up with the idea of creating a project that allows developers to write code using declarative syntax. This means that developers can simply type what they want the app to do - like creating a button, dropdown or animation effect - rather than having to bang out an entire set of instructions.

Dan Abramov

Facebook

Dan Abramov, a software engineer in the React team at Facebook

It took off internally, and Facebook soon started using the React framework for some of its most popular features today, including commenting, liking and sharing on its news feed.

But when it was first released into the world as open source in 2013, it didn't catch on right away.

"A lot of people dismissed it. It did not get popular with users first," Abramov said. "A lot of people didn't really see its point. Eventually we tried to explain better why React is a good idea."

But that October, Pete Hunt, a former Facebook engineer who now works at Twitter, gave a talk called 'Rethinking Best Practices." Abramov calls it a "turning point" for React.

"He explained why React makes some unconventional choices and we might rethink that they're good choices," Abramov said. "There were several people who though maybe React is a good idea after all."

That was the moment that the engineering community at large realized that React was a notable part of what had led Facebook to its success.

"That's the reason why Facebook was as great of an application as it was," Bergenhem, the Progress product manager, said.

Read more: These are the top 25 people who will have the most influence in tech this year, according to a survey of over 30,000 developers

With a larger community of people using and making improvements to React, it was able to innovate and spread much faster.

At a certain point, it hit a critical mass - Abramov himself started using React, even before he worked at Facebook. Abramov says that the community started writing extensions and modifications to the open source React project that helped it spread, attracting even more developers to the fold in so doing.

"It hit the sweet spot of getting released at the right time. While it took a little while, it was around that time when we started looking into it more seriously since we saw a ton of people jumping onto it immediately and really enjoying the experience of working with React when it first came out," Bergenhem says.

React's impact

One of React's biggest impacts is that it popularized declarative programming, making designing applications much easier for developers. Today, Apple's most recent release SwiftUI uses this concept, as does Google's Flutter.

"Instead of telling the computer I want you to do this and then I want you to do this, you just tell the computer, hey I want the screen to look like this and it figures out all the commands and instructions it needs to generate that script," Chris Lloyd, a UI engineer at Pinterest, told Business Insider.

Ben Silbermann pinterest ceo

Reuters/Brendan McDermid

Pinterest CEO Ben Silbermann.

Read more: Apple just announced a new tool that makes it way easier to write software in Swift, it's mega-popular programming language. Here's why developers are so excited about it.

The Facebook team is still working on creating new React features today. In 2017, the Facebook team released React 16, the latest version.

That version increased React's compatibility with other outside tools and programs, and improved performance - while also making sure that it's easy for developers using older versions of React to upgrade their apps to this current version.

Next up, as React nears version 17, the team is working on a new system called Hooks, which could make it easier for

And right now, Abramov says, the team is working on the Hooks API, which makes it even easier for people to reuse their custom-built components, as well as Suspense, which allows applications to load content more efficiently.

Why people love React so much

Guillermo Rauch, CEO and co-founder of ZEIT, says he first started working with React when he worked at WordPress.

He says the reason why React grew so fast is simply because it works. When he heard that Facebook was using React for its News Feed, he dug into the website's public-facing code, and came away impressed. Not long after, he started seeing it everywhere.

"I went to the awesome UI they created," Rauch said. "The News Feed is super interactive. They're walking the walk in addition to talking the talk...this React signature started popping up everywhere for me. It became a chain reaction."

He eventually started his own company, which developed NextJS - one of the most popular ways of putting React into real-life use, providing tools for developing apps that use the combination of JavaScript and React.

Phips Peter, software engineer at productivity tool maker Asana, even hosts a regular meetup about React. Peter teaches other engineers how to use React with TypeScript, the third-fastest growing programming language according to GitHub, and one that's similar to JavaScript.

Dustin Moskovitz

Asana

Asana CEO and co-founder Dustin Moskovitz, who is also a Facebook co-founder

"I think React offered a programming pattern that no one else really offered at the time," Peter told Business Insider.

Likewise, Pinterest has been using React for the last three and a half years for its web site and ad buying sites. Before, it had its own homegrown system, but it was too complex, and it ran into problems when engineers were working on the same features at the same time. React helped solve these problems, says Lloyd, the Pinterest engineer.

"It allows developers to do the right thing in the sense that it's easy to write a consistent fast user interface," Lloyd said. "You tell it what to do and it will do it and make it work really well."

Lloyd says that React makes rendering and scrolling through large images - an important aspect of Pinterest - much faster. In general, Lloyd says, the decision to bet on React was a smart one for Pinterest.

Pinterest

Pinterest

Pinterest's site uses React.

"It's rare that we see a technology that's lasted as long as React has, and we are excited to keep supporting and using it for the next five years," Lloyd said. "It's really standing the test of time, which is incredibly rare."

READ MORE ARTICLES ON


Advertisement

Advertisement