If you are interested in writing code for mobile applications using JavaScript, you are reading the right post. React Native, developed and maintained by Facebook, is an open-source framework to develop cross-platform mobile applications, using the programming language JavaScript.
Currently, in its 0.57 version, React Native is based on Facebook’s front-end library called ReactJS and shares many concepts. If you are familiar with React, kudos to you! You have crossed the first hurdle. Coming from a frontend development background, React uses a virtual DOM which acts as a shadow to the real DOM available. When an element changes, that change is reflected on the real DOM by Virtual DOM using a node that corresponds to each element.
However, in React Native, there is no DOM other than Native Components which are provided by platforms such as iOS and Android. There are no web views here. React Native has an instance of JavaScriptCore to execute JS code when an application starts. React Native uses RCTBridgeModule to make a connection between native code and JavaScript code. It is currently being used by Facebook, Instagram, Uber, Wix, Tesla and many more.
Here is what I think you can do to advance with React Native development.
Start with basics
This article briefly provides you with an overview of what is inside the React Native app development process and how things work behind the scenes, briefly. I often come across (especially through #100DaysOfCode campaign) developers who struggle to learn a new framework with little to no background in specific the programming language. My advice, is before you leap to make gigantic projects, start with the basics. Learn the concepts as each specific component to the curve, make sure to apply them as much as you can and build small things.
For example, learn how to use FlatList component. Try creating a list with your own dataset or find a mock/fake data set on the internet and try to build a small app out of it. Always remember the feeling you got from creating your first Hello World program. Do you remember that sense of accomplishment?
Take small steps, and build small things at first before dipping your toes deep in the complexity of state management libraries such as Redux and Mobx, or persisting data, using third-party APIs, using TypeScript or Flow, and so on.
These are just tools, you do not need to know them on day one (but I am not saying you have to never learn about them. The keyword here is that they are TOOLS). If you are new to JavaScript, make sure you are clear with the basic ES6 features such as classes, arrow functions, and so on. Then, you must go through the basic ReactJS concepts such as props, state, and stateless components in general.
In summary, start by familiarizing yourself with:
- ES6 Features
- ReactJS Components API and LifeCycle methods
- Setting up a development environment for React Native
- Flexbox
Advance your way
Once you have basic concepts clear in your mind and have played around a bit to get some amount of hands-on experience, it is time to advance further. Start building bigger apps that work or behave like real applications and interact with real-time data. Here is a list of things you can learn to advance in your journey.
- Offline data storage with
AsyncStorage - Working with third-party APIs
- Maps
- Splash Screens
- Navigation
- Redux (for state management)
- Redux Saga and Persist
- Tests and TDD
- Push notifications
- UI Animations
- Build and publish your app
- Continuous Delivery or CI
Note that these are just broad topics to get you started. There are many other things you will learn along the way. Don’t get overwhelmed by that.
Personal Challenges: What do you want out of it?
Maybe you to become professional a React Native developer and work in an organization that uses this tech framework or maybe you want to build apps for your clients/customers. Setting your challenges in the way is a great way to accomplish things and learn.
Commit yourself and work on it. Find apps on your phone or in stores that you want to clone or add an extra feature as a functionality, or learn about the user interface.
Do not get overwhelmed by the number of mistakes you make or the errors you get. Getting frustrated and ranting/complaining about it over the internet all day is easy but understand this is that, it will not solve your problems or make you a better developer. All of this is a part of your journey. Keep reminding yourself of that.
Conclusion
In simple words, React Native brings React to mobile app development. Its goal isn’t to write the code once and run it on any platform. The main goal here is to learn once and write anywhere. An important distinction to make.