How to Learn React Native Practically

If you already have some programming experience and you’re interested in learning React Native, there are a few methods that are faster than the traditional route of learning. Most tutorials, books, and courses are targeted towards non-programmers, wasting your time with the basics. But if you have programming experience, here’s how to learn React Native practically in a fraction of the time.

It has been 5 years since React Native was released by Facebook. It has since then been widely adopted by the tech community as a first-class choice for multi-platform mobile app development with the support of a rapidly increasing community.

There are a lot of rich resources available to learn React Native but in this article, we are taking a look at an unconventional approach to learning React Native, which is often neglected, but which can be extremely powerful, especially for developers who already know how to code. More specifically, we are going to describe how you can learn React Native practically, by leveraging the resources available on the already mature React Native ecosystem.

So what’s the best way to learn React Native development practically and build your Android and iOS apps?

If you already have some programming experience in other languages/areas (JavaScript, C++, web development, etc.), this tutorial will be much easy for you.

The best approach to learn React Native is to learn by doing. Learning React Native practically is the most efficient way to ramp up on mobile app development, for people who are already familiar with the basic programming concepts. Let’s see what strategies you can apply to achieve the best outcome.

1. Start Learning React Native with an App Template

First of all, find an existing fully-functional React Native project of your preference. It can be an open-source project on Github, but try to find a project from a reputable author or company. Ideally, you get a premium React Native template, which contains as many features as possible, to allow you to assimilate a lot of React Native knowledge.

Once you find the React Native source code for an app you are passionate about, go through the following steps:

• Set up your dev environment. Do this by simply following the documentation, which will be extremely comprehensive, especially for the paid templates. At this step, you will learn about Cocoapods, iOS simulators, Android SDK tools and most importantly.

• Run the app template in on the command line

If you encounter any issues or have additional questions (which by the way, you must have!), try to find the answers online, by simply googling around. There are lots of free React Native tutorials and recipes that will surface easily by a simple Google search. If you went with a premium app template, then you may also want to use their customer support, to get questions that are specific to the source code you’ve bought.

2. Browse the Code and Understand React Native

Now that you actually have a fully-fledged mobile app running on your computer, with complete access to the source code, this is really where the fun begins.

First of all, try poking around by browsing some code. Open a few React Native files, read some code, see how much of it makes sense to you. Since you already have some basic coding experience, you’ll notice a ton of stuff makes sense.

A nice trick is to find style folders and alter the app colors and observe how the components change appearance. Check in the component classes and see the hierarchy of components and observe how smaller components are used to build out a parent component.

A great way to get familiar with the new code is to. Once you hit a breakpoint, you can see the entire call stack starting from the set up debugging breakpointsindex.js, so you get to truly see how everything is linked together.

3. Make Small Modifications

Now that you have an idea of how the project structure looks like and how React Native works on a basic level, you can go ahead and try to make small modifications to the app.

Try breaking the app. Make the code not compile, and read the errors in the Metro builder if any exist. Remove UI elements from the source code and observe them go away in the app.

Take a look a screen and come up with simple modifications such as: changing background colors, changing the color of a button, changing contents of texts, increasing the font size of a title, tinkering with the component styles, changing the app name, changing the image source of an image component, etc.

Keep making modifications that are incrementally more complex. You should soon get to a level where you start poking around with basic UI components and adding props in them (Text, Image, etc) as well as a little more advanced stuff such as list views, viewpager views, and even networking. Don’t forget to use breakpoints and really get yourself accustomed to a basic debugging flow — it’s insanely powerful.

For total beginners, who have never coded before, some theoretical preparation for React Native programming might be needed. In these cases, try reading a React Native book , in order to grasp the fundamental concepts of programming in general. At each chapter, try mapping that knowledge to the app template you are learning from.

4. Build More Features

This is truly the most important step in the learning process and it is the milestone that will take you the most time. Building new features is the best way to learn React Native practically. And once you start doing it, you will understand exactly why.

Come up with a list of a few features that you’d like to add to the app template. They can be design tweaks, business logic changes, or even adding new menu items and screens.

When working on a feature, first try to find if there’s similar functionality already existing in the app template — a similar list, a similarly designed screen, a similar UI component, etc. Then simply look at how that existing piece of app is being built, and try to replicate it for your feature.

Always be googling. Every time you don’t know how to do something or have questions about anything, just google that. There will be at least 2–3 search results that will explain in dedicated to your question and help you solve your issue.

Bottom Line on How To Learn React Native Practically

Using React Native app templates is a great way to learn React Native practically, especially for people who already have some programming experience. By jumping straight into coding, the learning curve gets extremely steep, since you learn the entire development framework: development setup, React Native CLI, Android SDK, Xcode environment, Javascript syntax, React Native APIs, etc.

You assimilate all this knowledge much more effectively by executing practically by yourself, rather than by reading books or by mimicking others.

While for complete beginners, tutorials might still be useful, they should be used only as a companion to creating a real React Native app. Even seasoned React Native developers use React Native starter kits to save time or avoid working on boring tasks (remember Google Sign in, FB Authentication?).

Originally published at https://www.instamobile.io on November 1, 2020.