Road map to becoming a React Native developer in 2018 (for beginners)

Devon Wijesinghe
5 min readAug 30, 2018

--

Source : https://nextbigtechnology.com/hire-react-native-developer/

Hey there fellow developers , I have been working with React Native for a few months now and I would like to share my experience on how I managed to start off my React Native journey. This article is NOT a quick guide to set up the development environment and start development , rather it is a comprehensive guide/reference on the foot steps to follow to become a React Native developer. This is targeted for complete beginners so any one who has even a small understanding on at least one programming language will be able to follow :)

I will guide you step by step in a well ordered manner on how you can get on track and start developing awesome mobile applications using React Native.

Step 1: Sharpen your basics

Source : http://www.pinnacleintegratedmedicine.com/network-standards/

Before you start developing any software using any programming language or framework , you should have a good idea on the topics below in order to make your code base clean, easily readable and have optimized performance.

  1. Following coding standards and best practices : https://code.tutsplus.com/tutorials/top-15-best-practices-for-writing-super-readable-code--net-8118
  2. Algorithms and data structures : https://www.tutorialspoint.com/data_structures_algorithms/data_structures_basics.htm (Tip: Do questions from Hackerrank)
  3. Object oriented programming concepts(OOP) : https://dev.to/charanrajgolla/beginners-guide---object-oriented-programming

Step 2: Learn to build static web pages (HTML , CSS)

If you have some experience with web development , you can skip this step

Source : https://www.seo-camp.org/evenement/atelier-seo-3-htmlcss-bases-indispensables-appliquees-seo/

You might be wondering right now , why you should be learning web development to become a mobile developer. React native does not use HTML or CSS , but it is using something very similar to create user interfaces . If you know how to utilize HTML and CSS well, learning to make beautiful UIs using React Native will be a piece of cake. (Tip: Focus a bit more on the CSS flex-box property)

Learning resource : https://www.w3schools.com/

Step 3: Learn Javascript (JS) and ES6/ES7/ES8

Source : https://commons.wikimedia.org/wiki/File:Unofficial_JavaScript_logo_2.svg

Javascript is the programming language which is used to develop React Native applications, therefore a deep understanding on Javascript’s concepts is essential. Furthermore , learning the new ES6/7/8 syntaxes will help you perform complex tasks effortlessly.

Learning Resources :

Step 4: Learn basic Nodejs and Npm

Source : https://coolestguidesontheplanet.com/installing-nodejs-command-line-linux-osx/

When you attempt to create a “Hello world” application using React Native , you will realize that having Node Js installed in you machine is a pre-requisite. This is mainly because React Native uses NodeJs to build your JavaScript code and also the node package manager (NPM) is utilized to install third party packages. Therefore having a basic idea on NodeJs and NPM in advance will definitely help you.

Learning Resources :

Step 5: Learn basic React Js

Source : https://logosrated.net/react-logo/

Before diving into React Native, i recommend learning the basics of React Js. By learning React Js first , you will unquestionably obtain an understanding of the component lifecycle that React Js follow which is also present in React Native. You will also get to know about what JSX is and at this point since you already know HTML and CSS you will be able to catch up quickly. However , you should not spend too much time on this step, once you get a basic understanding you should jump to the next step.

Learning Resources :

Step 6: Learn Redux

Source : https://worldvectorlogo.com/logo/redux

Once you learn React Js , you will know what component state is and will realize that it is hard to manage. Redux is a state management library used with React and other javascript applications to help handle the state of an application. Redux is used in the same way in both React Js and React Native so its important to have a good idea about how to use it.

Learning Resources :

Step 7: Dive into React Native

Source : https://www.couponhippo.in/blog/reasons-to-choose-react-native

At this point , you will have a solid foundation and you are ready to get started with React Native :)

The best way to get started is to read and follow the official documentation. Since you have already done React Js, many of the concepts in React Native will be familiar to you so you be able to grasp it quickly.

(Tip : Don’t forget to learn how react native actually works)

Learning Resources :

To debug the application easily , you can use the React Native debugger: https://github.com/jhen0409/react-native-debugger

Step 8: Learn React Navigation

Source : https://m.oursky.com/how-we-restructured-our-app-with-react-navigation-98a89e219c26?gi=484904aacccb

Navigation is something which is needed in any mobile application. React Navigation is a library which help to incorporate effective navigation in React Native apps. There are other alternatives to this but i recommend using this as this is really easy to get started with and has a good documentation.

Learning Resources :

Well done!

If you reached this point successfully , you will be able to develop a basic React Native application. Now it is up to you to explore and go beyond the basics. Thank you for following this article and hope it helped you at least a tiny bit :)

Please do buzz me if you want any help : wdevon99@gmail.com

--

--

Devon Wijesinghe

Tech Lead @ 99x | Full Stack Javascript Developer | Certified Scrum Master™ | AWS Certified Solutions Architect Associate