React JS vs React Native | Must Know Major Difference!

How JavaScript Works?

Understanding the major differences between React JS and React Native is very important to know how JavaScript executes/works internally.

For example, let’s take you creating a button using JavaScript for your HTML document and displaying it on the HTML page. So for that you write a JavaScript code like document.createElement(‘button’). For that, JavaScript must call some function to execute the line of code we have written, but in this case, createElement is written in native code, i.e., C++.

So the JavaScript Engine will contact the browser which has the C++ code. When the C++ code executes to create a button and its functionalities, the browser’s C++ code will now contact your operating system API for getting the button styles and activity.

So this is the process that happens under the hood to create a single button on your webpage.

How does React Native works?

Now that you got an idea of how JavaScript works, it’s time to understand how React Native works. When it comes to React Native, instead of a browser, there is a bridge between the operating system and the JavaScript Layer.

If you think about this, you find that React Native working is very similar to JavaScript functioning.

When you write applications in native code like Java, Swift, Kotlin for mobile apps, the app code directly access the Operating System’s API to create a button. In the case of React, the bridge is something similar to a browser when creating web pages, but in the case of React Native, the bridge serializes and deserializes your line of code which is comparatively slower than the browser.

How React JS Works?

What does react do in the first place? If you are familiar with the browser’s Document Object Model, you’ll know that the DOM is re-rendered completely on the change of a DOM node. This is where React comes in. It creates a virtual DOM on the JavaScript layer and only changes the specific DOM Nodes.

So react reduces the re-render time as it compares its previous virtual DOM with the updated virtual DOM. Then, it contacts the JavaScript DOM and only changes the components that are different in the updated DOM. This process reduces the re-render time in the browser, and the performance of the user interface increases.

React DOM

When it comes to how react works under the hood, react constructs its own DOM tree, so react becomes the first layer of contact and then followed by the JavaScript functioning, so this does not affect how JavaScript works.

React vs React Native

When it comes to representing the UI, you can also represent the react-native UI in tree form. So when someone taps, react checks whether something needs to be changed. If so, then React Native script will say to change a particular component.

So the UI layer is pretty much the same in React and React Native as it constructs its own Component Tree. So the UI layer is the react package on the npm. Now we need a renderer to render our component tree on the browser and the Mobile. The main difference between React and React Native is their render. React.JS uses react-dom while react native uses react-native as its renderer. The bridge in the mobile apps is the react-native library itself for the most part.

On the web, we write direct HTML elements in our react code, but when it comes to mobile apps, they can’t render HTML on their own, so they write in custom components made by react, which can be rendered on mobile.

So, this is the only difference when it comes to React and React Native, and for the most part, all are similar because the UI library is the same in both cases.

You can watch the YouTube video here.