Editor’s Note: This post was updated 10 October 2022 to include information about prerequisites for React Native, general tips for learning it, why you should learn React Native, and several paragraphs comparing React with React Native.
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, we’ll go over the technologies and skills you should have before getting started with React Native.
- What is React Native?
- Why should I learn React Native?
- Understanding HTML and CSS for React Native development
- JavaScript for React Native
- Having a React foundation for React Native
- Further learning
- Tips for how to learn 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.
Prerequisites for React Native
To learn React Native, you should first have a strong understanding of JavaScript. You should also be familiar with the basics of React, as React Native is built on top of React. Additionally, it would be helpful to know some basic HTML and CSS. While you don’t need to be an expert in these technologies, having a solid foundation will make learning React Native much easier.
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.
Are React and React Native the same?
React and React Native are two different things. React is a JavaScript library for building apps on the web, while React Native is a framework you can use to create native mobile apps using React.
React and React Native enables you to create reusable components to make your code easy to read and maintain. This makes it easier to develop large-scale applications. However, they differ because React is used for updating DOM (Document Object Model) and making UI on the web on the web, while React Native is used for creating native UI components on platforms like Android and iOS.
While they share some similarities, they are different enough that you can’t just use React code to build native mobile apps.
Learn more →Do I need to know React to learn React Native?
In my opinion, you need to learn React before starting with React Native. It would be beneficial to have a basic understanding of React before diving into React Native. This is because React Native is a cross-platform framework that uses JavaScript and React concepts to build native mobile apps. So, if you understand the basics of React, you’ll be able to pick up React Native more smoothly.
That being said, you don’t need to be an expert in React or JavaScript to learn React Native. As long as you have a basic knowledge of these technologies, you should be able to get up and running with React Native.
Why should I learn React Native?
Before you dive into React Native, it’s essential to understand why you would want to learn and use this framework.
React Native also offers several benefits over traditional native development frameworks. First, it’s much easier to start with React Native than with Objective-C or Java. Second, React Native uses a declarative programming style that makes code more readable and makes it easier to add more features.
React Native has strong support from the community. If you run into any problem while developing your app, you can easily find the solution on platforms like Stack Overflow and GitHub. Finally, React Native also has a lot of packages on npm that you can integrate and use in your project quite effortlessly, saving you a lot of time.
Understanding HTML and CSS for React Native development
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
Below are some great resources to help you learn HTML and CSS efficiently:
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://developer.mozilla.org/en-US/docs/Learn/HTML/IntroductiontoHTML
- https://developer.mozilla.org/en-US/docs/Learn/CSS
JavaScript for React Native
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.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
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.
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:
Hello World
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
Below are a few great resources for learning JavaScript:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction
- https://javascript.info
- https://www.w3schools.com/js
Having a React foundation for React Native
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.
Tips for how to learn React Native
Here are some tips to help you get started:
- Start by familiarizing yourself with the React Native documentation. This will give you a good overview of the framework and how it works
- Once you’ve done that, look at some of the existing React Native applications to see how they are built. This will give you a better idea of how to structure your applications. You can find many example applications on GitHub that you can use as a reference point for your projects
- Plenty of resources are available online to help you learn React Native, so make use of them. Take your time, and don’t try to rush through the material. Understanding the concepts is crucial so you can apply them when building your applications
- Finally, don’t forget to ask for help when needed. The React Native community is large and welcoming, so don’t be afraid to reach out if you get stuck somewhere
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.
LogRocket: Instantly recreate issues in your React Native apps.
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
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.
This is mind blowing guide for beginners! Iam very much thank ful to creator who creates this all.
Yes. Mind blowing guide for beginners.