React.js vs React Native – What's the Difference?

React.js and React Native are two popular online and mobile app development tools, respectively. While they both have the same name and are produced and managed by Facebook, they serve different functions and have distinct characteristics. In this blog article, we will look at the fundamental differences between React.js and React Native, as well as present a real-world example to demonstrate these changes.

React.js

React.js, sometimes known as React, is a JavaScript library for creating online user interfaces. It enables developers to easily construct interactive and dynamic online apps. React has a component-based design, which means your UI is broken down into reusable components, making it easier to manage and maintain your code.

React Native

React Native, on the other hand, is a framework for developing cross-platform mobile applications. It allows developers to create mobile apps using JavaScript and React while maintaining a native appearance and feel. With React Native, you can create apps for both iOS and Android from a single codebase, saving time and money.

Differences Between React.js and React Native

For clarity, let's look at the major differences between React.js and React Native using a table.

Table 1: Key Differences

When to Use React.js vs React Native

The choice between React.js and React Native is determined by the needs of your project. React.js is best suited for online development, but React Native is best suited for mobile app development. Consider the platform you're aiming for as well as the degree of code reuse required.

Example: Building a To-Do List

Let's build a small to-do list app for both platforms to show the differences between React.js and React Native.

React.js:

In React.js, you'd build a to-do list component with HTML components and CSS style. To handle state and updates, you'd utilise the React library. The code may look something like this:

import React, { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState('');

  const addTask = () => {
    setTasks([...tasks, input]);
    setInput('');
  };

  return (
    <div>
      <h1>My To-Do List</h1>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addTask}>Add</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

React Native:

In React Native, you'd make a similar to-do list, but the components would be different, and you'd utilise mobile-specific styling. Here's an example:

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, FlatList } from 'react-native';

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState('');

  const addTask = () => {
    setTasks([...tasks, input]);
    setInput('');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>My To-Do List</Text>
      <TextInput
        style={styles.input}
        value={input}
        onChangeText={(text) => setInput(text)}
      />
      <Button title="Add" onPress={addTask} />
      <FlatList
        data={tasks}
        renderItem={({ item }) => (
          <Text style={styles.task}>{item}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  input: {
    borderWidth: 1,
    borderColor: 'gray',
    padding: 10,
    marginBottom: 10,
  },
  task: {
    fontSize: 18,
    marginBottom: 5,
  },
});

export default TodoList;

Conclusion

To summarise, while both React.js and React Native are great technologies in the area of application development, they serve different purposes. React.js is your best bet for online development, but React Native shines when it comes to designing mobile apps. Understanding these distinctions will enable you to make educated judgements and select the best technology for your next project.

Now that you have a better knowledge of React.js and React Native, you're ready to begin on your next programming adventure. Happy coding!