React Native vs React

React is a JavaScript library used for building user interfaces, especially web interfaces.

It allows developers to create reusable components and manage interactive user interfaces.

React Native is a framework for building mobile applications using JavaScript and React concepts.

It provides mobile-specific components and APIs for creating applications for platforms such as Android and iOS.

The main difference is the target platform.

React is commonly used to create websites and web applications.

function App() {
    return (
        <div>
            <h1>Hello React</h1>
            <p>Welcome to my website</p>
        </div>
    );
}

React Native uses mobile components to create interfaces for mobile applications.

function App() {
    return (
        <View>
            <Text>Hello React Native</Text>
        </View>
    );
}

React web applications commonly use HTML elements such as div, h1, p and button.

<div>
    <h1>Welcome</h1>
</div>

React Native uses components such as View, Text, Image and TextInput.

<View>
    <Text>Welcome</Text>
</View>

React uses JSX to describe web user interfaces.

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

JSX looks similar to HTML, but it is used within JavaScript code.

React Native also uses JSX.

function App() {
    return (
        <View>
            <Text>Hello Mobile App</Text>
        </View>
    );
}

The important difference is the components used inside JSX.

React web applications can use CSS, CSS Modules, styled-components and other styling approaches.

.title {
    color: blue;
}

React Native has its own styling system. The StyleSheet API is commonly used to define styles.

const styles = StyleSheet.create({
    title: {
        color: "blue",
        fontSize: 24
    }
});

React Native styling uses JavaScript objects and many style property names differ from traditional CSS syntax.

const styles = StyleSheet.create({
    title: {
        fontSize: 24,
        marginTop: 20
    }
});

For example, React Native commonly uses fontSize instead of the CSS-style property font-size.

Both React and React Native use reusable components.

A component can contain its own JSX, logic, state and event handling.

function Welcome() {
    return <Text>Welcome</Text>;
}

Props are used in both React and React Native to pass data from a parent component to a child component.

function Student({ name }) {
    return (
        <Text>{name}</Text>
    );
}

Both React and React Native can use the useState Hook to manage component state.

const [count, setCount] = useState(0);

The state can be updated when users interact with the application.

React Hooks such as useState, useEffect, useRef and useContext can also be used in React Native applications.

This is one reason React knowledge is useful when learning React Native.

Both technologies respond to user interactions, but the event components and APIs can differ.

For example, React web applications commonly use onClick, while React Native commonly uses events such as onPress.

<Pressable onPress={() => alert("Pressed")}>
    <Text>Press Me</Text>
</Pressable>

React web applications commonly use routing libraries for navigation between web pages or views.

React Native applications commonly use mobile navigation solutions such as React Navigation to move between screens.

A React web application normally runs in a web browser.

The browser provides the environment for displaying the web interface.

React Native applications are designed to run on mobile platforms such as Android and iOS.

This makes React Native suitable for mobile application development.

Both React and React Native applications can communicate with backend APIs.

For example, JavaScript's fetch() or libraries such as Axios can be used to request data from a server.

fetch("https://example.com/api/students")
    .then(response => response.json())
    .then(data => console.log(data));

Neither React nor React Native normally connects directly to a database from the user interface.

A backend API can communicate with databases such as MySQL and send the required data to the application.

React Native
      ↓
   REST API
      ↓
 PHP Backend
      ↓
    MySQL

React Native can interact with mobile device capabilities through appropriate APIs and libraries.

Examples include camera, location, notifications and other mobile features.

These capabilities are different from the normal browser APIs commonly used in React web applications.

React is commonly used for:

• Websites
• Web applications
• Dashboards
• Admin panels
• E-commerce websites
• Single-page applications

React Native is commonly used for:

• Education applications
• Business applications
• Shopping applications
• Booking applications
• Student management applications
• Service applications

Learning React before React Native can make the transition easier.

Concepts such as JSX, components, props, state, Hooks and component composition are useful in both technologies.

React and React Native are not competing versions of the same technology. They are used for different application platforms while sharing the React programming model.

React
  ↓
Web Applications

React Native
  ↓
Mobile Applications

If you already know React, you can use your existing knowledge as a foundation for learning React Native.

React Basics
    ↓
JSX
    ↓
Components
    ↓
Props
    ↓
State
    ↓
Hooks
    ↓
React Native Components
    ↓
Mobile Styling
    ↓
Navigation
    ↓
APIs
    ↓
Storage
    ↓
Mobile Projects

The major new concepts are the mobile components, mobile styling, navigation and device-specific capabilities.