petitsarr / React-Native-developer-roadmap

📒 React Native is a cross-platform library to build mobile apps using React and JavaScript. This guide is to help you in your React Native journey. this repo contain a great the resources you need to work with React Native art,(Articles, Tutorials)

📚 The React Native Developer Roadmap 📚

React Native is a cross-platform library to build mobile apps using React and JavaScript. This guide is to help you in your React Native journey. This repo contains great resources you need to work with React Native (e.g., Articles, Tutorials).

🟢 Intro to React Native

Here are some good resources that will onboard you to React Native and give you some insights about the React Native ecosystem.

• 📌 Blueprint to becoming a React Native Developer
• 📌 Getting started with React Native
• 📌 What you need to know to get started with React Native

🔨 Setup the Environment for React Native

After you get an idea about React Native, now it's time to start setting up the ground to start building things with React Native.

📱Setup iOS Environment

• 📌 Setting up the environment development
• 📌 How to setup development environment for React-Native on Mac
• 📌 React Native Environment setup
• 📌 How to install React Native on MacOS
• 📌 How to REALLY set up a React Native environment on Mac

🤖 Setup Android Environment

• 📌 Get started developing for Android using React Native
• 📌 Android React Native Window Setup-How to Setup Android Environment for React Native App
• 📌 Android Setup
• 📌 React Native Environment set up on Mac OS with Xcode and Android Studio

⚙️ Debugging

Here is some content that will help you learn how to debug a React Native app ⬇️.

• 📌 Tools for debugging React Native
• 📌Debugging in React Native
• 📌How To Debug React Native Apps Like A Pro? (Tools And Best Practices)
• 📌 Debugging in React Native: Flipper vs React Native Debugger vs Reactotron

Debugging tools

• React Native Debugger
• Flipper
• reactotron

💅 Styling

Learn how to do styling in React Native with these resources below:

📖 Articles

• 📌 Styling in React Native
• 📌 React Native style docs
• 📌 React Native styling tutorial with examples
• 📌 Demystifying Flexbox in React Native
• 📌 Getting Started With React Native Flexbox Layout
• 📌 A Mini-Course on React Native Flexbox
• 📌 Understanding Flexbox in React Native
• 📌 Applying and Organizing Styles in React Native

📚 Styling libraries

• 📒 react-native-extended-stylesheet
• 📒 styled-components
• 📒 react-native-CSS
• 📒 react-native-tailwindcss

🖌 Building React native components and Layout

• 📌 Easily Build Forms in React Native
• 📌 Building React Native forms with UI components
• 📌 How to create Custom Component in React native?
• 📌 Custom Component in React Native
• 📌Create native UI component in React Native

Navigation

• 📌 Introducing React Navigation 5
• 📌 React Native navigation: React Navigation examples and tutorial
• 📌 How To Use Routing with React Navigation in React Native
• 📌 Building a React Native App With Complex Navigation Using React Navigation

🔑 Authentication

• 📌 How to Add Authentication to React Native in Three Steps Using Firebase
• 📌 Add Authentication to your React Native App
• 📌 Create a React Native App with Login in 10 Minutes
• 📌 React Native Authentication Flow, the Simplest and Most Efficient Way
• 📌 Adding Authentication to Your React Native App Using JSON Web Tokens
• 📌 How to set up email authentication with React Native, react-navigation, and Firebase
• 📌 Implementing secure passwordless authentication in React Native apps with Auth0

🪄 Animations

• 📌 How to use Reanimated 2 (a beginners guide)
• 📌 Making Animations In React Native— The Simplified Guide
• 📌 Top 5 Animation Libraries in React Native
• 📌 React-Native Animated Polyline
• 📌 Implementing FoldView in React Native
• 📌 How Animations Work in React Native
• 📌 The top 6 animation libraries in React Native

UI libraries for styling

• 📌 How to build React Native UI app with Material UI
• 📌 Top 5 Animation Libraries in React Native
• 📌 Comparing React Native UI libraries

Deployment and publishing to the App Stores

• 📌 How to Deploy a React Native IOS app on the App Store
• 📌 Build an iOS App with React Native and Publish it to the App Store
• 📌 Uploading Apps to the Apple App Store and Google Play
• 📌 Deploying React Native Apps to App Store and Play Market : Step-by-Step Guide
• 📌 How to Deploy a React Native App for iOS and Android
• 📌 How to build and upload a React Native app to the iOS App Store using Expo
• 📌 How to Deploy a Create-React-Native-App to the AppStore

🔋 Performance

• 📌 Optimize your React Native app performance
• 📌 How to improve the performance of a React Native app
• 📌 Comparing the Performance between Native iOS (Swift) and React-Native

🪤 Build fun things and real project with React Native

After getting your hands in React Native, it's time to build and practice what you learned. Here are some fun projects to work on:

• 📌 “Can it be done in React Native?” — a case for declarative gestures and animations
• 📌 Can it be done in React Native? Revolut chart using D3
• 📌 Can this be done in React Native? Building the Chrome iOS TabBar
• 📌Building Serverless Mobile Applications with React Native & AWS

React Native developers to follow

It's important that you always keep updated with React Native news and learning new things to grow your skills, here are some folks in the React Native community that will benefit you with your React Native journey:

• 🔸 William Candillon
• 🔸 Aman Mittal
• 🔸 Catalin Miron
• 🔸 Evan Bacon
• 🔸 Satyajit Sahoo
• 🔸 Jonny Burger
• 🔸 Leo Natan
• 🔸 Nicolas Charpentier
• 🔸 Spencer Carli
• 🔸 Nader Dabit
• 🔸 Eli White

📚 Books

• 📒 React Native in Action by Nader Dabit
• 📒 LEARN REACT NATIVE

Contributors

All contributions are welcome: editing, adding a resource, fixing grammar, etc..

1. Fork the repo
2. Create your own branch
3. Submit a pull request ✅