A Roadmap to Becoming a Better React Native Developer in 2018 & Beyond

Rakshit Soral

Do you want to learn React Native? I presume this is the reason you are here and I say that you’ve made the right decision! React Native, right now, is the most trending JavaScript framework for developing cross platform apps.

Though there’s a bit of a learning curve to “learn once, write anywhere”, with this blog post, I plan to give you a guide that should make learning React Native app development easy for you. You’ll probably of course find other resources not mentioned here that are also excellent, as this is just one possible roadmap.

Learn JavaScript: Free & Paid Resources

As you most likely already know and as the name suggests, React Native rests on the shoulders of the React framework. Therefore, before you dig yourself into this vast learning pool of React Native, it’s very important for you to be familiar with React.

But here’s a thing - it’s difficult to learn React without knowing JavaScript. Henceforth, I will recommend you to learn the basics of JavaScript first. Things will become a lot clearer to you once you learn most of the ins and outs of JavaScript.

Free resources to learn JavaScript

Below mentioned are some tutorials which should help you learn the basics of JavaScript:

  • Learn JS from JS.Org - If you’re looking for the most interactive way of learning JavaScript, then your hunt might end at learn-js.org. The website will help you learn the very basics of JavaScript by providing you with a lesson first and a code editor afterwards so that you can implement what you learned.
  • Mozilla developer Network - MDN has a dedicated tutorial on JavaScript which will walk you throughout the basics of the language. As you begin to navigate across lessons, complexity of the tutorial will increase from beginner to intermediate and then to advanced.
  • JavaScript fundamentals: Development for Absolute beginners - This course is part of Microsoft’s Virtual Academy. You’ll learn JavaScript fundamentals which will be applicable to develop enhanced user interfaces, web based video games and dynamic web pages.

Although there is absolutely no shortage of free tutorials online, you should not overlook the value of paid tutorials. There’s often a good reason for the price tag.

Following are some best paid tutorials you should definitely pay attention to:

  • Frontend Masters - The Good Parts of JavaScript and the Web by Douglas Crockford will help you learn JavaScript in-depth. The course is divided into 21 high-quality modules.
  • Pluralsight - Javascript Road Trip - This tutorial will lay a solid foundation of Javascript syntax and code styling in general.

Learning the Basics of ES2015+ (ES6+)

Now that you’ve mastered the basics of JavaScript, it’s time to learn the about newest version of the ECMAScript standard.

You don’t have to use ES6+ in React Native, but ES6 is the new way to go for Javascript. It can do wonders if you are building a React Native app and I don’t find any reason to not use it. With features such as arrow functions, the rest/spread operator, and variable destructuring, ES6+ (ESNext) packs a lot of features and syntactic sugar that make coding a lot more easier.

Free courses to learn ES6+

For starters, you can learn the basics and fundamentals of ES6 with some free resources available on the web. Below are my personal favorite free resources to learn ES6+:

  • Understanding ES6: Mozilla developer network series - Mozilla developer series is a great resource to make yourself aware of some smart ES6 hacks.
  • ES6 course on Pluralsight - A great course if you are not fond of reading long technical tutorials. The course is intended to teach you the basic features of the latest version of JavaScript, including the latest tools and technologies to leverage them in the browser and on the server with Node.js.
  • ES6: the bits you actually use - This short article by James Knelson will guide you on your way to understand the most important features of ES6.
  • ES6.io by Wes Bos - If you really aspire to become a ES6+ rockstar then look no further than Wes Bos’ ES6 for everyone course. Rather than teaching you the advanced features of ES6+ right away, Wes Bos will guide you towards strengthening the JavaScript basics first and then move towards ES6+ features.

Learning React

After becoming familiar with JavaScript and the ES6+ ecosystem, you’re ready to jump on the React bandwagon.

The first step to the roadmap of becoming a better React Native Developer is to learn React.js itself, which has almost the same API surface as React Native.

I’d recommend for you to learn from at least one or two tutorials so that you can grab the basics from different points of view.

Mentioned below, you will find some of my favorite resources to learn React:

Free tutorials for learning React

  • React for Beginners - Another great tutorial by Wes Bos, React for Beginners is an entertaining and step-by-step video series where you will learn how to build a simple React application with firebase.
  • React Fundamentals by Tyler McGinnis - Tyler’s courses include React fundamentals and universal React.

Enter React Native

Great! Now that you know some React, it’s the time to get started with React Native. Let’s have a look at some available courses.

Free React Native tutorial and courses

You can also have a look at our own intro to React Native for an overview of how to get started.

Investing in your own learning is a really good idea, so here are some courses that I highly recommend:

  • Egghead’s React native fundamentals - This course by Tyler McGinnis will help you learn the important pieces of React Native from building the UI to fetching and persisting the data to a Firebase backend.
  • React Native for absolute beginners - If you are a fan of Udemy tutorials, then React Native for absolute beginners is a great one to start your journey to learning React Native.

Setting Up Your Environment

Great! Now that you know how React Native works under the hood, let’s now go ahead and setup the dev environment for Android and iOS:

Learn by Building Real React Native apps

On your path to becoming a React Native developer, you’ll face some of the biggest challenges during your transition from learning code to actually building real apps. There are some free courses that are solely dedicated towards making you learn how to build real React Native apps:

Build a simple Currency convertor in React Native for iOS

