I like building mobile apps, it’s one of the few sectors of software development where a one-man team can still build something functional and useful in a relatively short amount of time.
I started off building mobile apps using Android Studio and Java and I think that it’s good to learn native development tools and will definitely come in handy. But for a one-man team it makes much more sense to develop hybrid apps, like React Native
I’ve also been doing React.JS at my job and learned enough basics to support our current project and add features to it. So recently I decided to dive head first into React Native. Because of my background with React.JS, it was relatively easy to start building simple apps with it right from the beginning.
So here are things that are the similar and different between developing in React.JS and React Native. I’m by no means an expert yet, so my observations might be incomplete.
Things that are the same
Language(duh!)
The first item might be obvious but is still important enough to mention it. The development language is the same in both libraries. They both use JavaScript and JSX as their main building blocks.
Redux
If you know Redux and love working with it, I have good news for you. Redux is just as crucial for React Native as it is for React.JS. Moreover, you can use Redux to setup offline persistence storage for your mobile app.
Third party libraries
A couple years ago one of the reasons to shy away from React Native was a relatively small amount of helper libraries developed for it, especially compared to the native development platforms.
However, today React Native has tons of useful libraries to help you with UI elements, animations, and etc. React Native might not have quite the same amount of libraries that React.JS has, but it’s catching up pretty quickly.
Hot reload
Native development environments require you to rebuild the entire package and restart the app to be able to test your updated code. That’s a huge waste of time, but fortunately hot reload can you save it for you.
Both React.JS and React Native have a hot reload functionality that makes the development process that much faster. A lot of web frameworks have hot reload nowadays, but when it comes to mobile development, this single feature might be enough of an argument to start developing mobile applications with React Native.
Things that are different
Now that we talked about the similarities between two libraries, let’s talk about their differences.
Setting up the environment
This is the first drawbacks of developing with React Native. Unfortunately, setting up the environment for development can get quite time consuming.
You’ll have to install and setup both Android Studio and Xcode, configure your emulators, environment variables and etc.
Spawning a new project with React.JS is a lot easier. All you have to do is install create-react-app, run a command and you’re good to go!
No HTML
This was a bit of a surprise for me. Turns out you can’t really use standard HTML tags when developing for React Native. Instead, the library provides you with a set of functional elements that you can use as building blocks for your application.
When you think about it, it makes sense. Under the hood, the library still compiles React components into their native app equivalents, which would be tricky to do with HTML tags.
No CSS
Another restriction from React Native. There’s no way to use css styling out of the box since there’s not concept of classes. You can achieve a similar setup by installing external libraries and using their workarounds.
But it wasn’t much of an issue for me since there’s still a convenient way to style your elements. Every React Native component has familiar style attribute, which let’s you use JavaScript styling objects to style your elements.
Flexbox
While in web development you have tons of different layout techniques and tricks available for you, in React Native your best tool will be Flexbox. And that’s not a bad thing, Flexbox is an excellent tool for building layouts, and in my opinion better than the tools available in native frameworks.
However, Flexbox in React Native is a bit different from CSS Flexbox. Differences are subtle but they are still there. One of them, for example, is the default value for most of the properties.
Page Navigation
In React.JS we have an obvious go to library for navigating between components that became pretty much the industry standard, React Router .
With React Native, things are not as simple: there’s a few different libraries for setting up routing in your mobile app, and each one of them has a distinct API that you need to invest in learning to be able to use it.
The most popular ones are: react-native-router-flux , react-native-navigation and react-navigation. Note: React Router does have a library for React Native, but it’s somewhat incomplete and might not work for you if your app is more complicated.
Expo and Native CLI
This was the biggest source of confusion for me. There are two ways to create a React Native project: using Expo and Native CLI.
To be clear, Expo is not developed by Facebook and yet they do add it to their official Quickstart guide .
I suggest using Native CLI over Expo, since the latter has a lot of limitations when it comes to the features you can add to your app, you can read about them here . Plus it adds another layer of abstraction to already abstracted code base.
Conclusion
I’m sure I didn’t catch all the differences but these are the ones that stood out for me the most.
The core logic and syntax of both libraries are the same, so not surprisingly, it’s easy to start working with React Native if you’re familiar with React.JS. I hope this short article will encourage you to give it a try.
If you’d like to get more web development, React and TypeScript tips consider
following me on Twitter,
where I share things as I learn them.
Happy coding!
