When I was new to frontend development, JavaScript, React, HTML, and CSS were some of the terms I often encountered. HTML and CSS are easy to understand. However, JavaScript and React might be hard to master.

The React vs JavaScript debate is never-ending in the UI world. What is the difference between React and JavaScript? When should we use React instead of JavaScript and vice versa? These might be some of the questions running through your mind right now.

In this article, I will introduce React and JavaScript as top web development languages, compare their features, and advise when to use each in building applications. 

What is JavaScript?

JavaScript is a scripting language used to make web pages interactive and dynamic. You will come across people using Vanilla JavaScript or Plain JavaScript to describe this language. Most front-end developers use JavaScript, hypertext markup language (HTML), and cascading style sheets (CSS) to create user interfaces. 

JavaScript is flexible; you can build web, games, and mobile applications. Its ease of use and flexibility ranked it as the most preferred programming language based on the StackOverflow 2023 Survey. 

JavaScript Features

JavaScript has cemented its space as the most-used programming language for many years. These features explain its dominance and usage:

A scripting language that adopts Asynchronous Programming

You can use JavaScript to write scripts that you can execute on a runtime environment. A scripting language such as JavaScript is suitable for quick prototyping, building web applications, and automating repetitive tasks. 

JavaScript is non-blocking and uses features like callbacks, Promises, and async/await to support asynchronous programming. This feature makes it easy to fetch data from a server without blocking the main thread. 

Take a look at this code:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched successfully!");
        }, 2000);
    });
}

fetchData().then(data => {
    console.log(data);  // Outputs: Data fetched successfully!
});

The fetchData function returns a promise. The ‘resolve’ and ‘reject’ parameters completion or failure of the asynchronous operation.

DOM Manipulation

The Document Object Model (DOM) manipulation makes it easy to manipulate the structure of an HTML document based on the user input. 

Take this code as an example:

var heading = document.getElementById('myHeading');

        document.getElementById('changeTextButton').addEventListener('click', function() {
            heading.textContent = 'Text changed!';
        });

        document.getElementById('highlightButton').addEventListener('click', function() {
            heading.classList.add('highlight');
        });

We have an event listener that listens for changes based on user output. Once the button is clicked, the color of the heading changes.

Dynamic typing

The variable types in JavaScript are determined at runtime. This feature makes it easy for developers to write their code fast as they don’t have to specify variable types. 

Consider this code as an example:

let variable1 = 42;  // variable1 is of type number
console.log(variable1);  // Outputs: 42

variable1 = "Welcome to Geekflare!";  // Now variable1 is of type string
console.log(variable1);  // Outputs: Welcome to Geekflare!

As you can see, we have allocated variable1 a value of 42 in the first example. However, we can still allocate another value to it “Welcome to Geekflare!” in example 2.

Extensibility

You can extend the usability of JavaScript with various third-party libraries and frameworks. Angular is an example of a JavaScript framework, while React is a JavaScript library. 

What is React?

React is a popular JavaScript library for building mobile and web user interfaces. This library was developed by Meta (formerly Facebook) for internal use but was later released as an open-source library. React was designed to reduce bugs that developers encounter when building UIs. This library allows you to build reusable components, which are small pieces of code. 

React is known for its syntax, JSX, which combines HTML and JavaScript. This syntax allows developers to write HTML and JavaScript in a single file. You can also use React with front-end frameworks like Bootstrap to style your application. 

React Features

React is among the most famous web frameworks and technologies based on the Stackoverflow 2023 survey.

These are some of the features explaining its popularity:

Component-based

React adopts a modular architecture that makes building small and reusable code bits easy. You can thus change, edit, add, or remove such components without rewriting the entire code. 

This library has an ‘src’ folder, where all the components are placed. This is the folder structure of a React application.

Declarative

This library allows the developers to describe the state of the application and the user interface. React then handles the underlying updates based on what the developer describes. Essentially, the developer describes the desired outcome, and React determines how to do it.

Take a look at this example:

const numbers = [1, 2, 3, 4];

const DoubledNumbersList = () => {
  return (
    

      {numbers.map(number => (
        
{number * 2}
      ))}
    
  );
};

// Render the component
ReactDOM.render(, document.getElementById('root'));

We have a ‘numbers’ array and ‘DoubledNumbersList’ component. We declare that each number should be doubled and rendered as a list. This means we have described how the UI should look like.

