React.js vs Vanilla “Plain” JavaScript

Reasons you should use one over the other and why.

JavaScript code snippet from levelup.gitconnected.com

To understand how to decide between using Vanilla JS or the popular JS library…React.js, one must first understand what they are and how to use them.

What Is JavaScript?

JavaScript is a scripting language used to create and control dynamic website content. It works alongside HTML and CSS to build web applications, provide functionality and allow developers to design whatever they want. Vanilla or “plain” JavaScript looks like this:

function plainJavaScript() {
let user = document.getElementById('user').getAttribute.value
let greeting = document.getElementById('hi').innerHTML = `Hi ${user}! I am plain JS!`
console.log(greeting)
} 
plainJavaScript(); //invokes function 
// user input == "Tom" 
// function renders "Hi Tom! I am plain JS!"

Above a function, or set of instructions on how to do something is defined, variables are declared by grabbing the elements by their ID and sets the innerHTML to a string that greets the user. The HTML provides the structure and JavaScript “grabs” the location of where you want the elements to be rendered and makes changes to them in the DOM. All of this is amazing, but what happens when you want to build a large application with complex functionality and only two hands? There is a more scalable, fast and simpler way. How? React.js.

React.js, created by Jordan Walke, a software engineer at Facebook, is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. React.js, also referred to as just ‘React’ is component based, and allows for developers to create small modular bits of code that are each responsible for their own functionality.

//index.js file 
import App from './App.js'
ReactDOM.render(
<React.StrictMode>
  <App />
</React.StrictMode>, document.getElementById('root')
);
//App.js file
import React {Component} from 'react' 
import FirstComponent from '.src/components/FirstComponent.js'
class App extends component {
 render() {
  return(
      <FirstComponent /> 
  )}
};
//FirstComponent.js file
function FirstComponent = () => {
   return(
     <button to={ParentComponent}>Click Me!</button>
)};
import React from 'react'; 
function ParentComponent = () => {
 return (
   <h3> I am the parent component<h3>
)};

Starting in the index.js file, React (as in Vanilla JS), grabs the location in the ReactDOM by the html element with an id of ‘root’. This is where the UI interface (what the user interacts with — forms, buttons, video clips etc.) will be rendered to. At the top of the file it is necessary to import the files needed so the components they hold are accessible and usable anywhere within your application. The App , ParentComponent and FirstComponent are defined in their respective files and following ‘Separation of Concerns’ , are each responsible for something. At first glance, it appears to be more involved, however if you look closely, you will see that there is both HTML and JS being used to return what you want the user to see. This is called JSX, and is very easy to use and translate.

One would pose the question as to why you would use Vanilla JS after learning React, but there are use cases for either. For a small and simple application, Vanilla JS could be your go-to. Think less complex, basic applications where state manipulation is minimal.

The most fundamental reason why modern frameworks are used is that, with Vanilla JS, it becomes a challenge to keep the UI in sync with the state.

React on the other hand has the capability to handle large and complex applications with its component based functionality all while maintaining the UI state with minimal code. It is faster, easy to learn and simple to integrate tests with.

By comparison, React appears to be the better option regardless of the size of your application, but before you decide to utilize it, have a clear understanding of what you want your application to do and use that to determine if you will use Vanilla JS or React.js.

Happy Coding!