⚛️📱React Native Developer Road Map

⚛️📱React Native Developer Road Map

React Native's photo
React Native
·

7 min read

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.

If you want to try out javascript, you only need to access the browser developer tools console or a tool like repl.it. And we can take a similar approach to build with React Native. Here is all you need to know and some resources to get you from zero to one!

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.

Styling 💅

  • 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 (margin-top becomes marginTop).
  • 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.

Coding 👩🏽‍💻

  • JavaScript: Understanding JavaScript is necessary for building using any JavaScript Framework. Mozilla Developer Network (MDN) has some great content on JavaScript and building using React or React Native.
  • 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 --global and 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.
  • Local Development Environment for JavaScript: You will need to have node and npm installed on your local machine to build using React or React Native. Grab the latest version from Node.js
  • 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.

Structure

Folder Structure 📂

  • When building front-end applications with JavaScript, there are two types of folder structures (feature vs. functional). The React API has a good description of both. I have a preference for the feature-based approach, helps organize code when working in teams.

Styling 💅

  • 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.

Performance 🐎

  • 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.

Typescript 👩🏽‍💻

  • 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!

Animations 🐰

  • 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 Nativelearn coding100DaysOfCode