How to Learn React Native
Mobile Development is becoming ever so popular as mobile phones continue to be one of the most popular ways to communicate, shop, and socialize. There were two typical paths to mobile development: Android Development and iOS Development. Up until React Native, there really wasn’t a way to develop for both operating systems simultaneously.
This article takes a look at React Native: what it is, why you should learn it, and some resources to help you get started. The goal here is to introduce you to the concept and assist you to find resources that will help you on your journey.
What is React Native?
What is React Native Used for?
Learning React Native
- Career Karma matches you with top tech bootcamps
- Get exclusive scholarships and prep courses
The decision to use React Native over using a native environment with Android or iOS is easy to make if you are with a team of web developers transitioning to the mobile development space.
If you know React, you know React Native. It won’t take much to learn the idiosyncrasies of working with mobile phones and how to translate that to your mobile app.
How Long Does It Take to Learn React Native?
How long it takes you to learn React Native depends on whether or not you already know React. If you happen to know React already, it shouldn’t take you more than a couple of hours to get a handle on how React Native works. You’re just taking something you already know and are translating it to mobile app development.
The learning curve will come from how to work with a device that has no Document Object Model (DOM) and code that uses in-line styles instead of CSS.
Keep in mind that the learning curve will be a bit steeper if you are coming from a space of not knowing React at all. It may take you several months to really get a handle on how things are architected when using React Native.
All in all, your mileage may vary depending on the time and consistency in your practice.
How to Learn React Native: Step-by-Step
Here are the recommended steps to learning React Native.
1. Basic HTML
You don’t need to be an expert in HTML to move forward, but you should know enough:
- Create a Document. Be able to create a basic HTML Document.
- Inline Styling. Use inline-styles in your HTML elements to style your web page.
- Loops. Both traditional for loops and advanced array methods.
- Conditionals. If-else statements, ternary statements.
- Functions. ES6 big arrow, anonymous, and higher order.
- Objects. Be able to create objects, manipulate objects, and use object methods.
3. React Fundamentals
Even though you won’t be developing in React, it’s good to at least look at the documentation and tutorial to go over the basic fundamentals so you are aware of where React Native came from:
- Basic Architecture. React is Flux Architecture under the hood, but a high level overview of how data should flow through the application without going into the nitty gritty is good to know. Be at least aware that it uses a Virtual DOM that is loaded into the actual DOM so it can be rendered to the screen.
- Class Components. Stateful; uses a constructor to create a state object and a render method.
- Functional Components (Presentational). Presentational; doesn’t hold any state or have a render method.
- Functional Components (Stateful). New way to store state with React Hooks. No render method – just uses a return statement.
- State. Best Practices when it comes to storing state and passing props
- Component Lifecycle. Know when to use a particular component lifecycle method in class components or the useEffect hook in functional components that use hooks.
- Event Handlers and Methods. Write methods to handle user interactions
- Package Managers. Yarn or npm and use a package.json file to write package.json scripts to test, start, eject, or build a react application
- Importing/Exporting. Know how to import and export packages and components so that the application can be rendered properly.
4. React Native Get Started
You’ve learned React. Congratulations! Just a few more steps to go and you can start developing on mobile.
- Setup Your Environment
- Use Expo CLI to get started if you have no experience with mobile development.
- Use the React-Native CLI if you do have mobile development experience.
Expo is quicker to set up and will come with adjustments later down the road, but is okay to get started with smaller applications. React-Native CLI with Android Studio will take about an hour to set up. Follow the React-Native documentation.
- Be Aware of Differences Between React and React-Native
- No CSS. React-Native uses inline styling. A React-Native module assists with this so that you can use an object to define style properties and values.
- No DOM. The Document Object Model doesn’t exist in mobile development so composing components will be a little different.
- Core Components. React-Native uses a combination of user interface, Android-specific, iOS-specific, and other basic components that replace DOM functionality and other logic.
- Events. Available events to deal with since the screen can be interacted.
There is more than mentioned here, but this is a good list to get you started as you advance. There are more similarities than differences, so don’t let this list overwhelm you!
5. Build Projects
Start with a basic “Hello World” application to see if you can get React-Native and Expo CLI working together. From there, try to choose projects that are progressively more complex. Practicing these React-Native concepts will help to solidify your knowledge of React-Native while crafting a portfolio of things you have been able to do!
Beginner Project Ideas:
- Create a books or movies application that will talk to an API and return a list of popular movies or books. To stretch your ability, make the list searchable, link each individual entry to a detailed page giving more information about the item, and create a ratings system that can be saved to a user profile.
- Make a recipes or notes application that will allow users to create, read, update and delete their recipes or notes. Adding pictures to an entry is allowed.
- Write an expense tracker application that will allow users to keep track of their day-to-day expenses.
6. Advance to More Difficult Projects
Move to more difficult projects after several iterations. You should, at this point, be able to advance to using the React-Native CLI and Android Studio to create your applications. As an advanced-beginner/early-intermediate developer, you should be able to troubleshoot any problems that might arise in your application and installation.
Advanced Project Ideas:
- Implement a current events application that will grab the top news headlines of the day. When clicked it should list the headline, byline, date, and body of an article, either as a separate screen, or as an accordion. Take some creative license here to make it your own.
- Create an application that will use geolocation to find something that’s around you. Could be whatever you’d like for it to be — restaurants, hair salons, doctors, friends, libraries, etc.
- Use Facebook Messenger as an inspiration to create a chat application.
- Make an application inspired by a combination of TuneIn and Spotify or Pandora to use your library to listen to tunes or listen to the radio. Make sure it has a player component that the user can control.
- Come up with your own idea!
After you have completed these projects, you’re ready to venture out and create the next billion dollar idea! In the next section, we will take a look at some of the tutorials and guides to help you get to this point.
The Best React Native Courses and Trainings
Everyone learns a little bit differently. Compiled here are some of the best React-Native tutorials and training that could be found. Some require a fee, but there are a few that are free as well. This list is in no particular order.
Online React Native Courses
Here are some of the best React Native Courses available online:
- 38h of video lectures
- $9.99-$94.99 (Buy when on sale!)
- Frontend Masters
- 4h 4m of video lectures
- Prerequisites: none
- Requires membership to Frontend Masters
- 2h 37m of video lectures
- Requires membership to PluralSight
Free React Native Courses
- About 6 hours of video lectures
- Prerequisites: none
A free crash course in React Native from YouTuber uidotdev. This covers the basics you need to know to get a mobile application started using React Native.
- 6h of video lecture
This tutorial covers the absolute minimum needed to be able to get a small application of the ground in React Native. This is a decent tutorial that’s part of a bigger course available on the instructor’s website.
React Native Books
There are several books to assist in your React-Native adventure as well.
In this guide on React-Native, you’ll dive right into creating a basic application before getting into more advanced topics like working with APIs, animations and styling.
Online React Native Resources
This is a list of some of the decent resources that are available to you to learn React-Native or to refer to later as you gain more experience.
React Native Documentation: The Basics
The best place to get started when learning a new technology, quite often, is the documentation!
The documentation for React-Native is quite good and lays out all of the constituent parts that will help you succeed. React-Native’s “The Basics” module will assist you in understanding the unique characteristics of React’s mobile platform compared to React itself.
React Native Tutorial for Beginners
Sometimes you find the assistance on a whim when you are searching for something else. That happens to be the case for this particular article on React-Native found as I was doing research on another topic.
This tutorial by Johannes Stein of Toptal walks through how to develop on React-Native by starting with a simple React application. He takes the React application and translates it to React-Native while walking you through how to do it. This is a React-Native tutorial for beginners by an experienced developer.
Unit Testing in React-Native Applications
Testing in general is an important part of the software development cycle. Many places implement what’s called “Test-Driven-Development” (TDD) and will ask about your ability to create unit tests in interview situations.
It is good to say that you have been able to implement tests that you have written. This article will introduce you to unit testing in React-Native and walk you through some of the basic things you need to to start testing your code.
How to Use Expo with React Native
In this article by Robin Wieruch, we take a look at how to use the Expo CLI in conjunction with React-Native.
Robin writes in a clear and concise manner about how to set up expo so you can create applications quickly.
Should You Study React Native?
Studying React Native will benefit you if you plan to become a mobile developer or want to work for a company that uses React Native as a part of its solution stack. Here are some companies that use React Native for their mobile applications:
- Uber Eats
The decision to study React Native or not is 100% up to you! Keep an eye on whether or not it is used in your area for a company’s mobile web development. Due to the multi-platform nature of the codebase, I don’t see React Native going away any time soon without some sort of replacement. Good luck on your React Native coding journey!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.