Switch Between React and React Native

Some of us, web developers, regularly experience an impression, that we’re missing out while not having an easy time when we have an idea to make a native app. We know we won’t be able to build them in an efficient and safe way using the skills we have. Switching between languages we know little of such as Swift or Java makes the barrier even greater.

Luckily, since March 2015, there is React Native (or RN as it is referred to in this article)! It uses the same concepts as it’s older brother React.js and builds a bridge for web developers.

Writing a native app that doesn’t use WebView like Cordova, makes the effort more legit. Cordova from the beginning seems to be a bad choice because of its poor performance and many limitations. It’s no accident that we’re writing this as if React was a standard for web development, looking at current data it seems to be so.

So learning React Native apparently is the best way for a web developer to learn how to create a native app for Android and iOS. We can painlessly transfer the components concept and our React thinking. We’ve already made the effort to build a mental model Redux data-flow, so we can make another use of it! All this looks very promising, so how can we begin?

Let’s start with some theory to bring a little bit of understanding to the table and then make a plan for practice. First, as previously mentioned, there are many similarities between React and React Native as they both use the same design.

The ideas we’re familiar from React are:

Additionally these, that come optionally with React:

A simple RN component that actually should be rewritten to functional component.

From the beginning we have the impression that we’re home and there is nothing difficult we haven’t already learned.

Nevertheless, there will be some surprises. Here is a list of the main differences:

So here comes time for the ultimate question: is React Native more difficult than React?

We think it is! From our experience, you can expect a smooth learning curve, meaning it’s not tough to advance. However, there is a hidden major pain in the arse, the complex toolset.

Don’t expect your 2015 MacBook Air to be fast enough for native development. It won’t be! That’s the difference between mobile and web. You need a really strong machine, to profit from the watcher and debugger, to run the emulator, xCode and Android Studio (although the last one might be closed).

Setting all of it up and maintaining the environment is much more painful than in web development, so don’t expect writing apps in RN to be easy.There is one interesting positive side effect of it. Writing tests will make your life a lot easier, so for the lazy among us, there is now a true reason to finally learn how to write them in a systematic way. Testing a web app manually usually takes much less time than a native app; reloading it is slow and reinstalling the app is required too frequently. Another story comes with deploying a RN app, long story short there will be dragons.

Answering to the differences, we can create a learning plan which will prepare you to write your first RN app or join a project using this technology:

Source: https://www.flickr.com/photos/7447470@N06/5401825482

Learn Flexbox well! There is a very good tutorial, that covers all of it. Personally, I’d love it, the narrative makes it straightforward and a lot of fun.

Wrapping up, we believe learning React Native is a relatively low-effort way to start developing native apps for a web developer. Getting specific knowledge for RN takes some time, although the basics are already in your head if you encountered React before, so it won’t be that challenging as learning a new language and new frameworks.

Don’t panic when you see how things work in cross-platform mobile development and how to setup an environment, as you might be used to relatively simple webapp environments. After one or two weeks you’ll get used to how things are.

Notes from the author (and developer):

If you’re interested how I continued learning, after completing the checklist above, I’m using quality tutorials from Egghead. I highly recommend them, because they are focused on practice and delivered by highly experienced developer and tutor Jason Brown, author of code daily.

The idea of this article is was to facilitate the switch between React and React Native for a React developer. That’s all for now, thanks for reading and good luck with your first React Native app!

We’d Love To Hear From You

If you’re interested in hiring an epic development team, drop us an email (hello@appnroll.com) so that we can schedule a call.

Is there anything you’d like to add, have we missed anything? Have you ever tried to use React Native to build an app? Would you like to?

Please feel free to share your experiences with us in the comments below or via social media (send us some photos or videos too), you can find us on Facebook, Dribbble, Twitter, Instagram, Behance and Pinterest, let’s connect!

To learn more about App’n’roll, take a look at out our website and our other posts. If you enjoyed reading this article, please share and recommend it!

All images appearing on this blog post are the property of their respective owners.

Originally published at https://www.appnroll.com on June 4, 2018.



Venture builder. Having fun building scalable businesses. www.appnroll.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store