Going from React to React Native
Now a days a company needs a mobile app to compete and so there is a demand for mobile developers. One of the main problems with this is if you want native mobile apps, you need a different codebase for IOS and Android and that is expensive and makes for longer development. This has caused a spike in popularity in cross-platform mobile app frameworks like React Native and Ionic. Today we are gonna look at React Native because a lot of us are very familiar with React and while there are some big differences, as a React developer you should feel right at home.
React Native is a framework that is built off of React, so it is of course written in JavaScript. The idea is it lets you use you component based UI that you’re used to and when you’re done, it compiles it into native code; Swift for IOS, and Java for Android. While obviously native code will always be optimized for performance, for most purposes this framework lets you make cross-platform mobile apps with almost a 94% shared codebase. It also lets you integrate native code if you’re familiar. The first step for React Native is installing XCode SDK and the Android SDK. You may also want to download the associated ides so that you can use their platform simulators to see and play with and test your app.
Unfortunately you must be on Mac to write for IOS as XCode is only available on Apple products, but you can use React Native to write Android on Windows.
https://developer.android.com/studio#downloads
This tool will help you build out a basic boilerplate React Native app just like npx create-react-app
$ yarn global add create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ yarn ios //or yarn android depending on which you want to buildRight away you will see some similarities and differences and I will go over a few. So obviously the framework is built in React, so a lot of things like components, props, state, and component lifecycle methods are gonna stay very similar. There are also many React libraries that you can use in Native as well. Redux is one very popular tool you can easily implement. React Native still uses JSX files so the syntax will be very similar. One thing that is going to change is your use of HTML like divs. React Native has a set of basic components that you’re going to have the learn the ins and outs of. They represent some of those basic building blocks. Things like Image and TextInput.
As you can see in App.js, we have a function based component that returns what is getting rendered. The components just looks a little different is all. One big difference is that we no longer use CSS for our styling. We are going to use React Native’s built in style functionality by creating StyleSheets for our components in the JSX.
We create a StyleSheet that has a bunch of objects to hold styles, which we can then reference inline in our app. The syntax is going to be very similar but there will be some new things and differences to get into so of course I will link the documentation. The more you play around with it, you’ll find it is not as hard and scary as it seems and you’ll be making mobile apps in no time.
Some challenges you will probably face is debugging. Because you have React, you can access some of the browser’s debugging tools which will be a great help. Another challenge will be routing. It is a bit more complex than the React Router (which I thought was complex enough?!?!) and so I’ll recommend looking into React Native Navigation. React Native, while growing in popularity, obviously won’t have as much developer and community support and resources which always makes finding help a little bit harder.
Overall transitioning from React shouldn’t be too crazy of a stretch, as conceptually there isn’t much more to learn. Looking at how React Native actually works is very cool and can help your understanding to use it to it’s best ability. There really isn’t a replacement for native mobile development and if you really want to be a mobile developer, you should learn the native tools. Learning some of the native tools can even help you in your React Native endeavors. There are performance drawbacks to React Native, but for most apps, you’ll never face too much of that. As always best way to learn is to start playing around with it.
