Vijit Ail Software Engineer at toothsi. I work with React and NodeJS to build customer-centric products.

What you should learn before learning React Native

5 min read 1518

Introduction

If you want to take your career as a developer to the next level, you need to have React and React Native in your tool belt. Creating mobile apps using cross-platform frameworks has become the trend in development these days. Cross-platform app frameworks like React Native can help you to develop native mobile apps that work on both Android and iOS devices.

In this guide, I’m going to list the technologies and skills you should have before getting started with React Native.

What is React Native?

React Native is a JavaScript framework used to build cross-platform, natively-rendering applications. It is based on the React library created by Facebook. Similar to React, React Native is used for building user interface components, with an added benefit: React Native can render UI across different platforms, not just on the browser. As well as web-based apps, React Native can be used to build apps for Android, iOS, macOS, and Windows.

React Native provides a standard set of APIs for building UI components, thereby enabling developers to write code only once and run it on multiple platforms. React Native is very easy to learn for someone who is coming from a web development background.

A developer who knows React can target and build apps for any platform supported by React Native. HTML, CSS, and JavaScript are the core technologies of the web that are required to learn React. React is purely written in JavaScript with some HTML-like syntax called JSX for creating the UI components. Using CSS, you can style the user interface components by applying various style rules. The same skills are required for React Native as well since it is based on React.

Now, let’s take a closer look at these technologies individually so that you get a better idea of how to prepare before learning React Native.

HTML and CSS

HTML and CSS are the core technologies in web development. HTML is the skeleton that creates the elements and layouts for a web page, and CSS adds styling to these various elements and layouts. Mastering HTML and CSS is a vital step, as these will be your foundation for the rest of the following technologies (and web development in general).

Resources for learning HTML and CSS

JavaScript

Once you are comfortable with HTML and CSS, you can begin learning JavaScript. JavaScript is a scripting language that allows you to add interactions and logic to your web pages. Using JavaScript, you can “listen” for events like button clicks or input focus, and add interactivity to your apps.

Similarly, in React Native, you can listen to various events, access native APIs, and write the core business logic using JavaScript. Hence, it is vital to get yourself comfortable with JavaScript before learning React Native.

JavaScript fundamentals

The very first thing you should cover in JavaScript are the fundamentals of the language. This means becoming familiar with the syntax and basic operations, understanding how to declare variables and objects, and defining and calling functions. You should also learn how to work with objects, arrays, strings, and dates, using JavaScript’s built in methods.

We made a custom demo for .
No really. Click here to check it out.

DOM manipulation

When writing JavaScript, one of the most common things you will do is manipulate the DOM.

The Document Object Model (DOM) is a tree structure that represents the current web page. The browser DOM API enables developers to access HTML elements programmatically to add the required business logic.

For example, you can change the color of a text when the mouse pointer hovers over it:

<span id="sampleText">
Hello World
</span>


const text = document.getElementById("sampleText");

text.addEventListener("mouseover", function(){
    text.style.color = 'red'
});

The document object has different methods to access and add interactivity to the HTML elements. You can check out DOM manipulation in more detail here.

Modern features (ES6+)

JavaScript has come a long way since its inception. New features are being added actively every year and, as a JavaScript developer, you will need to keep up with them. Since 2015, many features like arrow functions, object and array destructuring, and const and let variable declarations have been introduced and are commonly used when working with libraries like React.

Another important feature to learn is how to use the Fetch API to get and send data to external services. This is a very common requirement in most web and mobile applications.

Learning the JavaScript fundamentals and the ES6+ features will give you a solid foundation and help you better understand the core concepts of React Native.

Up until this point, the technologies mentioned so far are very common in web development. From here on you can choose to master a JavaScript library like React, or a framework like Vue or Angular, and that’s when you can really dive deep into the JavaScript world.

Before moving on to the frameworks, however, it is crucial that you have a thorough knowledge of HTML, CSS, and JavaScript as these are the fundamental skills that you will require further in your development journey.

Resources for learning JavaScript

React

React is a JavaScript library that enables developers to create user interface components. Traditional web pages use HTML and CSS to build the UI, but with React, the UI is built purely using JavaScript. React is also known for containing a virtual DOM under the hood, which is used instead of manipulating the DOM directly.

Mastering React before learning React Native will make your job very easy. Even though React and React Native are used for developing applications for different platforms, they are very similar in syntax. Additionally, they are based on the same programming language – JavaScript.

Virtual DOM

React creates a virtual DOM (VDOM), which is an object representation of the DOM structure to be rendered on the web page. If you want to gain a deeper understanding of how React works internally, you should learn about VDOM. Virtual DOM is a framework agnostic concept, so it’s also used in other frameworks like Vue.

JSX

Using React, you can build reusable UI components and pass data between them. Components are written using a special JavaScript syntax extension called JSX (JavaScript XML).

JSX looks similar to HTML syntax and is very powerful, as it can handle JavaScript expressions. In JSX, instead of HTML attributes, props are used to pass data from the parent component to the child component.

Data handling

Components can also handle their data internally using state. props and state are two very important concepts in React. Having a clear understanding of how data handling is done in React is vital, as it is something you’ll be doing quite frequently.

React components

There are two types of components – class components and function components. React class-components have different lifecycle methods which get called during the render process. React function-components can leverage hooks to handle different states. Both the component types have their pros and cons, and you need to know which one suits your use case.

Further learning

Once React basics are covered, you can dive into advanced topics like context, component patterns, portals, and component testing. Further, you can try different third party libraries like Redux, Material UI, or Axios. Get familiar with npm or yarn package installers as you will be dealing with packages frequently.

The best place to learn React is from the official documentation. If reading is not your thing, then you can find many resources on YouTube and Udemy.

Topics like JSX, components, lifecycle methods, hooks, and state management are the core elements of app development with React Native. You will be working on the above-mentioned topics daily as a React Native developer, so you must get comfortable with them before learning React Native.

Conclusion

By now, I hope you have a clear idea about the topics and technologies you need to learn before getting into React Native. In this guide, we discussed how learning web technologies like HTML, CSS, JavaScript, and React can help you in learning React Native. I would strongly recommend you to get comfortable with JavaScript as it is the programming language used in React Native. Having a solid foundation will give you a head start in learning and also help you debug and troubleshoot issues faster.

To prepare for learning React Native, you can also learn a bit about Java and Swift or Objective-C languages as these are the underlying native programming languages for Android and iOS development.

Doing just the theory isn’t enough. Once you get familiar with the syntax, start with creating mini-projects like a tip calculator or password generator. As you practice, the more you will understand and come across challenges. The more problem-solving you do, the better. If you get stuck in a problem, you can search on the web, as most of the solutions are already available.

: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

.
Vijit Ail Software Engineer at toothsi. I work with React and NodeJS to build customer-centric products.

One Reply to “What you should learn before learning React Native”

  1. Good guide!
    That’s a LOT of stuff for a beginner, though… and the standard w3c / mozilla resources are meant as a reference more than a journey to learn.

    If I really want to learn all that and start a developer career in this field, I would rather try being admitted to some online live course like strive.school or similar.

Leave a Reply