Thursday, November 14, 2019

How to Learn React Native: Start With These Courses and Tutorials

How to Learn React Native: Start With These Courses and Tutorials

Whether you’re new to React Native or you’ve been using the framework for years, there’s always something more to learn. This powerful JavaScript-based mobile framework makes it possible to take code that wouldn’t be out of place on a website and turn it into a native mobile app.

With this power, comes a number of techniques, architectures, and design choices of differing complexities to learn. This guide will walk you through some of the best resources available from Envato to help you get started in React Native, and to keep your education going no matter what level you’re currently at.

Before we get started, you might also want to check out some of the excellent React Native app templates available for sale on CodeCanyon. Starting with one of these templates can get your project off to a great start.

 

About the React Native Framework

Mobile apps have been around for a while now, but the recent advent of JavaScript-based application frameworks has completely changed the game. While there are a number of different frameworks out there, React Native has become one of the biggest contenders in the space, powering behemoth apps such as Facebook, Instagram, Discord, AirBnB, and hundreds (if not thousands) more.

Why has React Native become the go-to for app development?

In short, it makes app development exponentially more efficient for both developers and companies. Building off of a central JavaScript code base, React Native reduces, and in many cases, eliminates the duplicated work that used to be necessary to launch both an iOS and Android app. In addition, having a single language that is also widely used within web development means that there are many more developers available to work on projects. This means more help when you run into issues, more documentation on how to do common tasks, and more engineers if the need arises.

Now that we’ve talked a bit about the importance of React Native though, let’s look at the first step of a React Native journey, getting up to speed on JavaScript.

Before Getting Started With React Native

React Native is a powerful framework, but before getting started working with it, there’s some underlying technology that you’ll need to be familiar with. In this case, we’ll be mostly looking at JavaScript, and maybe a little bit of React.

A good place to start is the Practice JavaScript and Learn course series, which can help pin down the basics of JavaScript quickly:

Then you’ll want to expand your knowledge to include Modern JavaScript Fundamentals, and finally nail in your knowledge by completing some projects:

Once you’ve gone through those (or if you happened to already know a bit of JavaScript), you’ll want to pick up some React. React is a JavaScript framework that serves as the base for React Native, and carries a number of similarities, including its structure and dependence on components.

Once you’ve got React down, you’ll be able to apply a lot of that information to a React Native app. If you’re experienced with JavaScript and other frameworks already though, feel free to skip forward to learning React Native.

For the rest of us, check out these courses on the fundamentals of React: 

With React under your belt, now it’s time to dive into React Native. While there are many similarities between React and React Native, there are some important new skills that you’ll need to get your native app rolling. Let’s check them out!

React Native Basics

We’ve got all of our prerequisites met, so now it’s time to dig in.

React Native has two key pieces that we’ll want to tackle first, its architecture and the use of components. Components are often self-contained bits of code or UI, built in a modular nature so that they can be used several times throughout an app (or even be dropped into other programs easily). These are commonly tied to screen elements, such as login screens, buttons, or other interactions. The use of these components as the main building blocks of the app is what gives React Native its unique architecture.

This architecture means that elements are often divided so that their functionality and user interface are separated. Then they are grouped into screens, with each representing a literal screen being shown to a user. This structure makes it easier to debug your code, reuse components between screens, and rewrite components to be used for new purposes.

First you can check out this article on the React Native Ecosystem to get a feel for what all tools, environments, and other useful resources exist. After that, this course on Getting Started with React Native will teach you many of the basics, like setting up your environment, dealing with JSX, and more. Finally, try your hand at putting together your own component by following along with this tutorial on creating a calendar component with React Native.

With those basics out of the way, the next step is to delve into working with and creating full apps. Let’s check that out next.

Building Full Apps with React Native

Awesome, by this point you’ll have a good feel for working in React Native. You know what components are, how to build them into screens, and have put together a few small features by yourself or made some changes to existing code. Next we’re going to look at how you can bring that all together to create fully fledged apps using React Native.

We aren’t quite to the point of building them from scratch yet, but taking an existing template, library, or resource, we’ll figure out how to make it into a usable end product.

A good place to start is to bolster your understanding of JSX and React a bit by taking this deep dive course that will shed more light into their functionality: 

Then take a look at some of the app templates that exist already. Study up on their code, their structure, and their documentation. Even more importantly though, tinker around! Add in your own components, change up how an existing one works, or customize some of the styling. Anything to take it from a standard template to a working minimum viable product will help you to build out the core skills it takes to build React Native Apps.

Here’s a good head start on some of the best ones available through Envato: 

Once you’ve put together a few projects on your own, it’s time to move onto the more advanced parts of React Native.

Advanced Techniques and Features of React Native

When working with more advanced concepts of React Native, there are two directions to go: deep and wide. You can learn more about creating an app from scratch, start to finish, working on every stage (wide). But you might also want to go deeper, looking into specific ways to improve your usage of React Native, such as mastering advanced app structures or really digging into an available library or service (such as Firebase). Or maybe you want to do both!

For going wide, try out this course that walks you through the creation of an app from beginning to end:

If you want to go deep into a specific topic, there’s a lot of them available.

A good start would be getting up to speed on using Expo to work with projects and make it easier to test and deploy: 

You might also want to learn how to plug your app into an expandable, popular back-end such as AWS:

Or, check out some of these more advanced courses on React and React Native:

Building Your React Native Journey

Like any language or framework in programming, you’re never quite finished. As you make your way along your journey, new features pop up all the time and complex edge cases make themselves known. Because of this, your path to learning can be distinct from that of someone else’s.

How did you learn React Native? What are your favorite resources for learning and improving within app development? Let me know!


Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)