On React

tl;dr: React is a lightweight yet powerful JavaScript library for developing UIs, that is based on numerous functional concepts. Understanding them is the key to write great JavaScript and React code.

René Viering

Golo Roden: René, why React? What sets React apart from other UI solutions?

René Viering: React is a JavaScript library with a clear focus: the user interface. This minimalism makes React particularly powerful and versatile. In contrast to Angular, where the framework already relieves the developer of many design decisions for the entire application and dictates a lot, React offers maximum flexibility for the rest of the application.

React itself is very slim and requires only a few concepts. And, everything is a component! It's the primary way to structure a React application. In simple terms, a component is a JavaScript function that calculates a UI representation with the data from the parameters.

Golo Roden: If it's conceptually just a function, isn't that at least in the beginning strange for developers who primarily use object-oriented programming?

René Viering: Developers coming from the object-oriented mindset are used to look at data and behavior together and combine them into objects. In functional programming, data and behavior are separated from each other. This can feel strange at first, because it is a completely different approach, which also requires a different kind of programming.

This separation of behavior and data is reflected in the declarative nature of React components. Instead of changing the DOM elements directly in the browser, they simply describe what should be displayed. The how is encapsulated by React with the principle of the virtual DOM. This dramatically simplifies rendering, because whenever something changes, the entire application is simply re-rendered. The data is injected into the topmost component and distributed downwards.

The principle of the virtual DOM then ensures high-performance rendering by re-rendering only those parts of the application that have actually changed. To determine this, a UI representation is calculated each time and compared with the actual DOM.

Golo Roden: So, this means that synchronizing the virtual DOM with the actual DOM is faster than directly manipulating the DOM, right? Why is this?

René Viering: Yes, it is much faster to synchronize the DOM than manipulating it directly. DOM manipulations generally take a lot of time and represent a bottleneck in terms of performance during rendering. Therefore, the number of DOM accesses should be minimized to ensure fast rendering. JavaScript itself is very fast. And this is exactly what the principle of the virtual DOM takes advantage of.

Each time the state of a component changes and a new rendering is required, a new UI representation is calculated with JavaScript. Subsequently, only the actual changes are adopted in the real DOM. If you exclude the initial rendering, the number of necessary DOM manipulations for this procedure is very low, which makes it very powerful.

Golo Roden: You mentioned the declarative approach of React. Can you explain in more detail what this means?

René Viering: Declarative React components not only simplify rendering, they also enable technologies such as ReactNative, which can be used to develop native mobile apps for iOS and Android. The only difference to React is that it uses a different approach to render things: ReactNative renders native UI elements from iOS or Android instead of DOM elements. All other concepts are identical.

Furthermore, React is very close to JavaScript. This can be seen in the fact that during the development of a React app, you usually write simple JavaScript. So if you are working with JavaScript, you will automatically get better in React and vice versa. Especially the functional JavaScript has to be mentioned, because React is based on concepts of functional programming such as pure functions, unidirectional data flow and immutability. For me, the functional principles are what makes React so charming, as they make a significant contribution to the application's readability and predictability.

Golo Roden: In contrast - what are the disadvantages of React? Where is there room for improvement?

René Viering: React's minimalism makes the JavaScript library particularly powerful, but also means that separate concepts are needed for all other aspects of the application. Application structure, state management, and so on. Choosing the right one is often not so easy.

Functional programming requires some rethinking and the willingness to embrace new things. This is especially difficult for developers with an object-oriented background such as Java. Instead of introducing inheritance hierarchies, React, for example, uses the principle of composition. In order to use React successfully, you should invest in understanding the concepts behind it. This costs time, but it pays off in the long run!

React itself is very simple, but you can get in touch with many other technologies like Node.js, Babel, Webpack, JSX, Redux, MobX, and so on. At the beginning you should be careful not to get lost in details. So just focus on React first.

Golo Roden: Is there a well-known React project that fascinated you in particular and in which you might even have been involved?

