5 Essential Things a Beginner Should Focus on When Learning React Native

React Native is a great framework for building cross-platform mobile applications. Many people use it because of how easy it is to transition from React JS. It’s popular because regardless of being a framework for building mobile apps, it still somewhat similar to frameworks for building websites.

Many people say that you have to learn React JS first before taking on React Native. This is a good advantage since you’ll have a better understanding on the frameworks design patterns, but it is not really necessary since you’ll get the hang of it as you go on learning React Native itself. A beginner can always go ahead and learn React Native right off the bat, but one must make sure to focus on the essential things.

If you are a beginner in React Native seeking for guidance, you came into the right article because here I will be talking about the 5 Essential Things a Beginner Should Focus on When Learning React Native.

1. React Native Components

Development in React Native is a bit different because things work differently between websites and mobile applications. Because of this reason, React Native makes use of their own set of components for building applications. These components have their own unique attributes that would correspond to each of their functionalities.

Going through these components is essential for learning the framework because it will help you avoid the mistake of using HTML elements and it will also save you a lot of time because you’ll be able to find convenient pre existing components you won’t have to recreate from scratch.

You can find React Native’s list of components in their documentation page.

2. Component Patterns

In React Native, you have the freedom to decide how you are going to create your components, but it is good practice to keep things organised as much as possible. You can keep things clean if you start to understand that components in React can be categorised differently and each one of these categorisations serves different purposes.

As a beginner, you can start learning about the difference between a stateful and a stateless component. The purpose of categorising these components is to separate the logic layer and the presentational layer of your application. There are many other patterns on designing components you can follow such as container components, presentational components, and higher order components. Researching about these patterns is easy because it also applies in the React JS framework allowing you to find many more resources to use as your study material.

Being able to properly segregate your components properly will help a lot in your development process because the more organised your project can be, the easier it is for your co-developers to adapt and the easier it is to create similar components in the future.

3. State and Props

One of the most important parts of React is the concept of State and Props. These concepts still applies in React Native and are heavily used in any kind of projects.

Props is how components communicate with each other by passing data down from the parent component while State is how components keep track of the necessary information it needs to handle everytime it renders. These two concepts are basically the foundation of data management in React which makes it very critical in any kind of project you make with React Native.

As a beginner, you could be tempted to study State management right off the bat but it is a good practice to master the concept of Props and States first before jumping into something complicated like Redux.

4. Styling Structure

Unlike in React JS, React Native does not make use of HTML elements and uses specialised components instead that follows the logic behind how things work in mobile applications. Because of this, the styling in React Native is also a bit different from your regular CSS.

An example of these differences is that the React Native equivalent of “background-color” in CSS is called “backgroundColor”, and the assigned colors in CSS is written as is, while in React Native, you have to wrap them in quotation marks like “#d6d7da” or “yellow”.

It’s a good idea to study this part of the framework thoroughly to help you avoid using css syntax by mistake and to help you become adaptive with styling in React Native. You can find related guides about this in React Native’s documentation such as the Style, Stylsheet, Layout Props, Image Style Props, and many more.

5. Responsive Design

Mobile devices comes in different shapes and sizes, even more if tablets are included in the scope of your project. Before trying to develop mobile apps, one must understand how the devices to be used works. It is a good practice to design your mobile apps in a way that it is responsive in any type of device (including tablets) because React Native doesn’t handle this automatically.

One of the things you should keep in mind when dealing with responsive design is the fact that some default components in an Android device is different from the default components present in iOS so you can be sure that the design and functionalities in your app works accordingly regardless of the operating system.

Another aspect of the responsive design practice is for your application to be able to adapt upon a hardware rotation or in landscape view to keep the design structure intact.

The Dimensions and the Platform module will help you alot in learning about responsive designing in React Native.

I may have specifically listed the important parts of React Native in this article but the most important thing you should focus on as a beginner is practice.

Practice is essential because studying the framework itself is not only about building mobile applications, it is also about building knowledge and your own skills. The more you are able to practice hands on, the better growth you will get as a React Native developer.