What is the best way to learn React Native?

by Alexandra Murtaza

React Native is a mobile app development framework that makes use of JavaScript for developing native mobile apps. It is one of the most popular frameworks that leverage complicated UI and component-based UI. This, in turn, helps the developers make use of the same small UI component both into Android apps and react native iOS.

What is great about this framework is that by adopting it, you can use the same code for deployment on iOS as well as on Android. This takes you to a huge saving in development time and money. As per the calculations, 90% of the code can be reused between Android and iOS which is just too good, saving a lot of time plus some extra time for modifications that’s it.

With React Native it is up to the developer to structure code such that business logic is pushed down into a shared set of modules. For each situation, you need to write a thin UI layer that is platform-specific.

If you are interested in starting to use React Native, you can quickly kickstart your knowledge on this framework with this beautiful free React Native App template. It is a fully coded app template built over Galio.io, React Native and Expo to allow you to create powerful and beautiful mobile applications. If you like Google's Material Design, you will love this react native kit! It features a huge number of components and screens built to fit together and look amazing.

The product is built by Creative Tim, the home of more than 1 Million creatives & web designers.

So you may wonder: what is the best way to start learning React? Here’s what experts advise you:

Edoardo Moreni, React Native Freelancer

I started developing with React Native in June 2015. I have now shipped 2 apps (iOS/Android), and I am about to submit two more. My answer assumes you have a CS background. If you don’t know how to code, learn how to, then come back here.

I think the best way to learn React Native is to understand what mobile development is. I was coming from Android, so I had an idea of what building an app was about. What I mean is that you need to know the basic concepts, such as Drawer, Toolbar, TabBar, ViewPager or Button. They are pretty obvious, and I don’t think it should take you more than a day to get familiar with the components of an Android or iOS app.

You need to get these things straight because you will be using them in React Native. A few people would suggest to implement them in Java or Objective-C/Swift and then see how they work in React Native, but I don’t think that is strictly necessary (do it if you really want to look at how cool RN is).

This also includes concepts such as a stack. You are going to push things on the stack and popping them from time to time. (If you come from Android, you might start noticing some similarities between startActivity or navigator.push()).

These are the next steps:

  • Start by reading the getting started tutorial and try to run it on your machine. It’s the first thing I did. This will give you a sense of what we are talking about. Getting Started — React Native | A framework for building native apps using React
  • Read about the Components specs and lifecycle in React. RN comes from ReactJS, they have a lot of things in common and understanding things like componentDidMount(), or componentWillMount() will help you. Component Specs and Lifecycle | React
  • Then read Pete Hunt’s tutorial about ReactJS. You need to understand what components are and how they are implemented. Thinking in React | React
  • I would suggest going through the other sample apps, all of them. Read code and when you don’t understand something, just Google it. If you want to see how an app needs to be appropriately structured, you may want to have a look at the Facebook8 App. This is really good, but it’s not for beginners. Come back here when you want to see how to use Redux in a React Native app.
  • There are plenty of tutorials that explain how to write a simple app in React Native. I personally used this one: Going native with React, an introduction. It’s probably outdated by now, but it gave me ideas on what I needed to complete my project.
  • Yes, I said project. You need something to start with. You learn by coding (and reading), not just reading or (even worse) watching. Why don’t you try to implement Instagram? Tinder could be another idea.
  • Don’t read the Docs. It’s not a book, but just a reference to the things you will need to use along with your journey, so while developing keep a tab open, if you are not familiar with it. Keep in mind that RN is moving fast so you may want to check them from time to time.
  • Have a look at Share and test your React Native code in the browser. This is a fascinating resource with a lot of examples. You will find it integrated into the docs as well.
  • Download the Facebook 8 app, Facebook Groups (this is not 100% RN), Facebook Ads’ Manager and open the events view on your Facebook app. Welcome to React Native.

I started with some knowledge of Android and a CS background. I probably had never used Javascript or Objective-C. After learning, using, playing with React Native, I have learned both.

John Gill, former Reverse Engineer at IKEA

