React vs JavaScript: When to Use Each and Why

If you’re a web developer or application developer and you want to make a user interface, you’re going to need to know React. But React is an extension of JavaScript – shouldn’t you learn that first?

You’ll learn both React and JavaScript in the QuickStart Web Development Boot Camp — and there’s a logic to learning before the other. Just as our instructors have it set up in the boot camp. Read on to learn what React is, when you should learn it, and when you can simply rely on JavaScript.

What is React?

React is a toolbox for building graphical user interfaces for webpages, websites and applications. That’s obviously a very simple definition, but the technical definition of React that would only help someone who’s already pretty familiar with JavaScript and web development coding. For someone less-familiar, React is a toolbox for building user interfaces. And that toolbox gets used by a coding language called JavaScript.

Technically speaking, React is an open-source, front-end, JavaScript library. It’s also known as React.js or ReactJS, and it was developed specifically for building user interfaces or components of user interfaces. Facebook leads the community of developers and companies who maintain the code base for React. ReactJS can even be used as a base for developing mobile applications or single-page sites.

We’ll explain JavaScript in greater detail below, but there’s one important element to understand early: HTML and CSS – the building blocks of every webpage – are static. JavaScript is dynamic. What that means is that with just HTML/CSS, without reloading the page (and re-requesting information from the server), you couldn’t have things moving on the screen, or information changing, or images rotating. If you see something like that happening at a website, it’s almost definitely JavaScript.

React uses JavaScript to build user interfaces. The user interface (or UI) of a website or application are all the on-screen menus, search bars, or interactive menus – basically anything a person interacts with to use a webpage or an application. And before React was created, developers wrote user interfaces by hand with JavaScript (or other tools that came before React). But each one of those JavaScript coders was reinventing the wheel every time. And not only was that inefficient, but it also meant the work was often being done badly.

React came about in 2011, when a Facebook engineer decided to create ReactJS specifically with the intention of improving UI development. It’s been evolving and taking over the internet UI scene since.

React is incredibly popular. Although JavaScript has many libraries and frameworks that make it more useful and powerful, in 2019, React was ranked #3 among all JavaScript frameworks.

Enroll in our Web Development Bootcamp program to learn React and JS.

What is JavaScript?

JavaScript (or JS) is a scripting language that creates and controls dynamic web content – and that’s anything like animated graphics, photo slideshows or forms. JavaScript does for the internet what HTML and CSS can’t.

HTML and CSS are languages made for marking up and styling content. They’re not programming languages. JavaScript is a programming language, and is arguably the world’s most popular. JavaScript can change HTML content, change CSS styles, hide entire elements or reveal them, execute code on command, and a lot more.

Writing something in HTML is like printing it out on a piece of paper: once the words are on the paper, they’re stuck there. Just like (except for in our favorite trademarked fantasy worlds) once a picture is painted, the figures can’t move, once a server delivers HTML to a visitor, the HTML can’t just change – just like a page’s words can’t change once it’s printed.

But JavaScript is great because it’s “front end”, or “client side”, or already running on the device that a visitor is viewing your webpage (or application) from. With JavaScript, you can instruct the device that’s displaying your webpage to change the HTML and CSS after it’s already finished displaying – plus no one needs to refresh or reload the page to do it.

JavaScript’s greatest strength is its ubiquity. You don’t have to get or download JavaScript: it’s already running. Anywhere the internet runs, JavaScript is too. Browsers, computers, tablets, smart phones, they all run JavaScript – it is the programming language of the Internet, and it’s how to display dynamic content online.

But JavaScript is just a programming language that enables all manner of amazing web content. Many of those features are possible because of various JavaScript libraries. A JavaScript library is a bunch of code that was written by someone to provide functionality by using JavaScript but then got packaged up separately (because otherwise, JavaScript would be far too massive to put on everyone’s devices).

JavaScript isn’t just popular, it’s one of the three languages that any web developer – and most applications developers – simply have to learn. HTML defines what a web page’s content is. CSS specifies how the content looks. And JavaScript programs the behavior of the web page. A developer who only knew two of those languages would be hard-pressed to make interesting websites or applications.

