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.
React – I will keep using this term for the sake of shortness – advertises three features on their website:
+ Learn Once, Write Anywhere
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 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:
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.
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.
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 😉