How is React Native different from React?

Introduced in 2015, React Native has become a highly popular framework for developing native applications using JavaScript. The 2021 Developer Ecosystem Survey, conducted by JetBrains, reveals that it was the second most used cross-platform mobile framework, preferred by 38% of surveyed developers. The framework is based on the equally successful library React which provides tools for developing user interfaces of web applications. 

Taking this origin into consideration, you might wonder: Would it be easy for me to move from web application development and dive into mobile app development with React Native (or vice versa)? Keep reading to learn about the concepts that React and React Native have in common and what differences might surprise you as you move between these libraries. 

What are the core concepts of ReactJS? 

React embraces a couple of key principles that in many ways define how to develop web applications using this library. By extension, these core concepts are also present in React Native applications, making it easier to transition from developing web applications with React to developing mobile applications with React Native. 

Below you’ll find some fundamental tenets of React and their impact on React application development.

Read also: Angular vs ReactJS: Which One to Choose?

Elements and components 

Elements can be understood as a foundation of a web application created with this library. They’re tools used to describe what your application should look like, since React applies a declarative paradigm to web application development. 

While elements are basic building blocks of a React application, components can be seen as more complex structures, formed of elements or other components. Due to those concepts, it is very easy to modularize React applications and separate a view from an application’s business logic. 

Since elements and components are used in both React and React Native applications, it shouldn’t be surprising that source codes created using these libraries are structurally similar. Of course, the elements used in them are different – React uses elements semantically close to HTML tags, while React Native provides custom components backed by native platform solutions. But the way in which you should declare how the application should look is basically the same. This is a result of another fundamental concept of React – JavaScript XML (JSX). 

Sample of React code: 
<div className="App">
    <img src={logo} className="App-logo" alt="logo"/>
    <p>
        Welcome to the world of React {username}!
    </p>
    <input type="text" value={username} onChange={handleChange}/>
</div> 

Sample of React Native code: 
<View style={styles.container}>
    <Image source={logo}/>
    <Text style={styles.text}>
        Welcome to the world of React {username}!
    </Text>
    <TextInput value={username} onChangeText={handleChange} style={styles.input}/>
</View> 

JSX 

JSX, a syntax extension to JavaScript, is a sugar syntax for explicit JavaScript language instructions. While a piece of JSX code looks similar to code written with markup language such as HTML or XML, it is, in fact, a valid JavaScript expression and includes all of its capabilities. 

By using JSX, React (and by extension React Native) projects promote the design principle of separating concerns. Thus, a single component combines rendering logic and UI logic (for example, handling events, state changes, etc.) and becomes an independent unit, focused solely on its concern (a particular set of information). 

As a consequence, software developers who switch between projects written in React or React Native always find themselves working with projects built on top of this design principle, which makes it easier to understand unknown source codes and start working on a new project. 

Sample of React code (with JSX): 

<div className="App"> 
    <img src={logo} className="App-logo" alt="logo"/> 
    <p> 
        Welcome to the world of React {username}! 
    </p> 
    <input type="text" value={username} onChange={handleChange}/> 
</div> 

Sample of React code (without JSX): 

const img = React.createElement('img', {className: 'App-logo', alt: 'logo', src: logo}, null); 
const p = React.createElement('p', null, `Welcome to the world of React ${username}!`); 
const input = React.createElement('input', {type: 'text', value: username, onChange: handleChange}, null); 
 
return React.createElement('div', {className: 'App'}, [img, p, input]); 

Hooks 

Introduced in React version 16.8 (and added to React Native version 0.59), hooks became a major game-changer among React developers. Before the introduction of hooks, components were divided into two types – class and functional. The main difference was the presence of state and lifecycle methods in class components, which were missing in functional components. Functional components were relegated to rendering simple elements, since it wasn’t possible to use them for anything more than processing received data. 

To put it simply, hooks provided a way to apply a state and component lifecycle to functional components, but in reality they provided much more. With hooks, it is now possible to extract reusable logic related to state handling and share it between different components. Moreover, such a separated piece of logic can be easily tested. 

Differences between React and React Native 

Aside from many similarities, there are also aspects of app development that differentiate React and React Native. 

If you look at a very simple piece of code written using both of these libraries, you’ll notice the difference in elements used to create components. While React elements are similar to HTML tags (for example, <div>, <table>, <h1>), React Native uses custom elements (such as <View>, <TextInput>, <Image>) that invoke platform-specific Native Components. While the elements are different, the code structure is very similar, thanks to the shared concepts mentioned earlier. Therefore, understanding the relations between React elements and their React Native counterparts might be the only thing preventing you from easily understanding the purpose of a new React or React Native application. 

Another difference, which can be seen as a major obstacle, is the necessity to learn the usage of tools specific for web or mobile app development. For React, it is quite common to use a build pipeline based on Webpack and Babel, popularized by the create-react-app tool maintained by the React team. There are also other solutions, like Next.js for static and server-rendered applications. 

On the other hand, React Native depends on tools specific to native mobile platforms – Gradle for Android and Xcode with CocoaPods for iOS. Learning about completely different build tools and getting accustomed to them could be quite a steep learning curve. But for beginners working on simple projects it might be enough to use a basic configuration provided during the initialization of the project and gradually gain insights into the finer points.

Finally, there is one specific functionality you need to learn when starting to work on a React Native project. Namely, it is the option to combine the JavaScript code with elements written in a native language specific to a given platform, using Native Modules. These modules make it possible to access a native platform API not available by default or to reuse existing code written for a particular platform. 

While Native Modules are powerful tools and provide access to many functionalities for React Native applications, it is necessary to have at least a basic understanding of the programming language used by a given native platform (for example, Java for Android or Objective-C for iOS). You don’t have to dive straight into the deep waters, as many simple applications rely solely on JavaScript source code and only implement small pieces of native code for configuration purposes. 

Read also: An Overview of the Current React Native Architecture 

How to move from React to React Native 

As React Native stems out of React, both of these types of projects share multiple concepts and fundamental ideas, which makes it somewhat easy to learn one when you already have some experience with the other. Of course, after learning the basics, you’re bound to face more difficult topics and technical nuances of a new library, which, as in the discussed case, necessitate getting familiar with a completely different environment, either in web or mobile application development. 

However, being familiar with JavaScript and core React concepts eases the process of learning React Native. Furthermore, many projects rely mostly on JavaScript source code with only minor additions of native code. It might seem that the transition in the other direction, from React Native to React, is easier because it doesn’t require learning about multiple native platforms, but properly mastering web application development is a challenge on its own. 

All in all, it is always worth learning something new and gaining experience with a completely new software development environment, so you can put your new knowledge to the test. 

If you need React or React Native experience in your team immediately, though, consider turning to a proven outsourcing company whose talented developers constantly master new skills. Use the contact form to see how our React and React Native teams can speed up your software delivery.