René Viering: There are some of them. But what really impressed me was the web version of Netflix, which is developed with React. Furthermore I am using the Chrome extension react-detector. This means that you can directly see whether the current website was developed with React or not. I'm very happy that it is getting more and more and often I can't resist to open the dev tools and look into the code.

I also like ReactNative. The fact that you can write native apps using the same React concepts that you use on the web fascinates me every time anew. Especially interesting are the apps Facebook and Instagram. The fact that Facebook uses React in its own products also says a lot of positive things about React and Facebook itself in the open source area.

Golo Roden: At first glance, React looks like a variety of technologies that are all interwoven. What is the best way to get started?

René Viering: In my opinion, the best way to start with React is still to create a file index.html, add a few <script> tags and start right away. The React dependencies can be easily integrated via a CDN such as unpkg. For me, this is the fastest way to start with a new frontend technology and to try it out. In this way you can concentrate on React itself and quickly get to know the concepts without getting lost in details until you can start at some point.

Golo Roden: And then, how do you proceed? How do you get started with JSX, Redux, and all the things you mentioned before?

René Viering: To use JSX you need Babel. The XML-like syntax of JSX is not executable in the browser without further efforts. Babel is a JavaScript compiler that converts not only JSX but also the latest language features of JavaScript into an executable variant for the browser. For Babel there is a stand-alone version available, which you can also integrate into your index.html via unpkg. The compilation then takes place in the browser at runtime. This gives you a quick way to use the latest features of JavaScript in your local playground.

But at some point you want to go beyond pure try out. Be it the need to split your code into modules and files or the need for other libraries. Then it makes sense to use tooling. In addition to the simpler structuring in modules, you also get features such as live-reload after changes and the possibility to prepare your code for production.

The easiest way to do this is to use a React starter kit such as create-react-app, which does not require any configuration. create-react-app can be installed via npm and offers a CLI for the automated creation of a project structure and the execution and building of the application. There are many of these starter kits. They differ mainly in the degree of configurability. A decision guide can be found in the documentation of create-react-app. For maximum flexibility and configurability, however, it is advisable to consider implementing your own tooling based on Webpack.

Overall, I find it particularly important to use technologies only when required. Be it the choice of tooling or the use of Redux for state management. The choice of a technology should always have a reason. Does the technology help me to solve a specific problem? This helps enormously even with growing applications to keep them simple and not to loose yourself in details.

Golo Roden: React, as you said earlier, uses numerous concepts from functional programming. Has it changed your way of developing?

René Viering: Absolutely. Before I consciously decided on JavaScript, I wrote lots of object-oriented code with C#. Therefore, I know that a rethink is necessary for functional programming. But it's worth it!

First of all, there are many supposedly new concepts that need to be understood. Even more importantly is to understand why these concepts are important and how they can help you write better code. In the React context some of these concepts are pure functions, immutability and the unidirectional data flow.

Essentially, the aim is to reduce side-effects and mutable state in the application. Both inevitably lead to more testable and readable code, which is also easily predictable. And this is especially important when you realize that you read code much more often than you write it.

Golo Roden: Apart from server-side rendering, are there any other benefits for the backend when using React?

René Viering: In React and single page apps in general, the server has the role of a data provider because there is a clear separation between frontend and backend. In the best case, this leads to a simple API in the backend, which means that the backend can be used in many ways. For example, to connect native apps in addition to a web application.

Golo Roden: What would you recommend to someone interested in React?

René Viering: If you start with React, you should first concentrate on React itself and look at the concepts behind it. As with any other technology, you can only get the most out of it by using it as it was designed. React is based on the concepts of functional programming. Therefore I can recommend everyone to look at the functional concepts intensively and to invest in learning JavaScript.

The positive thing is that this knowledge is very sustainable and not only helps you to get better in React. I am also creating a free video course on React, which provides a profound introduction to React, starting from the first line of code to developing complete applications.

Twitter Facebook LinkedIn

Golo Roden

Founder, CTO, and managing partner

Since we want to deliver elegant yet simple solutions of high quality for complex problems, we care about details with love: things are done when they are done, and we give them the time they need to mature.