If you are reading these lines, chances are you will fall into one of two categories:

  1. You are a React Native developer, looking for a fast list of resources to send to that new colleague you have to introduce to the framework
  2. You are the guy who received the link, and you need to learn React Native to yourself asap

So, what should you do to learn it properly?

STEP 0: Install it

Pretty straightforward, the first task you have to face is to install it correctly: it may sound simple, but trust me it is a long process: head over to the official docs to learn how.

BTW, if you are on Windows and you can’t find a way to make it work, check this blog post from the guys at Infinite Red — which have created one of the best React Native starter kit out there, Ignite.

STEP 1: Get the right equipment

Naturally, the next step is to install an IDE (Integrated development environment) that will allow you to write React Native code flawlessly, providing a set of additional tools to help you out.

If you are planning to write code only for React Native, you should consider DECO, which is scoped for RN devs.

For the other 99% of us, the choice will be between (to list the most famous) Sublime Text 3, Atom and Visual Studio Code. One thing you should do right away is to install a fantastic plugin called ESLint — which will help you write correct code. I suggest you follow the guide franzejr wrote about it.

STEP 2: Read React Native Express

Plain and simple, React Native Express is the best (IMHO) guide to learn Javascript to write React Native right now.

It is quite complete, starting from plain Javascript to get to complex topics like state management via Redux and Animations. And it’s completely Open Source.

STEP 3: Learn React Navigation

If you are reading these lines, it means that you are so lucky (seriously, I envy you) to be learning React Native at a time when there is the official React Navigator.

For a long time, navigation in React Native was hard to handle: there were many different navigators (the first one, Experimental, ExNav) and it was quite difficult to learn properly how to use them, let alone integrate them with Redux or MobX.

But now, things are different: so go, read those amazing docs and follow the getting started guide to learn how to make multi-page applications.

STEP 4: Dive into the framework

Once you got a good grasp of React Native, it’s time to get you up to speed: as you may have heard, we are not yet to a 1.x version.

This means that the framework gets regularly updated, once a month to be precise: to keep up the pace, the best way is to keep an eye out for the release page over the GitHub project, and the breaking changes document to know how to keep your code updated.

Steve Jhon, M.S Computer Programming, Harvard University

Step-1

The first step is to install an IDE (Integrated development environment) that will allow you to write React Native code flawlessly. This will provide you with a set of additional tools to help you out.

If you are planning to write code only for React Native, you can consider DECO, which is for React Native developers. Independently from the IDE, one thing you should do right away is to install a plugin called ESLint which will help you in writing correct code.

Step-2

React Native Express is one of the best (IMHO) guides to learn Javascript and write React Native.

It starts from plain Javascript and gets too complex topics like state management via Redux and Animations. Most importantly it’s completely Open Source.

Step-3

Read these documents and follow the getting started guide to learn how to make multi-page applications.

Step-4

The React framework gets regularly updated, at monthly intervals: to keep up with the pace, the best way is to keep an eye out for the release page over at the GitHub project, and the breaking changes document to know how to keep your code updated.

These are the five best resources to learn React Native:

(1) Getting started in react native website

First things first are to try installing and running React Native in your machine. The best starting point for this is nothing other than react native’s own getting started guide.

It should take you a few minutes to get up and running with react native.

(2) React native with exponent on pluralsight

This Pluralsight course is an interesting course that goes through react native and exponent. On top of creating an app in the exponent, this course also covers redux usage in your react native application.

(3) React native and redux in udemy

This course will guide you through handling authentication in react native, tapping into the power of redux, how to store application states inside the redux store and wrangling with data retrieved from external service.

(4)React native course in frontend masters

From react overview, styling in React Native, dealing with asynchronous data, utilizing redux all the way to UI components in react native; this course is a must if you want to be an expert React Native developer!

(5) Learn react native fundamentals in egghead.io

React native fundamentals course goes through the details of different components that can be found in react native package.

‘Now that you learned the basics; it’s time to dive into the deep end.’

PS: React Native is an Open Source Project, which means that it will get better the more people to participate, help, code, fix and test it.