So you want to become a React Native Developer? This post shows you how to get there :)
When learning a new framework, environment, or language, find ways to simplify and shortcut your way to learning and trying new things out. If the first thing you do is setting up your local environment, let's try something else first.
The 101 - Beginner 🧰
No Environment 🖥️
- Expo Account: This is a great resource to start building without a local environment. Expo has a code sandbox environment called Snacks 🍿 that you can use to build mobile apps.
- Cascading Style Sheets (CSS): Understand basic styling for making React Native Components look pretty. Checkout Image, Text, and View that are available for React Native. These are a subset of the web-based CSS with a slightly different naming convention (
- Flexbox (for layout): React Native uses Flexbox for applying layouts on mobile devices. Check out this post explaining Flexbox and a playground to test out different layout concepts.
- React Concepts: React has a great tutorial to and documentation to understand concepts used for building apps using React and React Native.
- React Native API: What better place to learn than documentation itself. For any specific questions about the API, take a look at the documentation.
3, 2, 1...Liftoff - Advanced 🚀
Now that you have some basic knowledge of React Native, let's take a look leveling up and building production-ready apps!
Local Environment 🖥️
To level up your React Native, a local developer environment is necessary. These are the items you will need to consider and some resources to get you started.
- Install the Expo CLI globally on your machine
npm install expo-cli --globaland you can create apps using the command
expo init focusTimeApp. Expo has a feature rich SDK that will accelerate your mobile app development when starting.
- Android Studio: Download Android Studio and set up your environment to run the Android simulator. In most cases, you will just have to load Android Studio to load the simulator, and that's it.
- Xcode (Apple Development Environment): For building for iPhone, you will need the Xcode development environment setup on your machine. Note that Xcode is only available for macOS Users and you will start out using it for just loading the simulator. Grab the latest version.
Folder Structure 📂
- Organizing your styling is super important. Creating a global styling approach will be useful for other developers onboarding and help reduce duplicate styling. Check out this link for structuring styling. Also consider using styled components.
- React Hooks: Using React Hooks will simplify your components. Check out this useful summary of hooks with examples, there's always the React API documentation [Add another source].
- As your application grows, you will find yourself building different sections of your app (i.e. authentication, profile, main screen), checkout React Navigation, the documentation has great examples to get started.
State & Side Effects 🌐
- State Management: Once your application starts having more state, you will find it useful to share that state across different parts of your application. Redux is the goto library for this, and they have a solid tutorial to get you started.
- Side Effects: These are events that happen outside of the user's interaction. For example, making server calls or storing user information on the device. Before bringing in a library and adding additional complexity, consider adding side effects within your components (it may get messy, but it's just to start). These can be completed with a useEffect for example. If you find that you need to orchestrate and better organize side effects, check out Redux Saga.
- The goal is to achieve 60 frames per second, otherwise, your app will look laggy. What do 60 frames per second even mean? Another way to think of this is that you must complete any tasks to update the UI within approximately 17ms (
1 / 60 = 0.0166 s or 16.67 ms) or the app will look laggy. Here are some ways to tackle this.
- Using React or React Native, when it comes to performance, the main focus should be reducing the total amount of unnecessary re-renders that occur. Regardless of how complex your application becomes, focusing on this will ensure a smooth experience for the user. Check out this article on 10 different ways to improve react performance. Also, get a better understanding of using the DevTools Profiler to determine what is slowing things down.
- Perceived performance is another way around this and is commonly used in all popular mobile apps. It is sufficient to use loading spinners and skeleton states to make your app appear more performant.
- So you don't need typescript to build mobile apps with React Native. But why not use it? Almost every large scale application that I've built in the past few years has benefited from using declarative types, its equivalent to documentation for your code.
- Spend some time leveling up and learning Typescript!
- Make your app more fun and interactive by using animations. Outside of the Animations API, take a look at React Native Reanimated for a performant way to build animations into your mobile apps. Also, check out Lottie for smooth animations, you can also find free Lottie animations online.
App Distribution 📱
- So you spent all this time building an amazing app, let's get it out in the world for others to see! Expo has a great set of articles for distributing your app, start there.
- You can also share your app to Expo using their Dev Tools to share with others before publishing to Google Play and Apple App Stores.
Free Courses & Resources 🎉
Before you spend money on any course, take a look at what is offered for free online. There is high quality FREE content available for the self-motivated. Most of this article links to free content and tutorials.
Being resourceful and identifying solutions to a problem is a valuable skill to have as a developer, so grow that muscle! 💪🏽
Let's take a look at some awesome free content available for learning React Native.
- React Native Beginner: We created an up to date React Native course at React Native School, check it out as a starting point and feel free to book a 1-on-1 with us to chat about React Native
- Harvard CS50 has a 20 hours free content
- Academind offers a free beginner course
- William Candillion has great videos on creating animations