/ JavaScript

High-level overview about React

Since Sitecore introduced JSS https://jss.sitecore.net (an SDK for JavaScript developers), we as Sitecore backend developers need to understand how libraries like React.js work. In this post, I will provide a high-level overview of React. If you are not a Sitecore Developer or you are not familiar with Sitecore, well, just ignore it and continue with the post.

Why React?

Facebook created React (A JavaScript library for building user interfaces) in the year 2011 and it is used on Instagram since the year 2012. Since 2013 React is open source. Later in 2014, many large companies start using React. Facebook is using React for over 30,000 components in production.

Flexibility

React is a Library, not a Framework, you can use React for:

  • Web apps
  • Static sites
  • Mobile native applications with React Native
  • Desktop
  • Server-rendered React apps(Next[1], Gatsby, Phenomic)
  • Virtual Reality with React VR

If you would like to learn more about React Renderer just check this awesome repository https://github.com/chentsulin/awesome-react-renderer

Migrating an existing app to React

Migration to React is a low-risk way, you can start with small parts of your website and migrate more complex components step by step to React.

Broad Browser Support
Since React is used heavily by facebook you can trust that React is running reliably on a wide range of browsers, that gives you an extra benefit if you migrate or use React.

Developer

React offers an API that is very simple to learn, I highly recommend the official React documentation https://reactjs.org/docs.

Shortly it is very easy to create a basic React app:

In React each component is atomic and stands alone. You don't have to learn new technologies like in Angular or Vue since React is using the JavaScript standards.

Facebook

The highest contributors to the React Library are Facebook employees.

Since Facebook is using React in over 30,000 components you can be sure that Facebook would never make breaking changes to thousands of components without having a tool to automate this process.
With https://github.com/reactjs/react-codemod you can automatically upgrade older React components to the latest React specification.

Community

React is one of the most popular repositories on GitHub.

  • 89000 Stars
  • 16848 Forks
  • 5500 Watcher
  • 1167 Contributors
  • 83 Releases
  • over 8 000 000 downloads in just one month
  • A highly active StackOverflow community

Performance

React and Vue both have a Virtual DOM, which is meant to improve performance. But to answer the question about the performance itself I refer to the js-framework-benchmark which provides a quite well overview https://github.com/krausest/js-framework-benchmark.

Testability

Let's compare traditional UI tests to React tests:

Traditional UI tests React
Complex to set up Almost no configuration required
Requires browser Run in-memory via Node.js
Slow Fast
Time comumint to write (you have to interacte with the DOM) Quickly and easy to update

Since React is just JavaScript you can use your favorite kind of Testing Framework like:

  • Mocha
  • Jasmine
  • Tape
  • QUnit
  • Jest (build by Facebook and specialized for React)

If you want to learn more about Testing Frameworks in JavaScript just look into the post about Mocha http://blog.saschaheyer.de/javascript-testing-with-mocha-and-chai/.

I hope this post gave you an overview of React if you want to start just jump to the official documentation https://reactjs.org/docs.

References:


  1. https://github.com/zeit/next.js ↩︎