When Would You Use React?

Any time you’re building or customizing a graphical user interface for a website, webpage or application, you need ReactJS. If you want to work as a front-end developer, a web designer who codes, or a web developer, learning and using ReactJS is a no-brainer. If you plan to have a user interface in any project you develop, React is the tool you need to know to do that.

To explain what ReactJS does – and when – we need to get a bit technical. Whenever a webpage gets delivered from a server, a user’s browser breaks down each constituent part of the page and holds them in its memory in something called the Document Object Model (DOM). It uses this breakdown to understand the (sometimes very complicated) relationships between every element on the page.

Normally, if you interact with a web page (like clicking a button), your browser communicates that change to the server and requests the DOM all over again. Rather than use up all the bandwidth and time, React creates a virtual copy of the DOM and watches what the user does. Then, React responds to changes the user initiates and only asks for a new DOM when absolutely necessary. Doing that is faster and requires less bandwidth, plus allows for much, much more functionality with graphics-heavy interfaces, buttons, and navigations.

To understand what React does, imagine a blog comment form. A user writes their comment to a post and hits “Comment” – normally the browser would send that comment to the server and wait for a response before refreshing the page and showing the comment. But React takes the comment and only updates the section of the DOM that needs updating. (Obviously, it doesn’t drop the communication with the server altogether, there’s just less total information requested

So, in technical terms, any time you need to alter the DOM without requesting a refresh, you would use React. In more simple terms, any time you need to change the appearance of a page or application based on user input, you would use React.

When to Use JavaScript

JavaScript is an obvious necessity for any web developer or application developer. If you’re building websites or web applications, JavaScript enables almost every task you could dream up. The trick to learning JavaScript is recognizing when to incorporate libraries rather than hand-code repetitive functions.

A dirty little secret of quite a few web developers and application developers is that the vast majority of their code is nothing more than a borrowed and slightly tweaked JavaScript library. There’s no shame in recognizing that the application or webpage functionality you’re working on involves a simple JavaScript function that someone else has needed for their own project and borrowing their code to accomplish a similar result.

A web developer or application developer should be using JavaScript any time they’re working with complex features for a site, page or app. If you need your product to do more than just sit there and show static data, JavaScript is what you need.

Is React Better than JavaScript?

No, React isn’t better than JavaScript. But comparing the two is tricky because React is a JavaScript library – it takes the existing code for JavaScript and makes it more powerful in a specific way. So, on one hand, there wouldn’t realistically be a React without JavaScript – but on the other hand, JavaScript out-of-the-box isn’t capable of doing what React can do.

Is JavaScript Easier than React?

Yes, JavaScript is probably easier to learn than React. But don’t make the mistake of thinking that just because React is a JavaScript library that once you know JavaScript, you’ll know how React works. For instance, just because you know English doesn’t mean you know how to write poetry. And just because you know JavaScript doesn’t mean you understand what React does, how it does it, or what it takes for it to work properly.

But that doesn’t necessarily mean that you absolutely have to learn JavaScript before moving on to React. If you were starting from scratch and knew that React was the tool you wanted to learn, you could jump in and start.

How to Learn React or JavaScript

Think of it like learning to swim. The safest, most reliable way to learn is with floating, then breath control, then strokes, and then more strokes, and then a lot of practice, over a long period. Or you could jump in the lake and figure it out as you go. It’s harder, for sure – you run a risk of giving up. But if you bull through (and survive), you’ll probably learn the best way for you to swim. And you’d probably be more resilient once it was all said and done for having felt like you were close to drowning the whole time.

ReactJS is a simple and flexible extension to JavaScript that makes it possible to create interesting and striking user interfaces. JavaScript is one of the world’s most popular programming languages for updating and changing HTML and CSS. Web developers and applications developers shouldn’t ask if they’ll learn either React or JavaScript, but when.

You can start learning HTML, CSS, JavaScript, React, and other valuable languages in the QuickStart Web Development Boot Camp.