What you should know about Reactjs if you are a mobile developer
Tags: react, javascript, mobile, webdev
Published: 2021-05-11 17:07:46

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*.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lhrk8ktmej9m209429h.jpg)
<p>&nbsp;</p>
## 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_](https://sofienebk.medium.com/what-is-the-difference-between-a-framework-and-library-2b712a1a1c41), 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*](https://nextjs.org/) 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_](https://www.codeinwp.com/blog/react-ui-component-libraries-frameworks/) you might have met in mobile development that, combined with some [*JSX*](https://reactjs.org/docs/introducing-jsx.html), 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mwpa2ui21qiz3fdgu1y.png)

### 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:

```javascript
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*:

```javascript
.title {
    color: #32A287;
    font-size: 2.5rem;
    decoration: none;
}
```

This must be imported from the `.css` file to be able to use:

```javascript
import styles from "../styles/Home.module.css";

...

return <div className={styles.title}>This is a styled title in Reactjs</div>
```

<p>&nbsp;</p>
## 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! ;)