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
Why has React Native become the go-to for app development?
Before Getting Started With React Native
For the rest of us, check out these courses on the fundamentals of React:
- ReactPractical React FundamentalsDerek Jensen
- ReactModern Web Apps With React and ReduxAndrew Burgess
- ReactThinking in React: Component Lifecycle MethodsAndrew Burgess
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 way 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 the tools, environments, and other useful resources that 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 and how to build them into screens, and you've 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 on their functionality:
Then, take a look at some of the app templates that exist already. Study their code, their structure, and their documentation. Even more importantly, though, tinker around! Add your own components, change 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:
- Mobile App21+ Best React Native App Templates of 2020 (Including 5 Free)Franc Lucas
- React NativeGetting Started With the MStore Pro React Native App TemplateKyle Sloka-Frey
- React9 React Native App Templates for You to Study and UseFranc Lucas
Once you’ve put together a few projects on your own, it’s time to move on to 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!
To go 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 are 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 someone else’s.
How did you learn React Native? What are your favorite resources for learning and improving within app development? Let me know!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post