History of React.js
Let’s begin with a brief history of React.js. Facebook created React in 2011 for their own use at Facebook.com. It is one of the highest traffic websites in the world. In 2012 React was then utilised by Instagram. After already using React for 2 years Facebook open-sourced React library in the year 2013.
Initially, some people dismissed it because of the idea of being putting markup and logic in a single file. But as more people experimented with a library, many embraced the new component-centric philosophy for separating concerns. each React component is a separate concern.
A year later in 2014, React is grown significantly in popularity and was embraced by many notable companies outside of Facebook. This popularity let Facebook open-sourced React Native too in 2015. React Native is the related library that allows you to create native mobile applications for iOS and Android using React.
Today, there are over 30,000 React components in production at Facebook. Facebook is deeply committed to react since it also uses React on Instagram and React Native for mobile development. Today, Facebook employs a full time React development staff that regularly releases bug fixes, enhancement, blog post, and documentation.
Many large companies come under fortune 500 starts using React at their production.
Why should we choose React.js over the long list of alternatives?
Let’s explore some of the key features that let you use React.js in your applications.
React is remarkably flexible. It embeds fewer opinions than its competition, so it’s more flexible than opinionated frameworks like Angular and Ember. React is a library, not a framework, and as you’re about to see, React’s library approach has allowed it to evolve into a remarkably flexible tool.
When React was initially created, it had a single, focused use case. It was for creating components for web applications. However, as React has grown in popularity, its ecosystem has grown to cover a variety of use cases.
You can generate static sites with React using popular tools like Gatsby and Phenomic. You can use React to build truly native mobile applications using React Native. And with great tools like Electron, you can even create installable desktop apps that run on Mac and Windows using web technologies like React.
React also supports server rendering out of the box, and popular frameworks like Next. js make it really easy to set up. Finally, you can use React to create virtual reality websites and 360 experiences with React VR.
React is highly versatile because the render is separate from React itself. For web apps, you call react-dom to render your components to HTML. For React Native, you use react-native to render React components into native-friendly code. And react-VR is useful for rendering your React components into a virtual reality environment.
In fact, there are over a dozen different renderers for React. This list is called awesome-react-renderer and lists a variety of other targets that React can render to, including canvas, WebGL, command line apps, and even PDFs and Word documents.
React-dom provides a simple function called renderToString that renders your component to a string of HTML. This is useful if you want to render your React components on the server, so this means you can use React to replace your traditional server-side rendering technologies. And there are multiple popular libraries that make it easy to render React components on the server, including Next. js, Gatsby, and Phenomic.
In fact, that’s precisely what React was designed for. Facebook used React to slowly replace its server-side rendered PHP application. You can start with small portions of the page like this, then move onto slightly larger portions of the page, and eventually, rebuild the entire page by slowly replacing larger sections with React. It’s a low-risk way to migrate an existing app to React or to use React in places where it’s most valuable.
Finally, since React is used heavily by Facebook, you can trust that it will continue to run reliably in all popular browsers, including recent versions of Internet Explorer.
2] Developer Experience
Once your team tries to React, they’ll likely fall in love. The rapid feedback development experience, combined with React’s small, logical API, creates a development experience that’s very hard to beat. React is special because it offers a simple API that’s easy to learn. There are very few concepts to master. React’s API is so small and straightforward that developers rarely need to check the docs.
3] Corporate Investment
Well-respected corporations are deeply invested in React and its ecosystem today. React was created by Facebook, so of course, React is heavily used on Facebook, one of the highest-trafficked apps in the world, as well as Facebook’s other properties such as Instagram and WhatsApp. Facebook is deeply committed to React.
Facebook development team maintains an active blog that consistently outlines the details of each release and plans for the future. Because of Facebook’s deep existing commitment to React in production, when breaking changes occur in React, Facebook has consistently provided a codemod that automates the change.
A codemod is a command line tool that you can point at your code base to automate changes. So with React codemod, you can automatically update older React components to the latest specification.
The beauty is we can feel confident about writing React components today because of Facebook’s deep investment in the production React code, means they must rely on the codemods that they create to update their own code. See, codemods exist because Facebook needs them.
Facebook has over 30, 000 components in production. This is a benefit of using React because it helps assure that significant breaking changes in the future are highly unlikely. Doing so would require Facebook to deal with painful breaking changes to tens of thousands of their own components, so this helps assure the long-term stability of the project.
React has a huge active community. Since 2013, React’s popularity has steadily grown to over 1,28,000 stars on GitHub today. This makes React one of the most popular repositories on GitHub. Today it has over 1,000 contributors. In fact, out of over 2 million repositories, only 3 repositories have more stars on GitHub than React.
React is the fifth most popular technology on all of StackShare. Facebook developers and a long list of open source React contributors are also involved in Reactiflux, which is an active online community of over 20, 000 React developers.
There are over 55, 000 threads on Stack Overflow that is tagged React.js, and nearly 20, 000 tagged react-native, as well as a long list of related tags for other React-related technologies.
If you’re trying to do something in React, you can almost certainly find an example of it online. It’s pretty awesome being able to consistently get answers from other people who have run up against the same challenge that you’re trying to solve and that’s because React is embraced by far more than just Facebook.
Today, many of the world’s most respected companies use React, including Apple, Netflix, Amazon, Airbnb, PayPal, and many more that you see here.
Many of these companies regularly open source their React-related work as well. So if you choose to React, you’re certainly in great company and you don’t need to create your own components since there’s a huge list of free and mature component libraries online.
Microsoft open sourced their React component library for making user interfaces that look and feel like Microsoft office. Material-UI offers a set of React components that implement Google’s material design guidelines. And React-Bootstrap is a popular library that contains React components that make it easy to work with Bootstrap.
There are literally hundreds of interesting standalone React components out there on GitHub that you might find useful.
They realized that updating the DOM is expensive, so they found that updating the DOM in the most efficient way would help enhance performance. So behind the scenes when you change data, React intelligently figures out the most efficient way to update the DOM.
When React.js was created years ago, this was a novel design that gave React a notable performance advantage in many cases. See, before React, most libraries would unintelligently update the DOM to reflect the new state. This often led to redrawing a significant portion of the page even when only a minor change had occurred.
In contrast, React.js monitors the values of each component’s state. When a component’s state changes, react compares the existing DOM state to what the new DOM should look like. It then determines the least expensive way to update the DOM.
The final reason is testability. Typically, testing a front end is hard. That’s why so few teams do comprehensive front-end testing. But React is attractive and noteworthy because its design is very friendly to automated testing.
Traditional UI testing is a hassle to configure. You have to carefully wire together multiple open source projects to get it to work. With React, there’s little to no configuration required. In fact, if you use a popular boilerplate like create-react-app, testing is already configured for you out of the box.
Traditional UI tests often require a browser, but you can reliably test your React components quickly in memory using node and while traditional browser-based UI tests are often slow, testing React in memory on the command line is fast enough that you can quickly run a large test suite every time that you hit Save.
For React, the most popular choice today is Jest. Jest was created by Facebook, and Jest makes it trivial to get started doing automated testing in React. Jest is built into create-react-app. Every time you hit Save, it automatically runs any affected tests. This instant feedback can rapidly speed development.
Jest also offers unique features like snapshot testing that make it easy to store a text-based snapshot of your component’s output. This way, if you accidentally change the way your component renders, you’re immediately notified.
In future articles, we will see some practical examples of React from beginning.