React Native vs React: Key Differences and When to Use Each

React uses HTML and DOM to build web apps, while React Native uses native mobile components to build mobile apps. Both use JavaScript and React concepts but target different platforms and UI systems.

Quick Comparison

This table summarizes the main differences between React and React Native.

Aspect	React	React Native
Platform	Web browsers	iOS and Android mobile devices
UI Rendering	Uses HTML and DOM	Uses native mobile UI components
Styling	CSS or CSS-in-JS	JavaScript styles similar to CSS but not CSS
Navigation	React Router or similar	React Navigation or native navigation
Performance	Runs in browser, depends on DOM	Near-native performance using native components
Code Sharing	Web apps only	Can share logic with React but UI code differs

Key Differences

React is a JavaScript library for building user interfaces on the web. It uses HTML elements and the browser's DOM to display content. Styling is done with CSS or CSS-in-JS libraries, and navigation is handled by libraries like React Router.

React Native also uses JavaScript and React concepts but targets mobile platforms like iOS and Android. Instead of HTML, it uses native UI components like View, Text, and Image. Styling is done with JavaScript objects that resemble CSS but are not the same. Navigation uses mobile-specific libraries like React Navigation.

Because React Native renders native components, it offers better performance and a more native look and feel on mobile devices. React is limited to web browsers and uses the DOM, which can be slower and less native in appearance. Both share React's component model and state management, but their UI layers are quite different.

Code Comparison

Here is a simple example showing how to display a "Hello World" message in React for the web.

javascript

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return <h1>Hello World</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Output

A web page showing a large heading: Hello World

React Native Equivalent

The equivalent "Hello World" in React Native uses native components and runs on mobile devices.

javascript

import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello World</Text>
    </View>
  );
}

Output

A mobile app screen showing centered text: Hello World

When to Use Which

Choose React when building web applications that run in browsers and need HTML, CSS, and web ecosystem support.

Choose React Native when building mobile apps for iOS and Android that require native performance and look.

If you want to share business logic but build for both web and mobile, you can combine React for web and React Native for mobile with shared JavaScript code.

Key Takeaways

React builds web apps using HTML and the DOM, while React Native builds mobile apps using native components.

React Native offers near-native performance and UI on mobile devices, unlike React which runs in browsers.

Styling and navigation differ significantly between React and React Native.

Use React for web projects and React Native for mobile projects.

You can share JavaScript logic but UI code differs between React and React Native.