Difference between React Js and React Native.
Published: 2022-07-25 22:03:21

Since it can be used for Android and allows us to create cross-platform mobile apps, React-Native has been around for almost two years and has grown to be a highly intriguing framework. A few contributors additionally modified the framework to create desktop applications for Mac and Windows, which is really fantastic.

While React-Native and ReactJS are somewhat comparable, there are certain distinctions that you should be aware of before beginning to develop your first native application. i also learnt how to utilize React-Native and created a few native apps using this technology, I'm going over the key distinctions I've noticed in this blog.


   ****SETUP AND BUNDLING**
React-Native is a framework, and ReactJS is a Java script library that you may utilize on your website. When beginning a new ReactJS project, you'll presumably pick a bundler like Webpack and try to determine the bundling modules you'll require for the project. You get everything you need and probably don't need anything else with React-Native. When you begin a new project, you'll quickly realize how simple the setup is. You simply need to execute one command line in the terminal to get everything set up and you'll be good to go. With ES6, a few ES7 features, and even a few polyfills, you can begin developing your first native app right away.

You will need to install either Android Studio (for Android) or Xcode (for iOS, on Mac only) on your computer in order to execute your program. You have the option of running it directly on your own devices or through a simulator or emulator of the platform you want to utilize.



**DOM AND STYLING**

Instead of rendering the app in HTML, React-Native offers substitute components that function similarly. The native iOS or Android UI components that are rendered on the app are mapped by those React-Native components.

The majority of the given components may be translated to something equivalent in HTML, where a View component is comparable to a div element and a Text component is comparable to a p tag, for example.

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.intro}>Hello world!</Text>
      </View>
    );
  }
}

You won't be able to reuse any libraries you previously used with ReactJS that render any form of HTML, SVG, or Canvas because your code isn't rendered in an HTML page. Although React-competitors Native's may exist, react.parts offers a Native category where you may locate what you're looking for.

Your React-Native components must be styled using Javascript stylesheets. CSS looks like it, but it's not quite the same. This can be very perplexing at first, and you might wonder how to do things like create mixins like you would with SASS or how to change the look of a component you wish to reuse. Then it becomes clear that React-Native cannot be styled the same way because it is not built from web elements. Fortunately, you will probably discover alternate options to help you achieve your goals.

const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
	content: {
		backgroundColor: '#fff',
		padding: 30,
	},
	button: {
		alignSelf: 'center',
		marginTop: 20,
		width: 100,
	},
});


I'm not sure about you, but despite Flexbox's long existence, I've never been fully immersed in its use, primarily because the projects to work on might  require backward compatibility with earlier browsers. There is no better way to create a beautifully responsive app using React-Native than to use Flexbox. It can be challenging at first because it doesn't always behave as CSS would, but if you learn the fundamentals, you'll get the hang of it quickly. Understanding React Native flexbox layout is a great article to read to understand more about it.

**ANIMATIONS AND GESTURES**

CSS animations are no more! You'll need to learn an entirely new Javascript animation technique if you use React-Native to animate the various app components. Utilizing React-Animated Native's API is the suggested method for animating a component. It can be compared to the well-known Velocity.js Javascript library. It may be used with many forms of Easing and allows the creation of various animations that are timed or based on the velocity of a gesture. In general, you may create almost any type ofanimation on the web. In addition, React-Native has LayoutAnimation, which is actually extremely cool and easy to use for transitions but currently only works for iOS due to Android's lack of support. animation on the web. Additionally, React-Native has LayoutAnimation, which is actually very useful and easy to utilize for transitions but currently only works for iOS due to Android's poor support.

React-Native offers the PanResponder, which is akin to the Javascript touch events web API, to interact with user motions. Things can be discouraging to get it going, but once you do, you'll see it's really not that difficult. To enable the touch handler on a View (or Text or Image) in your component, the PanResponder must be assigned to that View. From there, you may use a number of functions provided by the PanResponder to catch the various touch events, such as onPanResponderGrant (touchstart), onPanResponderMove (touchmove), or onPanRelease (touchend). With those functions, you'll have access to the native event and the gesture state, which includes details about all of the touches and their positions as well as the total distance traveled, the velocity, and the point of origin of each touch.

The primary challenge with the PanResponder, in my opinion, is choosing which of nested views or components with their own PanResponders should be given control of the gesture. This article can be quite useful if you want to understand more about Animated and the PanResponder: PanResponder-based Animated API for React Native.

**NAVIGATION**

