React JS vs. React Native | Same JS Framework With Different Purposes

In this blog, we will understand the difference between ReactJS and React Native. Before that we must know what javascript is and how does that work.

JavaScript is a scripting language that was used to create dynamic and interactive web pages, used in web browsers. However, it can also be used as a server-side language by using Node.js platforms for creating server-side applications.

| *JavaScript is Scipting Language. What does that mean? * |

A scripting language is a kind of programming languages used to automate problem solving tasks, perform system administration, or create simple applications.

Here is the step of code execution of a compiled language in a given image:

In a compiled language like C or Java, the source code is compiled into object code, which is then linked together to create an executable program that can be run on a computer. This process typically happens before the program is executed.

While, in a scripting language like JavaScript, the source code is interpreted directly by a runtime environment (e.g., a web browser), meaning that the code is executed directly by the software environment, without the need for a separate compilation step. This lets execute script run fast and easily to automate web page interactions or manipulate data. This makes JS ideal for rapid application development, prototyping, and automation where the focus is on speed and simplicity.

In this JS script, the document.write() function is used to output the message "Hello, world!" directly to the web page. The script is executed by the web browser when the page is loaded, without the need for any software environment.

| How JavaScript works? |

When a web page is loaded into the browser, it reads the HTML and CSS code and creates a Document Object Model (DOM) which then represents the structure and content of the page.

Here's an example of a simple JavaScript program that demonstrates some of these concepts:

In this example, a web page contains a paragraph element () with the ID "demo" and a button element () with an onclick attribute that calls a JavaScript function called myFunction(). When the button is clicked, the myFunction() function alters the text content of the "demo" paragraph using the innerHTML property of the document.getElementById() method. The modification to the web page are reflected in the output that the user views in the browser.

JavaScript can also be made used to connect with APIs, which are hook ups to allow various software systems/services to communicate with each other. I.e, To update the content of a web page without needing the page to be reloaded.

| ** Why frameworks are needed in javascript?** |

Frameworks in JavaScript, are pre-written code that is functionalities, libraries and tools to help developer to speed up the development process, improve code quality, and simplify or handle common tasks, such as DOM manipulation, event handling, and AJAX requests. By using a framework, developers can focus on solving the main problem of specific requirements of their application rather writing the same code over and over again.

Here's a simple diagram that shows how frameworks fit into the web development process:

Here's a simple code snippet that shows how React is used to create a simple web application:

In the above example, we import the React and ReactDOM libraries, parts of the React framework. We then create a component function 'App' that returns us a simple HTML structure. In the end, ReactDOM.render method is used to render our 'App' component function into the root element of our HTML page.

Without the use of framework like React, we would have to write all the code to handle HTML rendering, managing state, and updating the DOM ourselves again and again wherever needed. Using React safes our time to reuse same code multiple places to handling rendering tasks rather focusing on writing the logic specific to our application requirement.

Moreover, Frameworks can also helpful cross-browser compatibility, such as they often are tested across multiple browsers and different mobile devices, and render fallbacks and workarounds for browser-specific issues.

| *How ReactJS works? * |

ReactJS or React both terms are used interchangeably, is a JavaScript library utilized for building UI's on the web. It allows developers to create reusable components that can be composite together to make complex, interactive applications with effective rendering and updates.

Here's a simple diagram that shows how React works:

To represent the visual appearance of the component, React component renders and create a tree-alike structure of DOM elements. Instead of updating the entire DOM when a change is made, React uses virtual DOM, lightweight representation of the actual DOM and compares it with the previous version.

It then points the differences amongst the two versions and updates only the required parts of the actual DOM. This process, called "reconciliation," is much speedier than re-rendering the entire DOM, and maintains responsiveness and efficiency of the application.

Here's a simple example that shows how to create a simple React component:

In this example, we define a class component called "CustomComponent" that has an initial state of count: 0. We have also defined a method 'handleClick' that adds the count by one when a button is clicked. The render method returns a simple user interface to display the current count and a button to increment it.

React updates the component's state and provoke a re-render of the component, When the button is clicked. React, then updates the virtual DOM and performs a reconciliation process (diffing algorithm) to specify the limited set of changes required to update the actual DOM.

React components are usually formulated using a blend of JavaScript and a syntax extension known as JSX, that allow the developers to write HTML-like code into their JavaScript components. Which makes it easier to envision and work with the component structure.

React can also be used in combination with other libraries and frameworks, such as Redux for state management, React Router for routing, and Axios for handling HTTP requests. ReactJS can be used as a core building block for building robust, full-featured web applications.

| *How react Native works? * |

React Native is a JavaScript framework mainly utilized for building mobile applications for iOS and Android devices. It allows developers to create JS components that maps with native UI components on each platform.

Here's a simple diagram that shows how React Native works:

How RN displays visuals to the native platforms?

To represent the visual appearance, React Native component renders and creates a tree-alike structure of native UI components. These components are specific to the platform, such as UIKit for iOS and Android's built-in UI widgets.
Just alike React, RN uses virtual DOM, but to generate native UI components to target each platform. This approach allows React Native applications to acquire a native look and feel, while still using a same code base across both platforms.

Here's a simple example that shows how to create a simple React Native component:

In the above example, we defined a functional component called CustomComponent that has an initial state of count: 0. We have also defined a function of 'handlePress' to increment the count by one when a button is pressed. The component returns a simple user interface to display the current count and a button to add it.

RN updates the CustomComponent state and provoke a re-render of the CustomComponent om pressing the button. React Native then updates the native view and APIs to reflect the updated UI.

Additionally, React Native offers a set of pre-built components for handling common tasks, such as navigation, layout, and styling. These components are intended to be cross-platform, i.e, they work same on both iOS and Android.

RN also renders a bunch of APIs to allow developers for accessing native device features, such as the camera, accelerometer, and GPS. Benefits of a shared code base and rapid development cycle.

| What is difference between ReactJS and React Native? |

React JS and React Native are both JavaScript frameworks that were developed by Facebook. However, they fulfil different purposes.

To summarize, React JS is used for developing web applications, while React Native is made use for building mobile applications. While they share similar syntax and concepts, hence its cleared from above difference, they are two distinct frameworks with different use cases.