Today, we’re starting out at the beginning. Let’s look at what React is and what makes it tick. We’ll discuss why we want to use it.
Over the next 30 days, you’ll get a good feel for the various parts of the React web framework and its ecosystem.
Each day in our 30 day adventure will build upon the previous day’s materials, so by the end of the series, you’ll not only know the terms, concepts, and underpinnings of how the framework works, but be able to use React in your next web application.
Let’s get started. We’ll start at the very beginning as it’s a very good place to start.
React is a JavaScript library for building user interfaces. It is the view layer for web applications.
At the heart of all React applications are components. A component is a self-contained module that renders some output. We can write interface elements like a button or an input field as a React component. Components are composable. A component might include one or more other components in its output.
Broadly speaking, to write React apps we write React components that correspond to various interface elements. We then organize these components inside higher-level components which define the structure of our application.
For example, take a form. A form might consist of many interface elements, like input fields, labels, or buttons. Each element inside the form can be written as a React component. We’d then write a higher-level component, the form component itself. The form component would specify the structure of the form and include each of these interface elements inside of it.
Importantly, each component in a React app abides by strict data management principles. Complex, interactive user interfaces often involve complex data and application state. The surface area of React is limited and aimed at giving us the tools to be able to anticipate how our application will look with a given set of circumstances. We dig into these principles later in the course.
TABLE OF CONTENTS
- What is React JS?
- What is JavaScript?
- What is a JavaScript Library?
- What is React JS Used For?
- JSX
- Virtual DOM
- React JS Examples
- React JS Community Resources
- Should YOU Learn React JS?
How does it work?
Unlike many of its predecessors, React operates not directly on the browser’s Document Object Model (DOM) immediately, but on a virtual DOM. That is, rather than manipulating the document in a browser after changes to our data (which can be quite slow) it resolves changes on a DOM built and run entirely in memory. After the virtual DOM has been updated, React intelligently determines what changes to make to the actual browser’s DOM.
The React Virtual DOM exists entirely in-memory and is a representation of the web browser’s DOM. Because of this, when we write a React component, we’re not writing directly to the DOM, but we’re writing a virtual component that React will turn into the DOM.
In the next article, we’ll look at what this means for us as we build our React components and jump into JSX and writing our first real components.
JAVASCRIPT
You can read all about JavaScript in our complete Tech 101 JavaScript guide, but here’s the TLDR:
- JavaScript (or JS) is a scripting language used to create and control dynamic web content.
- Dynamic web content includes things like animated graphics, photo slideshows, and interactive forms.
- Anytime you visit a website where things move, refresh, or otherwise change on your screen without requiring you to manually reload a web page, there’s a very good chance JS is the language making it happen.
Or try this one sentence definition: JavaScript is a super important coding language used to add animated and interactive features to websites or web applications (on top of the basic, static structures created by languages like HTML and CSS).
(back to top)
JAVASCRIPT LIBRARY
From the definition above, you can see how JavaScript plays a critical role in website and web application development. But there are times when you need JavaScript to perform repetitive functions—things like stock animation effects or autocomplete search bar features. Re-coding these functions every time they occur becomes a “reinventing the wheel” situation. Annnnoying. This is where JavaScript libraries come in.
JavaScript libraries are collections of pre-written JavaScript code that can be used for common JS tasks, allowing you to bypass the time intensive (and unnecessary) process of coding by hand. If there’s a run-of-the-mill JavaScript function that you keep needing to code (and that other developers before you have needed for their own projects) there’s probably a JS library to ease your pain. Make sense?
OK, so let’s get back to React. There are a lot of different JS libraries out there and React JS is one of them—but what makes it unique? What is React JS used for, and why should you learn React JS? And is it better than other JavaScript libraries?
(back to top)
JavaScript Developers Use React JS
React is a JavaScript library that specializes in helping developers build user interfaces, or UIs. In terms of websites and web applications, UIs are the collection of on-screen menus, search bars, buttons, and anything else someone interacts with to USE a website or app.
Note: readers often ask “is React JS frontend or backend?” The answer is: definitely frontend. You can keep this straight by remembering the “on screen” aspect of UIs—React is used exclusively for “client side” programming (building things that a user will see on screen in their browser window), which makes React JS a frontend library.
Before React JS, developers were stuck building UIs by hand with “vanilla JavaScript” (developer speak for the raw JavaScript language on its own) or with less UI-focused React predecessors like jQuery. That meant longer development times and plenty of opportunities for errors and bugs. So, in 2011, Facebook engineer Jordan Walke created React JS specifically to improve UI development.
In addition to providing reusable React library code (saving development time and cutting down on the chance for coding errors), React comes with two key features that add to its appeal for JavaScript developers:
- JSX
- Virtual DOM
To get an even better understanding of React JS and why you should use it, let’s take a look at both.
JSX
At the heart of any basic website are HTML documents. Web browsers read these documents and display them on your computer, tablet, or phone as web pages. During this process, browsers create something called a Document Object Model (DOM), a representational tree of how the web page is arranged. Developers can then add dynamic content to their projects by modifying the DOM with languages like JavaScript.
JSX (short for JavaScript eXtension) is a React extension that makes it easy for web developers to modify their DOM by using simple, HTML-style code. And—since React JS browser support extends to all modern web browsers—JSX is compatible with any browser platform you might be working with.
This isn’t just a matter of convenience, though—using JSX to update a DOM leads to significant site performance improvements and development efficiency. How? It’s all about the next React feature, the Virtual DOM.
Virtual DOM
If you’re not using React JS (and JSX), your website will use HTML to update its DOM (the process that makes things “change” on screen without a user having to manually refresh a page). This works fine for simple, static websites, but for dynamic websites that involve heavy user interaction it can become a problem (since the entire DOM needs to reload every time the user clicks a feature calling for a page refresh).
However, if a developer uses JSX to manipulate and update its DOM, React JS creates something called a Virtual DOM. The Virtual DOM (like the name implies) is a copy of the site’s DOM, and React JS uses this copy to see what parts of the actual DOM need to change when an event happens (like a user clicking a button).
Let’s say a user enters a comment in a blog post form and pushes the “Comment” button. Without using React JS, the entire DOM would have to update to reflect this change (using the time and processing power it takes to make this update). React, on the other hand, scans the Virtual DOM to see what changed after a user action (in this case, a comment being added) and selectively updates that section of the DOM only.
This kind of selective updating takes less computing power and less loading time, which might not sound like much when you’re talking about a single blog comment, but—when you start to think about all the dynamics and updating associated with even a slightly complex website—you’ll realize it adds up to a lot.
The React JS Ecosystem
It’s common to see React JS described as both a JavaScript library AND a JavaScript framework, so which is it? Or is it both?
At Skillcrush, our curriculum team defines React JS as a JavaScript library and not a framework. This is an important distinction.
The difference between JavaScript libraries (like React) and JavaScript frameworks (like Angular) lies in the fact that—in the case of a library—the developer applies library code in individual instances that call for it. When it comes to frameworks, however, the framework creates a scaffolding that arranges your website or application and provides dedicated areas for framework code to be plugged-in.
To dig into the difference between a library like React JS vs Angular (a framework), you can think of code from a Javascript library in terms of furniture and decorations for a house you’ve already built, while a framework is a model home template you use to build the house.
React JS is sometimes mistaken for a full-blown framework since its robust ecosystem and extensibility makes it such a versatile JavaScript library. Remember, when you use React JS to build website and web application UIs, you have access to:
- React code snippets and components (building blocks of React code used to create specific parts of a user interface)
- The option to use JSX to directly manipulate your DOM
- A Virtual DOM to improve your website’s performance
But on top of all that, React JS is an open source project, meaning anyone can download and modify its source code for free. This also means that, whatever specific UI function you’re hoping to address with React JS, there’s a React library to meet your needs. Your React library size can grow exponentially with React’s community curated library add-ons, ranging from collections of individual UI features to complete React JS templates for building UI’s from the ground up.