All About React

React, ReactJS, React Native, ReactiveX: to a novice, all those would sound like the same thing. However, software developers who know a little bit about the topic also know that React/JS and React Native have got nothing to do with ReactiveX. If you would like to know why that’s the case and/or you want to annoy impress others with your knowledge about the exact difference, you’ve come to the right place.

Out of all the terms I mentioned earlier, React and ReactJs are the most similar… because they are actually the same thing. Some use React, others ReactJS and some even React.js, but all of them mean the same thing: a JavaScript library that lets you build user interfaces.

React

React – I will keep using this term for the sake of shortness – advertises three features on their website:

+ Declarative
+ Component-Based
+ Learn Once, Write Anywhere

The developers of React use “declarative” to describe the process of implementing a screen. A substantial advantage here is, that, thanks to JSX, you define the basic structure with tags, which are very similar to HTML tags. JSX stands for JavaScriptXML and is an extension for XML-like code. There’s no semantics with JSX, which makes it pretty easy to represent objects or elements with a structure similar to XML.

Component-based: I’m sure many frontend developers know and still use the classic MVC-pattern for building user interfaces. With this approach, model, view and controller are strictly separated. However, since Facebook published React in 2013, there’s a strong trend towards individual components which are interlinked and have their own state. Thus, each component only contains the individually necessary functions and data. For this, model and controller need to be separated. This pattern should make it easier to build complex UIs without losing sight of the big picture.

Lastly, there’s the often misquoted and misunderstood slogan “Learn Once, Write Anywhere”. What the developers of React mean is that you need to understand the React principle once in order to be able to apply it in many scenarios. Independent of whether you want to render the content on the client or the server, you always use the same library. There’s even a dedicated framework for mobile development, which neatly takes us to the next part: React Native.

React Native

React Native is a framework which lets developers produce native code with react. In the case of Android, native means Java and in the case of iOS, it means Objective-C. The following graphic nicely illustrates this development process:

Source

The above React component would lead to content that can be interpreted by different browsers. If you’re using React Native to develop a native app though, the result is platform-specific compiled code, which can be executed by the respective processors. As you can see, the component has the same structure in both cases, meaning that the “render” function will lead to the desired user interface. All other so-called “lifecycle methods” are the same as well, only the JSX tags are different.

In order for the various mobile platforms to be able to interpret the JavaScript code, you need a separate connection called bridge. Those for Android and iOS are certainly the ones that are most used, but there are others, of course, such as for MacOS or Windows. Theoretically, you could write your own bridge for almost any platform you’d like to use, provided you have enough time.

Since the native look and the native behaviour are what makes a mobile app distinctly different from a web app, these things are very important. However, React Native leaves it up to the developer to decide whether to write separate components for every platform or not. A good example is navigation. With Android, it’s normal to have a row of tabs under the navigation bar. On iOS this behaviour is not the standard, since the tab bar is supposed to be displayed at the bottom of the screen. Now, there’s two ways to solve this issue: use the same design for both platforms (and flout at least one platform’s guidelines) or implement two separate designs. If you do want to pay tribute to the material design guideline and Apple’s human interface guideline, you should make time to include platform-specific designs.

Now, some of you may be wondering how there’s an advantage in using React Native, when you need to implement two designs anyway. Well, this is where their slogan of “Learn Once, Write Anywhere” comes in. It is NOT about reaching as many platforms as you can with one code base. It’s about being able to develop for multiple platforms with the same library, but being able to use most components for iOS and Android and save time doing it is a nice additional benefit.

ReactiveX

Without any bridge or transition whatsoever, we’ve come to ReactiveX (RX for short), because neither React nor React Native have anything to do with it. RX is an API for asynchronous programming through observer streams which exist for an array of programming languages, platforms and frameworks. Simply put, RX enables the extension of any supported language by the observer pattern. This means that all variables and actions can be displayed as event streams. These streams can then be tracked and you can react to them accordingly.

What you should know now

First, you should now be aware that ReactiveX doesn’t have anything to do with the rest of the concepts discussed. The fact that React, ReactJS and React.js are actually the same thing is clear to you as well. And you’ve understood how React is connected to React Native and which of them is suited to what kind of use case. Basically, you know everything you need to get started on your first React app – have fun! Oh and also, if you’re interested in cooperating on a React project or having one developed for you, you now also know the best team for the job 😉

Stefan

About the author

Stefan

Despite having had an aversion to Apple products for years, Stefan eventually joined the team as an iOS developer. After having had to endure a lot of mockery by his friends and family ("what about I'll never be an Apple user!?"), he's now quite happy with his decision and wants to learn everything there is to know about Swift and such. If he has nothing going on at work or university, Stefan enjoys strength training and listening to music.