Jun 4, 2018
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:
- declarative components,
- state and props,
- functional components, class components and containers,
- JSX (which honestly is now the standard),
- higher order components (HOC).
Additionally these, that come optionally with React:
- PropTypes,
- Connect,
- Redux action creators, reducers and store,
- even using the same testing tools, like Jest and Enzyme.
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:
- React Native is a Framework, this means it comes together with project structure and some conventions that save us from decision making for the trade of losing some elasticity.
- Extending the point above, we get a lot of solutions out of the box.
Setting up the project is easier than setting up a React app, but after this comes learning what we’ve actually got. - There are some solutions you’ve used in React, that we won’t use in React Native. One of them is React Router. Honestly, we wouldn’t miss it. Instead we use something like Navigator.
- Styles! Here comes the funny part. There is no true HTML in React Native, and same about CSS. Instead we write a JavaScript object that contains all the styles. What’s interesting is that we have only a short list of frequently used styles as keys and values. There are good error messages in RN and they will inform us immediately what kind of styles we can use (in case our CSS is too eloquent). For example, there is no `display: block`! The only possible display is `flex` or none`, so we use flexbox to display all the elements in RN! This was a happy discovery for us.
- Platform specific code might make our components look ugly. Yes, we honestly admit that there will be more `ifs` than in React or even whole platform specific components. If you feel discouraged, there are a lot of benefits in having a common codebase, all the actions, the store, utilities, even the same structure of the file system. Believe us, it helps!
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:
- Really study what create-react-native-app my-project gave us. There is no point in learning all of it instantly, as the project needs to be delivered. Let the learning process go along writing the code and allow the knowledge to come when it’s needed to solve current problems. Using the famous gorilla — banana metaphor, we wanted the banana and we got a gorilla with it. Maybe instead of complaining, we might become friends with the gorilla after some time, and conquer the jungle together.
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.
- Study your new toolset. Learn the emulator, as there are a lot of options that can help you. Learn the difference between live reload and hot reloading, master the keyboard shortcuts, as they will save you plenty of time.
You don’t need to dive deep into xCode, although learning the basics required to run the environment and reset it will payoff shortly. - Get familiar with React Native Modules. There are a lot of them, but learning their API is not that hard, thanks to decent documentation for iOSand Android.
- Using View and Text instead of `div` and `p` tags is almost a no-brainer, Components without divs! That’s something we were looking for!
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.
