React vs. React Native: The difference, and which is best for you

Choosing between React vs. React Native for your project can be confusing. Both JavaScript user interface (UI) libraries serve similar purposes and use the same syntax, but their differences are important. React is designed for building user interfaces for web front ends, while React Native helps you build native mobile apps for Android and iOS.

This article explains what React and React Native are and their differences, and provides context and information so that you can decide which to use for a particular project.

React and React Native are not the same thing

React and React Native are two distinct JavaScript libraries for developing user interfaces. While React serves as the foundation for React Native, they are not the same thing, and serve different purposes when developing user interfaces:

• React is intended for building user interfaces for web applications that run in the browser. It lets you create reusable UI components using your own designs implemented using CSS, or using a pre-built user interface library.

• React Native lets you use React to build mobile applications that look and behave like native applications. Rather than defining your own look and feel, it adopts the appearance of the native UI elements of the operating system (like buttons, lists, and inputs), while still letting you develop your own broader design using familiar React concepts and syntax.

Both libraries use the same core React syntax and component-based architecture. 

Before deciding which JavaScript UI library to adopt for a project, it's worth understanding each in detail. As React Native is built on React, the programming knowledge is transferable, so it's less a matter of deciding which you will invest your time learning, and more about learning React and then identifying when it would be better to use React Native on a per-project basis.

What is React?

React is an open-source frontend JavaScript library that is developed specifically for building user interfaces for applications that run in a web browser. It lets you create reusable UI components (known as a component-based architecture), reducing the code you need to write and providing a consistent and efficient codebase.

React uses JSX, an extension to JavaScript that lets you include the HTML for your reusable UI components alongside their JavaScript in the same file, which some developers prefer as it makes your codebase easier to understand and navigate.

Another major feature of React is the virtual DOM: a representation of the HTML document displayed in the browser that you can manipulate programmatically, and that React then automatically syncs to the real DOM as shown to the user. This feature lets you use React to make dynamic pages that don't have to reload to change their contents, with much less code than would be required if working from scratch.

Due to React’s lightweight nature, you can use it to provide as little or as much interactivity in a web page as needed, and you can add it to existing projects. Alternatives to React for web development include Vue.js and Angular.  React is used by websites like Facebook, Instagram, and Netflix to power their user interfaces.

Below is an example of an HTML list rendered in React using JSX syntax:

Copy

Check this example out live here.

What is React Native?

React Native was developed so that React developers could create mobile apps with their existing React skill sets. It allows for efficient app development, as you can share much of your code between all of your web and native applications (Windows, iOS/iPadOS, and Android).

In addition to letting you leverage existing React skills, tools, and techniques to cover cross-platform native app development, React Native lets you build applications that look and feel like they were designed for each platform from the ground up. 

Rather than building your own UI elements and interacting with a virtual DOM, you use React Native's buttons, lists, panels, and other included components to create applications that look like, animate like, and conform to the host’s design system. Apps built with React Native include Discord, Uber, and Skype.

Below is an example of the same list as above, but implemented using React Native user interface elements:

Copy

See this example in action here (note that you can preview the app for different platforms to see the difference in appearance on each!). 

You'll notice that while React and JSX syntax is used in both the React and React Native examples, the React example uses HTML elements like <div> and <ul> whereas the React Native example uses native UI components like <FlatList> and <Text>.

The behavior of each example is the same, but the UI provided by React will require CSS to style it, whereas the React Native UI elements will automatically adopt the appearance of the mobile platform they are run on (it's worth noting that you can alter the appearance of React Native components).

What is React Native for Web?

Web browsers don't include native UI components for React Native to display. React Native for Web makes it possible to deploy React Native apps for delivery to web browsers by providing a set of web-compatible HTML UI components to use in place of the missing native components.

This allows you to use React Native to build both mobile and web applications, and while React Native for Web isn't a core part of React Native, it is widely supported and used by the React community, and is actively maintained.

React Native for macOS and Windows

It’s also possible to use it to develop desktop applications using React Native for Windows and React Native for macOS.

When should you use React?

You should use React to build user interfaces for your web development projects when you:

• Want to benefit from the component-based architecture and interactivity React provides.

• Are building web applications that will run in a web browser.

• Need to design bespoke interfaces with unique visual elements that differ from the visual style of the host operating system.

For a head start on your next React project, check out the Contentful React Starter. It includes a full template React application that uses the ContentfulⓇ Composable Content Platform to deliver text and images to your users. You can also use it as the starting point for React Native projects due to the two libraries’ shared foundation.

If you're deploying to the web and want all of the hosting and associated maintenance of your app taken care of for you, you can use our create-contentful-app command line tool to create React apps that you can work on locally, and deploy to Contentful's managed infrastructure when you're ready to go live.

When should you use React Native?

You should use React Native when you:

• Want to take your React skills and use them to build native mobile or desktop apps.

• Require a consistent user interface that adopts the appearance of the host operating system.

• Are building native apps that you will publish to the Apple App Store, Google Play, and Microsoft Store.

• Are developing an application that doesn't rely on HTML — React Native has no DOM, so everything must be constructed with React Native UI components.

Choosing the best tools for your project 

React is a powerful user interface development tool, greatly streamlining the frontend development process. React Native builds on this by letting you use React to build native mobile apps as well as web apps, for full platform coverage using the same language and tools.

However, that doesn't mean React (or React Native) is necessarily right for your project: there are a number of other user interface libraries and technologies, each with their own use cases and advantages. In some cases, a full application framework may accelerate your development process by providing a code foundation and boilerplate functionality for your apps.

Contentful integrates with any frontend development platform, providing a fully configurable composable content platform so that you can focus on building great user interfaces. Your content, as you define it, is optimized for each device and delivered to your users from the Contentful high-speed CDN for seamless web and native mobile app experiences.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.