How to learn React Native – For Android/iOS devs

This post was originally posted on dev.to

React Native is the hot topic these days for building mobile apps. It is a Javascript framework for building mobile apps for both iOS and Android with almost same codebase. Unlike other hybrid frameworks it provides great flexibility for developers as they can write same code for both platforms as well as platform-specific code. React Native provides most of the native features of each platform. Since it has a huge community you can also find libraries for almost anything you want to implement.

If you are an Android or iOS developer who want to learn React Native then this blog post is for you. Here I’ll tell you how you can learn it easily. This is how I prepared to learn React Native.

Basically I didn’t wanted to learn from video courses. So I mainly focused on tutorials that provide built-in editors and blog posts.

To learn React Native you must know about ReactJS, since React Native is based on ReactJS - a web framework for building front-end. And since React is based on Javascript you must know Javascript.

So to start you must know the basics of Javascript.

Javascript

I found Codecademy’s Javascript course useful to learn the basics of Javascript. Then learn about ES6 features. ES6 or ES2015 is a Javascript standard which provides new standards and features in Javascript. Learning ES6 makes it much easier to write React and React Native code. You should be aware of some mostly used ES6 features like arrow functionsclassesdestructuringconst and let keywords, Promisetemplate stringsmodule importsrest and spread operators. You can learn about them all here.

Also learn about the different functions available for Arrays from MDN website. There are several helper functions available for many functionalities like creating new array from another array, merging two arrays, filtering items from array, etc. It will be very handy since it eliminates writing boilerplate code.

ReactJS

Once you understand them, start learning ReactJs. You can get started from the official website as it is well documented and has a tutorial to build an app. Use your ES6 features here to get used to it.

The main things you should have learnt after completing the tutorial are Lifecycle of a React Component, JSX syntax, and what are props and state.

Flexbox

React Native uses Flexbox layout style to render views in a much easier and responsive way. It’ll a bit difficult to understand the concepts of Flexbox, but once you understand it will be very easy to use. I recommend reading this guide to know all about it. You can keep it open in a separate browser tab so that you can go and refer it whenever you face any difficulties. You can learn by doing through online editors available like this and this.

***

If you clearly understand all the above concepts, then it’ll be very easy to learn React Native.

Also choose an editor of your choice to code. I personally prefer Visual Studio Code. It has some great features and a whole lot of extensions to make it easy to code.

Now you are ready to learn React Native. Go to their official website and go through their getting started guide to build a sample app. Read all the basics provided in the docs.

Once you get an idea of how to build an app, start doing a demo app to apply all the features you learnt. Avoid using any libraries at first. Try to use what you learnt so far to build a basic app or at least complete a few screens. Once you complete that then try some libraries.

While choosing libraries, always decide on the ones that are well maintained and recommended by the official docs.

Since an important function in mobile app is how to navigate between screens, it is important to know how it’s done in React Native. As of this writing, RN recommends to use libraries like ReactNavigation and React Native Navigation to use same code for both Android and iOS.

Go through their docs and apply the library in your demo app.

Finally learn how to build a Release version of your app.

After all the basics, learn some advanced libraries. For instance, state management libraries like Redux or MobX. They provide better ways to manage app states and better ways to test your app.

That’s it. If you came up to this stage, then you are ready to build a production ready app.

Bonus Resources

https://medium.com/the-react-native-log

https://medium.com/react-native-training

https://medium.com/engineering-housing/how-we-built-our-react-native-app-3380a33811ac

https://blog.geekyants.com/building-a-twitter-clone-app-in-react-native-48116a93e906

http://makeitopen.com/

Community Support

Facebook Group

Reactiflux chat

Newsletter

http://reactnative.cc/

* * *