React Native Ultimate Guide - Learning Resources and Courses, Tools, Open Source and More

Its community is growing, and a lots of people are starting to write mobile applications using RN - including some big players like Facebook & Instagram (obvious ones), Skype, Pinterest, Uber etc. We decided to gather the top resources dealing with React Native created by the vibrant community within the last few years and share them with you.

Some stats and facts

• By the year 2020, mobile apps are set to generate $188.9 billion in global revenues via app stores and in-app advertising (by Statista.com)

• Cross-platform is rapidly growing and is estimated to increase from $25.19 billion in 2015 to $80.45 billion in 2020 (by MarketsAndMarkets.com)

• 66.7% of developers use JavaScript in their work (by stackoverflow.com)

Looks promising, so it’s not a big surprise that many people want to learn React Native - just take a look at The State of JavaScript 2017 Mobile Results. Almost everyone has heard about React Native, and most of the respondents want to learn it or already used it before and intend to do it further. So if you belong to the first group and want to expand your knowledge - keep reading, we will present you with some useful resources.

The State of JavaScript 2017 Mobile Results

Learning resources

Fundamentals

Official React Native Documentation

The first resource that should be mentioned is the official React Native documentation. It is extensive, well written and it should be the first place that you visit during your travels through the React Native world :) The official React Native documentation is the best place to learn the basics and dive deeper into features. The documentation is always up-to-date, so if you want to check the newest version or know more about core concepts - here is the place you should start.

React Native styling cheat sheet

Another useful link is the React Native styling cheat sheet - React Native styling material from the official documentation in one handy document.

Understanding Flexbox

More about styling - if you go through the “Learn the Basics” chapter of the React Native documentation, you will find Flexbox mentioned there. Flexbox is a well-known CSS module, but CSS as a whole can’t be used with React Native apps - some CSS properties are emulated. In the flexbox system which React Native uses, we need to think in terms of two axes - the main axis and the cross axis. Flexbox is designed to provide a consistent layout on different screen sizes, so during mobile app development you probably will be using a lot of it. This article can help you get familiar with it. If you want to understand this system better - it’s the best place to start styling with Flexbox.

Redux

As probably you will choose the Redux architecture for your React Native app, it is good to get a better understating of its core concepts and how it works. And the best source would be their official documentation.

React Native, JavaScript & other resources

React Native Quick Start

The React Native Quick Start tutorial was created by the author of the “Fullstack React Native” book. To learn React Native you must know something about ReactJS, since React Native is based on ReactJS. And since React is based on Javascript, you must learn Javascript. In this tutorial you'll learn about modern Javascript, ReactJS core concepts, and how to use them both. Of course, there's also a lot of knowledge about React Native components and examples how to implement it.

Codeburst.io

If you’re looking for a set of JavaScript, React, and React Native posts, you should take a look at codeburst.io. Brandon Morelli - the creator of codeburst.io - explains what it is about: “Codeburst is the online publication that will showcase web development articles and tutorials from writers all over the world. With the creation of Codeburst, I’ll be able to continue to provide tutorials, news, and articles to web development students everywhere. More importantly, I look forward to now being able to provide a space for other writers to showcase and share their knowledge”.

Egghead.io

Egghead.io is a set of tutorials that usually cover solutions to hard-to-find pain points (including advanced animations). Examples: “How to make a parallax effect” or “How to handle textinput with keyboard”. The tutorials are usually very short and specific - going through them and understanding the code written there could save you time you’d normally fighting with more advanced concepts.

React Native Development Tips & Tricks

More about saving time: would you like to avoid mistakes? Learn from someone else’s experience! The article 11 mistakes I’ve made during React Native / Redux app development introduces good practices with file/component structures and shows useful tips for React Native development.

Debugging

Something is not working and you don’t know why? Debugging is the answer ;) With the A Better Way To Debug React Native Redux Apps article you become familiar with the React Native debugger, which is a combination of tools like JavaScript debugger, React Devtools, and Redux Devtools.

