If you are a Mobile developer, it is very likely that, at some point, you will be asked to switch to web development, or even to develop an hybrid app.
Has this already happened to you? You surely have noticed that there are a few differences between each type of app that you should consider before facing a new web project.
In this post I’ll try to show some of those differences as we can see the similarities we can find among them.
The great similarities between this two tools are most related with the fact that React Native is a framework that implements Reactjs.
Some of the main diffs
These are some of the most visible things you’ll notice at first glance once you switch to Reactjs.
However, I’m not making the deepest possible comparison here, so some of you guys will probably find a more consistent way to make an intensive comparison.
Anyway, I think you will find some of these points quite useful.
At first, something important here is that, as React Native is a framework, you should have almost everything you need to develop an app from scratch in it. This is something that won’t happen with Reactjs, which is just a JS library.
What does it mean? Basically in React Native you use some features and components that are integrated with the framework and are not able outside it.
For example, in RN you use react-navigation to switch between your app screens, which is something that we won't have in Reactjs, so it may be replaced by the implementation of Nextjs and its router.
Or remember the <FlatList> component? That is also a RN component, so we'll need to use a Map instead.
However, I didn’t say that external libraries implementation was forbidden or something. Even more, something that won't happen in Reactjs is that, unlike RN, the components style won't differ according to the OS nor the platform they are rendered in.
And that's the point where you'll be pleased to know that there are some Component Libraries like Chakra, Bootstrap and many others you might have met in mobile development that, combined with some JSX, will allow you to display your web app quickly.
The components
Another thing you should know is that, unlike React Native, Reactjs uses a virtual DOM that compiles your javascript code to HTML and renders the app.
This doesn’t happen in RN: here you don’t have a thing like a DOM, and the React-Native components are formed only by JSX.
You will notice that HTML thing when you try to debug your app in the browser, so if you have skipped the basics, it is time to start reading.
In Reactjs, for example, you won’t have a
<View>component, so you should learn what a<div>is.
The styling
What happens with the CSS? Are you used to the React Native StyleSheet class? Forget about it, it won’t accompany you anymore in Reactjs.
This is how you style a component using a React Native StyleSheet class:
const styles = StyleSheet.create({
title: {
color: #32A287,
font-size: 2.5rem,
text-decoration: none,
}
});
return(
<View>
<Text style={styles.title}>This is a styled title in React Native</Text>
</View>
)
And this is the way you will do the same using basic CSS:
.title {
color: #32A287;
font-size: 2.5rem;
decoration: none;
}
This must be imported from the .css file to be able to use:
import styles from "../styles/Home.module.css";
...
return <div className={styles.title}>This is a styled title in Reactjs</div>
Are you wishing to start a web app yet or what?
As you can see, it is not that difficult to switch to web development if you’ve learned the basics of React.
Even the hardest issues are a matter of time until you get used to some new practices.
If it’s helpful to say it, when I started programming in React Native, it was very nice to avoid downloading an intricate and annoying emulator to run my code. As you are going to work with a browser, the only thing you'll have to think about is where to put your console.log’s: no Reload button, no external programs and no native APIs.
So, if you think there is no such big deal to replace a View by a div, I hope I can see the progress of some React engineers here! ;)
Top comments (0)