I was unsure about how to switch between two scenes when I first started developing my first mobile app using React-Native. The first thing I did was look for a substitute for react-router, the well-known framework used by the majority of React web apps to switch between pages. I discovered a few libraries that perform comparable tasks, but each one I tried had a flaw that I didn't like: either it was difficult to use, the animations weren't to my liking, it wasn't fully customizable, or it didn't behave or function as intended on both Android and iOS devices. When I started to explore how navigation actually worked, I discovered the React-Native Navigator component. I ought to have gone to.


The Navigator component will provide you everything you need to manage the transition between scenes even if it may initially seem a bit difficult to use because most mobile apps don't have as many scenes moving in every direction as a web app would. I believe you should stick with Navigator unless you are developing a really complex mobile application that needs a lot of different sceneries and you are concerned about getting lost at some time. You can also take a look at NavigatorExperimental, however I don't think it's yet ready for usage in actual production.

**PLATFORM-SPECIFIC CODE**

It can occasionally be a bit daunting to design an app for various platforms using the same set of code, and your code will start to look ugly quickly. If you've ever coded for modern browsers and needed to make things seem "not too terrible" on older browsers, you've probably encountered similar problems. You may have even added a few bits of conditional logic here and there to your CSS or Javascript.

It's crucial to be aware that the user interface and experience for iOS and Android may need to differ when developing a Native app. This article succinctly explains it: designing both for iOS and Android.

You have two options if you assume you have control over the appearance and behavior of your app:

As long as it maintains its usability and doesn't perplex users of either platform, you can create a universal design for your app so that it seems precisely the same on both.
A new DOM, stylesheets, and possibly even alternative logic and animations can be defined for each platform in order to adhere to the UI and UX guidelines of that platform.
If you choose the second option, React-Native can identify the platform you are using to run the code and load the appropriate code for that platform. The basic functionality of your components should be defined in a single file named index.js, and the presentational components should be defined in separate files. both iOS andAndroid users will have access to index.ios.js and index.android.js files, respectively.

If you set up your folder structure in accordance with my advice, it will appear as follows:

/src
  /components 
    /Button
      /components
        /Icon
          /index.android.js
          /index.ios.js      
        /Content
          /index.android.js
          /index.ios.js
      /index.js.

You can utilize the Platform module with a conditional statement if you believe that having two different files is too much work for very little changes.

**DEVELOPER TOOLS**

It's very fantastic, in my opinion, because React provides a few developer tools out of the box when you start a new native project without the need to install anything. When you need to make minor adjustments to the styles of your app, hot reloading is an option and a useful tool to use. I typically prefer to utilize Live Reload, which completely reloads your app as you make a change in the code, for larger changes that have an influence on the app's logic.

The flexibility to use the majority of developer tools that you use with ReactJS is another attractive aspect of working with React-Native. Chrome Dev Tools performs admirably when it comes to inspecting network requests, displaying console logs, and stopping code on debuggerstatements (although you do need to add a small trick to see the requests). Even better, you can check the status of your Redux store using the fantastic Redux DevTools. The ability to investigate the DOM as you would on the web is one feature, though, that I regret the most; the native Inspector is unquestionably inferior.

**PUBLISHING**
Learning how Xcode and Android Studio operate will be necessary if you plan to create apps for both iOS and Android. This will help you ensure that everything is set up correctly before releasing your app for the first time on the Google Play or the App Store. On iOS, it deploys exactly like a typical native app, however on Android, you must sign your APK before uploading it to Google Play, in accordance with React's advice.

If you miss being able to deploy code directly using a single command line, like you would be able to do with a web application and a well configured VCS, you can use the fantastic Code Push.
without needing to archive, submit, and wait for the store to accept your app. directly to the user. Code Push is excellent for little tweaks and bug fixes, but it is not suggested for adding brand-new features.

**WRAPPING UP**

A conclusion
Today's use of React-Native is fantastic. It's incredibly quick to have an app ready; I've been using it for a little under a year. Complex user interfaces may be created just as quickly as with ReactJS, and they often function fairly well on both iOS and Android. It's just a different approach to use React, therefore I believe the learning curve from ReactJS to React-Native is rather low, especially if you enjoy learning new Javascript frameworks.

React-Native has a large and expanding community, the technology is not going away any time soon, and I would strongly advise any web developer looking to build a mobile app to forgo Cordova and give it a try instead.

Have fun!
more articles will be coming to you soon hope you find your solutions and give me a feedback on my article on dinofidelis@gmail.com.