A Web Developer’s Roadmap to Learning React Native in 2020
Is it really an easy switch from web to React Native mobile development?
While I was working as a web developer and using Javascript, Jquery and making a lot of Ajax calls using get and post methods from frontend I came to learn about React Native (or RN)and how it helps in building iOS and Android apps with the single code base and how developers from the web who use javascript on daily basis can easily start learning or working on React Native. But hold the horses here, the learning curve and the difficulty level are not the same as that of vanilla Javascript, not even close. I have been there and did a back forth ride a couple of times to learn these technologies, so I am writing down all of them in this article for you to have a smooth journey. If you are an experienced web developer or you have fewer years of programming experience then this React Native roadmap 2020 is for you. A lot of developers can fall prey to the over-exaggerated claims. Although many will say that the official guide does not declare to learn any prereq before learning React Native. But building a mobile app with RN requires prior knowledge of using several technologies and libraries that can take a lot of time. Like some of them can take more time than the time you took to learn vanilla Javascript. So just by reading any appealing headline like React Native for JavaScript developers and jumping right into building a mobile app is like trying to step on the topmost of a ladder and missing all the rest.
When should you start learning React Native
I guess the best time to start learning mobile development is when you have experience in web development for at least one or more years. Because web development is relatively easier and by spending enough time coding you learn a lot of things like programming concepts, OOP, databases, mistakes, and how easy it is to make mistakes, how to solve the issues (by this time you are already introduced and thanking Github and StackOverflow). Besides, some web technologies may be used on the mobile or the concepts will be similar for example JS, OOP, functional programming, CSS, form elements, etc.
(Disclaimer: This article contains some affiliate links, which means if you buy something using those links, i ll be get a commission without costing you anything extra)
Is React Native easy
I don’t want to scare your bums 😃 but let’s be honest. Learning mobile development is not a piece of cake and comparatively difficult than web development mostly. No matter if you choose to learn React Native (which is one of the easiest) or any other platform/framework for mobile development. But once you have good knowledge of all the basic concepts and the technologies which I tell you in this React Native developer roadmap you will fall in love with this technology.
React vs React Native
The similarities between these two technologies are not only in the name but they are both used as frontend technology and both are Javascript based as well. The main difference is that React is used on the Web and React Native on mobile. A lot of concepts and syntax in React is the same as in React Native. If you already have basic knowledge of React, I ll recommend this Building native mobile apps with Javacript to accelerate your React Native journey and eventually this will help you grasp major concepts of React Native. However, by now you must have heard some experts suggest learning React first before React Native and some say it is not mandatory. So this brings us to our next question.
Is React js mandatory before React Native
I will highly recommend learning React first before learning React Native. Period. There might be champions who started with React Native and built an app in a couple of weeks that you will come across on the internet. But remember we all have different backgrounds and experiences in programming.
Here are the Pre Requisites before learning React Native
Let’s discuss these prereqs separately
1. ES6 and Advanced Javascript
Should be familiar with arrays and array manipulation, objects and object manipulation, map/reduce/filter, rest/spread operators, functional programming, fat arrow functions, let/const/var difference
2. Node js
Nodejs is a backend language. Still, I will recommend learning it because you will be using node.js code in React Native. Many concepts that will be useful in React Native are:
- NPM
- Commands like npm install, npm install — save-dev, npm start, etc
- Promises/Callbacks/Async Await
A couple of crud apps (only backend) and to-do apps, by connecting some databases is extremely important. Or you can do some sort of eCommerce or social media app if you want to go the extra mile.
3. React
As discussed earlier, it is not officially mandatory to learn React but I strongly recommend to learn React first and at least cover these topics:
- Components (Class vs Functional)
- Controlled components
- Handlers
- this.state, this.props and this.setState in React
- Life cycle methods
- JS Fetch/Axios for calling APIs
If you haven’t learnt React yet, I would suggest to take this wonderful book React and React Native: A complete hands-on guide to modern web and mobile development and learn React and React Native at one place.
4. Redux with React
Redux is used for global state management since the state is maintained on a component level in React, you can pass handlers with variables to child components from parents and vice versa which becomes messy and hard to manage when your app grows and becomes complex. Redux comes to the rescue. But the official documentation says don’t be too quick to use redux. Sometimes in small apps, it is better not to use redux. So use it after having learned the basics of React.
You can learn redux in react native as well and it is still entirely the same. But the reason being in learning with React is that you will find a lot of answers and community support on Redux from React category and less in RN.
5. Flexbox
If you don’t know it already then you must learn it. Flexbox is useful in designing your UI and important component of Roadmap to Learning React Native. It will require your small time to grasp and you will have huge benefits on styling your components. I will suggest you FlexboxFroggy, this website having 24 small exercises and you will be all done.
6. Optional — Good to know
Here, technically my Roadmap to learning React Native completes. But I will suggest some more tools for your arsenal. These are not mandatory to know but you will be able to write more efficiently if you know them as well
Chances are you already know them or you learn them while learning your React course. These are as follows:
- redux-thunk
- redux-saga
- LESS, SASS
- React hooks
- Typescript
- Proptypes
- Any database to connect your app, preferably Firebase (it is a good cloud solution by Google for authentication, databases, storage and more. But if you are short of time or like any other database then you can skip)
Done with the prerequisites, Now What
Now that you have completed the prerequisites you can start learning React Native finally. But let's wait, when you will be setting up an environment for React Native, you will see two options to set up RN environment
Expo CLI (or expo init)
So, again two options to choose. Which one to choose. Short answer: Choose both. One by one. And choose the Expo first. It is built on the top of the react-native CLI project itself. And provide many built-in APIs and tools which will take your good time to set up in the react-native CLI project. And takes care of native code itself.
Once you setup the environment, go ahead and test out your React and all the knowledge you already learned by implementing the following:
- Use simple components like Image, Text, TouchableOpacity (Button), Alert, Toast, etc
- Debug using console.log
- Use Flatlist to display static data
- Use Life cycle methods
- Use API for dynamic data
- Add react-navigation
- Add redux
- Familiarize yourself with debugging tools
- Add redux persist
- Redux persist with storge
- and so on
But why the hell we have react-native CLI if Expo is that much useful.
Many native APIs are not yet supported in Expo like Bluetooth plus more. Read about further Expo limitations here. To overcome that, you will have to switch to our second method.
React Native CLI (or react-native init)
As we discussed that Expo CLI is limited which brings us to use react-native CLI to create apps. It gives us more power. We have different projects for iOS and Android. So that, we can integrate 3rd party SDKs or write a bridge to communicate between native and Javascript. For many medium to large projects, you will switch from expo or start from here only.
Tips
- Run your app on a simulator/emulator first, and then on your device as well
- Run your code on both platforms and run often, when you integrate a new feature or install and link a new library. Even RN works for both but there might be some tweaks that you may need to do
- If you are stuck on an error or unexpected behavior of the app, you must search in the open issues of the library you just installed or linked, or search on Google if others are facing the issue as well. Since RN is growing you will see some unexpected errors and warnings.
Conclusion
That’s all. Hope I have covered all the important steps on what luggage you should pack before starting your React Native journey and make it a smooth one.
Happy Coding.
Here are some other articles from me that you may like as well