One-way data binding

React uses unidirectional data flow. This feature describes how data flows from the parent to child components. If a change is made to the parent component, the child components automatically reflect the changes. 

However, changes in a child component will not reflect on the parent component. This one-way data binding feature makes it easy to manage the application state more predictably.

import React, { useState } from 'react';

// Child Component
const ChildComponent = ({ data }) => {
  return (
    

      
Data received from parent: {data}
    
  );
};

// Parent Component
const ParentComponent = () => {
  const [parentData, setParentData] = useState('Initial Data');

  const handleDataChange = () => {
    // Modifying the state in the parent component
    setParentData('Updated Data');
  };

  return (
    

      Change Data
      {/* Passing data down to the child component as a prop */}
      
    
  );
};

// App Component
const App = () => {
  return (
    

      
React One-Way Data Binding Example
      {/* Rendering the parent component */}
      
    
  );
};

export default App;

The ParentComponent uses useState to manage parentData’s state. The handleDataChange function modifies its state.

We have a functional component, ChildComponent, that displays data passed to it as props.

Virtual DOM

React creates a virtual DOM every time the state of a React component changes. This library then compares the changes within the virtual DOM and the actual DOM and updates only the necessary parts. 

Take a look at this code:

import React, { useState } from 'react';

const App = () => {
  // State to keep track of a counter
  const [counter, setCounter] = useState(0);

  // Event handler to update the counter
  const incrementCounter = () => {
    setCounter(counter   1);
  };

  return (
    

      
Counter: {counter}
      Increment
    
  );
};

export default App;

We have declared a variable with a button that increments every time the user clicks the button. React does not change the entire DOM where a user clicks the button. However, It only checks for the changes, compares them with the actual DOM, and then updates it.

React vs. JavaScript

Limitations of React

Despite the many features and advantages, it still lacks in some areas. Some limitations are:

• Does not support older browsers: React is designed to work with modern browsers like Google Chrome, Opera, Mozilla Firefox, Apple Safari, and Microsoft Edge. You may have issues running React if you work with an older browser.
• Geared for front-end: React is designed to help developers build user interfaces. However, you can use it with Node.js frameworks like ExpressJS if you want a full-stack application.
• Steep learning curve: Learning React might be hard if you are new to programming. 

Limitations of JavaScript

JavaScript is very powerful. According to Statista, more than 63% of respondents use JavaScript.

However, this programming language has the following shortcomings:

• Time-consuming: Developers must write code from scratch when using plain/vanilla JavaScript in your application. 
• Not suitable for large applications: Maintaining large JavaScript applications might prove challenging. 
• Single-threaded: JavaScript processes one operation at a time. This feature may be limiting for CPU-intensive tasks. 

React vs JavaScript: Which one should you choose?

All I can say is that React and JavaScript aren’t direct competitors. React is just part of the many JavaScript libraries for building user interfaces. 

However, there are some instances where you can choose between JavaScript and React to build your applications. On the other hand, there are instances where React will be more suitable over JavaScript and vice versa. From my analysis, you can use either when:

When to choose React over JavaScript

• Want to build applications fast: React provides boilerplate code that makes creating an application easy. You can also use it with various frameworks and libraries to ease your work.
• Building large applications: The modular architecture of React makes building and maintaining large applications easy. You can update, delete, or add new components to scale your application without changing the source code. 
• Building applications with dynamic content: You can use React with third-party libraries like Redux to manage the state of your application. This library also creates a virtual DOM that only updates the necessary parts when users update the application. 

When to choose JavaScript over React

• Small applications: JavaScript is suitable for small applications that don’t need a lot of user interactions. 
• When you want to learn how JavaScript works: Vanilla JavaScript allows you to set up most things from scratch. You can thus use plain JavaScript when you want a deeper understanding of JavaScript. 

Conclusion 

We hope you now understand the differences between React and JavaScript, their features, and when to use each. From our analysis, JavaScript will be a perfect fit for a small project when you want to learn how JavaScript works under the hood. 

On the other hand, you can use React when you have a big project and want to focus on the user interface. Both React and JavaScript allow you to utilize various JavaScript frameworks and libraries. 

If you are looking for a technology that is a direct competitor to React, check out our article on React vs Angular.