👋 Hello, I'm Yoginth
🤘🔥🚀 Designer & Developer • Love to ship products • 🎵 Music Person • 🌳 Tree Hugger

React Native Developer's Roadmap 2020

Feb 13, 2020

Learn JavaScript Free

As you are most likely already aware and as the name suggests, React Native sits on the React framework’s shoulders. So, before you dive into React Native’s massive learning pool, it’s very important for you to get to know React.

But here’s one thing-learning React without knowing JavaScript is hard. From now on I will recommend that you first learn the basics of JavaScript. When you understand most of the ins and outs of JavaScript, it will become much simpler.

Free resources to learn JavaScript

Mozilla developer Network - MDN has a dedicated JavaScript tutorial that will lead you through the basics of the language. When you start working through lessons, the tutorial’s difficulty will increase from novice to intermediate, and then advance.

Learn JS from JS.Org - If you’re searching for the most interactive way to learn JavaScript, then lear-js.org could end your search. The website will help you learn the very basics of JavaScript by presenting you first with a tutorial and then with a code editor, so you can apply what you have learned.

JavaScript fundamentals: Development for Absolute beginners - This course is a part of the Virtual Academy at Microsoft. You will learn the basics of JavaScript which will contribute to the creation of improved user interfaces, browser-based video games, and dynamic web pages.

JavaScript For Cats - JavaScript for Cats is an online tutorial designed to help cats or their human companions to understand JavaScript, how it works and how it can be used to create cool things for the web.

Learning the Basics of ES6+

Now that you’ve learned JavaScript’s fundamentals, it’s time to learn the ECMAScript standard’s newest version.

You don’t have to use ES6+ in React Native, but ES6 is the new way to go for JavaScript. If you’re creating a React Native app, it can do wonders and I can’t find any excuse to not use it. ES6+ packs a lot of functionality and syntactic sugar with features such as arrow functions, the rest/spread operator, and variable destructuring that make coding much simpler.

Free resources to learn ES6+

For new comers, the basics and fundamentals of ES6 can be learned with some free resources on the web. Below are my own favorite free resources for learning ES6+.

ES6: Mozilla developer network series - Mozilla developer series is a fantastic resource for getting cozy with some smart ES6 hacks.

ES6 course on Pluralsight - A beautiful course if you don’t like to read lengthy technical tutorials. The course aims to teach you the basic features of the latest version of JavaScript, including the latest tools and technologies for using them with Node.js in the browser and on the server.

ES6: the bits you actually use - This short article by James Knelson will direct you on your way to understanding ES6’s most significant features.

ES6 Tutorial in Tutorialspoint - This is simple A to Z guide for ES6

Learning React

Upon familiarizing yourself with JavaScript and the ES6+ ecosystem you are ready to jump on the React.

The first step towards becoming a successful React Native User roadmap is understanding React.js itself, which has almost the same API surface as React Native itself.

I would suggest that you learn from at least one or two lessons so that you can grasp the basics from different perspectives.

You’ll find some of my favorite guides below to learn React

Free resources to learn React

Learn React by itself - You’ll learn React’s fundamentals by building an animated fractal. And you won’t even need to leave your browser! All of the exercises can be completed with the embedded editors – without downloading or installing anything.

Egghead.io: The Beginner’s Guide to React - This course is a great introduction to the framework by Kent C. Dodds, a JS developer and open source enthusiast.

Learning React Native

Good! Good! Now that you know some React, it is time for React Native to get started. Let’s just look at some courses available.

Free resources to learn React Native

React Native Tutorial: Building iOS and Android Apps with JavaScript - In this React Native tutorial you’ll learn how to build native iOS and Android apps based on the hugely popular React JavaScript library. Christine Abernathy is guiding you through the development process of your first iOS React Native app. You can learn how to install the appropriate tools and implement React native fundamentals such as hot reloading, app structuring, etc.

React Native Cheat Sheet - This is a collection of React Native recipes, code snippets, and styling tips and tricks.

Shoutem Tutorial on React Native - This free Shoutem School tutorial will show you the step-by-step process for creating a simple React Native app.

Setting Up the development 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 both iOS and Android - This guide by Paul Napier will help you set up React Native environment on iOS and Android.

State Management in React Native

State management is an important element in any non-trivial application. If you have a background to mobile development then you need to be aware that each feature in an application can have its own state. When you’re creating a small application, controlling your states using props might be simpler for you. On the other hand, a real-world or real-time mobile app may involve a thorough accessibility of your state throughout the entire app.

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

Free resources to learn Redux

Learn Redux - This course consists of 20 videos that will help you learn Redux using the React and React Router to create an Instagram clone app.

Egghead.io: Getting started with Redux - This is a great course offered by Redux developer himself. When you pass through the course, Dan Abramov will be showing you how to use redux in your React application.

React Navigation

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app.

Getting started with React Navigation - Spencer Carli will teach you in this tutorial how React Navigation can be incorporated into your React Native project.

Using React Navigation - This article helps to fill in the gap of describing the React Navigation from the official documentation of React Navigation.

React Native Navigation

The documentation and tools for learning how to set up native navigation solutions such as native navigation and how to respond to native navigation follow.

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.

🚀 Share on Twitter