Golo Roden: René, why React? What sets React apart from other UI solutions?
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?
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.
Golo Roden: In contrast - what are the disadvantages of React? Where is there room for improvement?
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?
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?
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?
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.