What is the difference between building web and mobile applications using React?

react-differences.jpg The differences between React.js and React native have been on for some time now and new React developers are asking if react is best for their project.

It is also worthy to note that these differences help new React developers to get a grip on how they can use the skills to develop Web and Mobile apps. I have my reservation choosing the right front-end framework and coming from a web background with Php, Javascript under my belt. I was sceptical at first about React, yet it ends up being the best decision I took. It state management and virtual dom are seamlessly fast and easy to manage.

Take a chair :( and let us breeze through some differences between React.js and React Native.

There is no HTML or CSS in React Native. You can’t use tags such as ‘div’ and ‘p’ to organize your content.

Hello World in React Native

<View>
<Text>Hello, world!</Text>
</View>

Hello Word in React.js

<div>
<p>Hello, world!</p>
</div>
  1. You can’t include .css files rather you can create a stylesheet abstraction. React Native provides alternate ways to do the same things. Components replace tags and you have to write your styles in JavaScript files. For example, ‘text’ replace ‘p’ and ‘background-color’ becomes ‘backgroundColor’ to follow the camel case convention we use in JavaScript.

StyleSheet is an abstraction in React Native

import React from "react";
import { StyleSheet, Text, View } from "react-native";
const App = () => (
<View style={styles.container}>
<Text style={styles.title}>React Native</Text>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: "#eaeaea"
},
title: {
marginTop: 16,
paddingVertical: 8,
borderWidth: 4,
borderColor: "#20232a",
borderRadius: 6,
backgroundColor: "#61dafb",
color: "#20232a",
textAlign: "center",
fontSize: 30,
fontWeight: "bold"
}
});
export default App;

Include CSS in React.js

Button.css

.Button {
 padding: 20px;
}

Button.js

import React, { Component } from 'react';
import './Button.css'; 
// Tell webpack that Button.js uses these styles
class Button extends Component {
 render() {
   // You can use them as regular CSS styles
   return <div className="Button" />;
 }
  1. Since there is no CSS, you can bid farewell to CSS animations. You can use React Native’s Animated API for animations.

Animation in React Native

Animated.timing(fadeAnim, {
toValue: 1,
duration: 5000
}).start();
  1. Since you aren’t building on the web, there is no web inspector. You can’t test something in your browser before making changes to your code because there is no browser. You have to make changes to your code directly and React Native reloads the application for you. You will need an emulator running to test the react app since you can’t test in your browser. Since you can’t test your app in the browser, you will need to have an emulator running. If you are building for both Android and iOS, you need Android Studio and XCode. Although, with the introduction of Expo native apps can now be viewed on web browsers.

  2. Instead of routing to different web pages, you are navigating between different scenes of your application when you use React Native. You will have to use the Navigator (or NavigatorIOS for iOS) component provided by React Native for that.

Navigation on React.js

import { createSwitchNavigator } from "@react-navigation/core";
import { createBrowserApp } from "@react-navigation/web";
const MyNavigator = createSwitchNavigator(routes);
const App = createBrowserApp(MyNavigator);
// now you can render "App" normally
To render a link to the "Profile" route:
<Link toRoute="Profile" params={{ name: "james" }}>
Jamie's Profile
</Link>

Navigation on React Native

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
const MyStack = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen 
name="Home"
component={HomeScreen}
options={{ title: 'Welcome' }}
/>
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};

We might not have covered every aspect but I hope you learnt something new. Thanks for reading and do not hesitate to ask any question if you have any.

No Comments Yet