This awesome free course by Spencer Carli will get your hands on developing a simple currency converter app in React Native. Each video module in this course is really concise, very engaging and most importantly it’s not sleep-inducing.

Build a dictionary app in React Native for Android

Tutsplus tutorials are a great way to build upon your learnings. One such tutorial which I definitely recommend to my peers who have just started out with React Native is about developing a dictionary app in React Native for Android. The tutorial is focused on beginners with the basics from installing the React Native for Android to finish building a dictionary app.

State Management in React Native: Redux and MobX Tutorials

State management is an important aspect in any non-trivial app. If you have a mobile development background then you must be aware that each component in an application can have its own state. When you are building a small application then it might be easier for you to manage your states using props. On the other hand, a real-world or real-time mobile app might require your state to be thoroughly accessible throughout the whole app.

Two of the most popular state management libraries for React Native are Redux and MobX.

Redux by Dan Abramov and Andrew Clark is a take on the renowned flux architecture. It’s the most widely used library for managing the global state of an app.

Once you learn to develop a simplest React Native app, you’ll need to get yourself prepared for more complex app scenarios. As your app tends to grow and become more complex, you’ll need to choose a good architecture to avoid scalability and maintainability issues in the future. This is where Redux comes into the picture.

Following are some great sources to learn Redux:

  • Learn Redux - This course consists of 20 videos that will help you learn Redux by implementing a instagram clone app using React and React Router.
  • Getting started with Redux - This a great course offered by none other than the creator of Redux itself. As you move throughout the course, Dan Abramov will teach you how to use redux within your React app.

Implementing Navigation in Your App

There used to be only one good navigation component for React Native: NavigatorIOS. It was greatly appreciated by most of the community members but it was only for iOS. Other components which were supposed to work for both platforms such as ExNavigation, and NavigationExperimental had many performance related issues that made community members.

Fortunately, Navigation in React native has improved quite a bit, thanks to React Navigation.

React Navigation

Here are some resources which should help you out in getting started with React Navigation:

  • Getting started with React Navigation - In this tutorial, Spencer Carli will show you how can you integrate React Navigation in your React Native project.
  • Using React Navigation - This article tends to fill-in the gap of explaining React Navigation from React Navigation’s official documentation.

For handling complex app scenarios, you might want to use other alternative solutions such as Native Navigation by AirBnB or React Native Navigation by Wix.

React Native Navigation

Following are the documentation and resources to learn how to setup the native navigation solutions such as native navigation and react native navigation:

Debugging React Native Apps

It’s very important for you to speed up your debugging game with the help of some debugging tools.

React Native allows you to debug your code by using the console.log() method, which should already be familiar. Aside from console logging, there are some other debugging tools such as Reactotron by Infinite Red and the React Developer Tools, which should really come-in handy.

For a simple solution to debugging your React Native apps then React Native debugger is all you need.

In order to learn how to debug React Native code by using the above tools, you can refer to the following resources:

  • Debug your React Native application like a God - In this article, Shahen Hovhannisyan walks you through the entire process of debugging React Native application using React and Redux Devtools.
  • Debugging React and Redux with React Native Debugger - This article guides you through the entire process of debugging React Native with React Native Debugger.
  • Debugging React Native using Reactotron - Reactotron is a desktop app for inspecting your React Native projects on macOS, Linux and Windows. Reactotron can be used to track your application state, global errors, sagas and, perhaps most importantly, performance. Its official documentation is a great way to learn how to use it. In case you feel that the documentation is not enough, then you can also watch this video.

Improving Your App’s Performance

It’s now time to learn how you can build high performing, high quality apps using with React Native. Here are two things to keep in mind when in comes to performance with React Native:

  • Bridge optimization - React Native works with the concept of a bridge that separates two types of thread namely a JavaScript thread and a native thread. In most cases, performance glitches occur when you need to move your components from one thread to another. In other cases, it could be due to the heavy workload on a single JavaScript thread due to complex computations such as animations.

  • Managing complex views - It should be noted that you might not need to improve performance of your React Native app if you are building an app with only a few views. However, if you have multiple views with complex navigation, it’s worth the effort to look into the app’s performance.

If you want to dig deeper into the concept of bridge and threads, you can checkout this amazing article by Tadeu Zagallo which will teach you about the internal architecture of React Native apps.

Improving React Native App Performance

Following are some great resources focused on improving the performance of your React Native app:

  • Dive into React Native performance - This article by Facebook will introduce you the most common problems that you can address when it comes to improving the performance of your React Native app.
  • Performance limitations of React Native and how to overcome them - Tal kol, software developer at Wix engineering delivered a talk on how to optimize the performance of your React Native app which is worth a watch.
  • React Native app performance issues - There’s even a list of common React Native performance issues and their solutions. The blog post by Hardik Shah not only lists these common issues, but also walks us through some solutions to solve them.

Tutorials on Testing your React Native app

After debugging and performance optimization, let’s talk about testing!

You can test your React Native application using Jest which is officially supported by Facebook. Aside from Jest, tools such as Detox and Appium can also used to test React Native.

Testing your React Native application

Following are the resources to help you learn about these tools:

Conclusion

With this blog post, I have introduced you to my list of favorite tutorials and courses. One thing I really want to emphasize with this post is that if you’re really serious about becoming an awesome React Native developer then you must take action now. Start learning JavaScript, dig yourself deeper into the ES6+ ecosystem and then learn React and take your time to understand the framework.

🚀 Take Action!

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#