How I started learning React-native as a web developer

Being a web developer, I also wanted to get my hands on app development. The best solution for a web developer to create mobile applications was diving into the world of hybrid apps, which I believe were pretty cool. Creating app in my favourite & familiar technology stack was exciting which didn’t last long. We all know the obvious reasons. Then came the idea of React-native. Creating a cross-platform native mobile application entirely in technology stack I am familiar with. I quickly realised the potential of this market. I started my journey to React native.

Early Days

The early days were really confusing, mostly because of lack of good learning resources. The most confusing were some of the native methods that varied according to ES5 and ES6. I would start coding in ES5 then use methods like componentWillMount() which obviously would throw error and sometimes I would use getInitialState() with ES6 standards. This seems very stupid right now but it was one of the most challenging part initially. When I overcame this hurdle next came state and props, the top down approach and components based UI which didn’t take much. Then the favourite of all the styling and flexbox, being a web developer you are going to enjoy this most. Creating a good UI would be a piece of cake for you. The syntax are familiar and you will feel right at home.

Network calls

After getting hands on UI its time to load dynamic data to your app. We have tons of ways we can load data in web, while searching for the ways to make network calls, some suggested to use flux architecture some suggested redux, which I had no idea about at that time. So, I again switched to Facebook’s official documentation which I had been following since start the easiest method was to use fetch, without trying to overcomplicate my learning process, I used fetch to make network calls and update my states and props. Everything’s good.

Initial Apps

Now it was time to create something to test my skills. I started creating a simple to-do app which I recommend to the beginners as its very simple to create one. Still no use of famous flux architecture. The first app was okay better than expected. The next few apps were:

1. Weather App: A simple app that fetches the weather of user’s location, with text-based query (not geolocation). Design using StyleSheet, Network calls using fetch. API used http://openweathermap.org/api
2. News App: A simple news app that loads the sources and shows the latest news. Designed entirely using the StyleSheet, Network calls made using fetch. API used: https://newsapi.org/ .
3. Wallpaper App: An app that shows user high quality random wallpapers every time. Designed using: StyleSheet, Network calls using fetch, API used: https://unsplash.com/ or https://pixabay.com/ (for search based wallpaper app). You can refer to Building your first IOS app tutorial, but I would recommend you to try this yourself.

Need of Library

By the time you create few apps and understand the basics, you start getting frustrated every time you create styles. We as a web developers have tendency to use frameworks and libraries to make things easier. We start feeling the need of bootstrap / material framework in react-native instead of coding the same design repeatedly. My initial search resulted in these options: Nativebase, Ignite, Pepperoni and Snowflake. Each had their own pros and cons. And the React-native community is divided in choice. Ignite seems to gaining popularity compared to others. For a beginner I would suggest to use Nativebase not because it is better than other three but it is very easy to learn for a person with web development background. But the choice is entirely up to you. Now the UI is part seems easy to work with.

Flux and Redux

As your application gets larger it becomes very difficult to manage data flow. The application becomes unpredictable and unmanageable. Then comes the need of Flux, which is very confusing at first. Maybe due to the lack of proper resources or the different architecture than we are used to. The article A cartoon guide to Flux by Lin Clark is one of the best I found on basic concepts of Flux. Try implementing the flux architecture without redux, then with redux. That will get you a good understanding of the architecture.

What’s Next ?

Now with the basic concepts under the belt it might seem the right time to start the big project, but not yet. You need have your standard coding style which is efficient. I would suggest you to look up Facebook’s tutorial on F8. Read a book: Mastering React Native, this book is a refresher for you, it will guide you to build a complete application from scratch while explaining the concepts behind why and how each component is used. Next on your bucket list should be Code Push, which might seem unnecessary at first but is very helpful in long run.

Check few repositories on github to get the idea of standard code writing for react native. Airbnb has blog about how they created airbnb mobile app. Check out Deco IDE by Devin Abbott, it’s still in early phase but has a huge potential to make life easier for developers. And keep updating your knowledge because there are lots of changes and improvements in coding styles as the community grows. There are many things I haven’t mentioned here, this is just a basic guide to getting started. Mention some helpful tips or books that will be easier for a beginner to learn react native faster.