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.
— Sorry to interrupt this program! 📺
Given the current situation with COVID-19, times are hard for most of us, but if you're stuck at home you can perhaps use that extra time to work on your React skills. Wes put all of his courses at 50% off to help out with the current challenge we're facing.
Plus, these are affiliate links, so if you purchase a course you help Alligator.io continue to exist at the same time! 🙏
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.
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:
Learning the Basics of ES2015+ (ES6+)
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: 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.
Paid resources for learning ES6+
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
- Learn React by itself - This great tutorial is worth considering if you’re a beginner and want to learn React on its own.
- Egghead.io: The Beginner’s Guide to React - This course by Kent C. Dodds, a JS developer and open source enthusiast is a great introduction to the framework.
Paid 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
- Shoutem Tutorial on React Native: Build your first Mobile app - This free tutorial from Shoutem School will teach you the step-by-step procedure to develop a simple React Native app.
- React Native Cheat Sheet - Doesn’t matter how many bookmarks you currently have. This React native cheat sheet should definitely go up your bookmark bar. A great way to avoid frustration mid-learning and focus on what’s really important.
You can also have a look at our own intro to React Native for an overview of how to get started.
Paid React Native tutorials and courses
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:
- React Native Environment setup (iOS and Android) - This article by Paul Napier will help you out in setting up the environment for React Native on iOS and Android.
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.
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.
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:
- React Native Navigation by Wix - The official documentation by Wix for implementing React Native Navigation in your app.
- Getting started with React Native Navigation - In this article, Spencer Carli walks you through the installation of React Native Navigation in your React Native app.
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:
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!
Testing your React Native application
Following are the resources to help you learn about these tools:
- Testing in React Native using Jest and Detox - This article by Monte Thakkar is a great resource to help you learn how to use Jest for unit testing and Detox for end-to-end testing your React Native app.
- Appium + React Native Quickstart - This article by Chase Seibert will help you with the basics of writing tests by using Appium for React Native.
- Testing React Native Apps with Appium - Another useful article on using Appium with React Native on both iOS and Android.
🚀 Take Action!