Udemy courses

The Complete React Native and Redux Course available on Udemy is a good supplement to the official docs for a complete beginner. Here’s what you will learn with this material (from the description of the course):

• creating real-world native apps using React Native,
• making truly reusable components that look great,
• understanding the terminology and concepts of Redux,
• Prototyping and deploying your own applications to the Apple and Google Play Stores,
• getting up to speed with React design principles and methodologies
• and more.

The React Native - The Practical Guide course can be a good choice if you want to learn all about the theory behind React Native, its core concepts, how to build responsive designs that work on different device screen sizes, how to animate React Native apps, how to navigate around, use maps and the camera - and much more. The course provides a good cross-section of React Native. The author of the course - Maximilian Schwarzmüller (Professional Web Developer and Instructor) - has a very good background in programming, and he knows a lot about app and web development. This course is very clear and understable.

Ready for more advanced concepts? In the React Native: Advanced Concepts course you’ll build three separate apps with increasing complexity. Each of them will profile different features of React Native. By putting each concept into a real app, you’ll get a better idea of when to use each unique and powerful feature. You'll learn the theory and practice of implementing complex Animation systems, how to navigate your users around using React-Navigation, how to send to your users automated push notifications, and much more.

Youtube talks

• React Native talks from the Chain React conference give a lot of useful insights into the environment’s future
• React Native EU conference - here, you can find resources from the first community conference in Europe focused exclusively on React Native

Tools

Below you can find some useful tools that can help you with React Native app development.

• Reactotron - A desktop app for inspecting your React JS and React Native projects. For macOS, Linux, and Windows.
• Postman - for checking requests. Postman helps you be more efficient while working with APIs. Using Postman, you can construct complex HTTP requests quickly, organize them in collections, and share them with your co-workers.
• Zeplin / Sketch measure / Invision inspect - for checking/measuring designs.
• VSCode + React Native Tools extension for debugging - good code editor with an extension that is useful for developing React Native apps.
• Android Studio, XCode - IDEs for native Android and iOS development (respectively). While you can use any editor of your choice to develop your app, you will need to install Android Studio/XCode in order to set up the necessary tooling to build your React Native app for Android/iOS.

Best Open Source Resources

Open source software is an integral part of every app’s development. It provides great solutions for common problems, saving lots of development time. One of the values of the IT world is sharing knowledge and experience and helping each other, so here’s a list that you can make use of:

• NativeBase - Essential cross-platform UI components for React Native.
• Styled components - A tool for creating universal styled components like containers, buttons etc.
• Redux Form - HOCs (Higher Order Component) - a wrapper component for easier form handling in Redux.
• React Navigation - Routing and navigation for your React Native apps.

Summary

The resources mentioned in this post will provide you with a good understanding of React Native - its core concepts and the basic structure of a React Native app, good practices with file/component structures, the React Native debugger, as well as with useful tips for React Native development and more advanced topics.

If you’re interested in expanding your knowledge in the offline world make sure that you are up to date with our blog and the Netguru Code College initiative! During the Netguru Code College participants have the opportunity to work in small groups on their own React Native apps. Each group can count on our experienced developers who offer help, guide participants through the process of creating an app, and answer questions. After 2 days - 16 hours of coding - besides gaining new knowledge, experience and having a lot of fun - participants will have one RN application more in their Github portfolio.

The Netguru Code College is organised in our offices in Poland, with the React Native edition taking place in our HQ in Poznań, but we’re sure that you will find other interesting workshops and meetups in your city or near it. This kind of activity can give you a lot of knowledge - you interact with experienced people, you can learn faster, and sometimes get to know tips & tricks that you would spend much time finding on the internet, so it’s worth it to take part.

Have we missed something? Share your favorite resources in the comments!

The resource list was prepared by: Natalia Muryn, Daniel Idaszak, Utku Uysal, Marcin Kornek, Marek Lisik and Paweł Karniej.