React Native is the hot topic these days for building mobile apps. It helps build apps for both iOS and Android with almost same codebase. Since being an Android developer myself I wanted to learn RN but had no experience in Javascript. So I searched for where to get started and came with some useful resources. This is how I learnt RN.
Since I didn't liked to learn from video courses, I mainly focused on tutorials that provide built-in editors and blogs.
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 learn 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 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 functions, classes, destructuring, const and let keywords, Promise, template strings, module imports, rest and spread operators. You can learn about them here
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 and what are props and state
Flexbox
React Native uses Flexbox layout style to render views in a much easier and responsive way. I felt a bit difficult to understand the concepts of Flexbox, but 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.
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. I started with a Todo app. Avoid using any libraries at first. Try to use what you learnt so far to build a basic app or atleast complete a few screens. Once you complete that, learn to use 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.
If you are a iOS/Android developer and learnt React Native, share how you learnt React Native as comments below.
Top comments (2)
Hi, @Srijith your article is really interesting to gain all the knowledge related to the React Native. Here is one more interesting article that I would like to share with your readers regarding the React Native Editors. This article consists of all top editors available in the market So, this would be the best resource for the one to choose the best editor for their development.
Resource: icicletech.com/blog/top-10-editors...
Good stuff! Some more React Native tutorials!