Skip to content

Introduction to React for Javascript

React Newton S Cradle

What Is React?

Put simply, React is a javascript library for building user interfaces. Designed by Jordan Walke and Denis Popov (two software engineers at Facebook), React was built for creating large-scale applications that store and modify data without reloading pages. Influenced by Angular and other front-end libraries, React aims to provide speed, simplicity, and scalability with the use of its notable features. In this post, I’m going to walk you through React’s capabilities and explain why it’s my favorite library.

React and Components

When dealing with React, forget what you know about MVC frameworks and the “Separation of Concerns” methodology. React is a paradigm shift for those who have worked with MVC frameworks in the past, as there are no models, view or controllers—there are only components.

React can be thought of as a “Separation of Components” methodology. Using the single responsibility principle, the UI should be broken up into a component hierarchy that encapsulates the behavior you need. Ideally, each component should perform a single task that will be used in conjunction to create our application. The advantages of a component-based application are vast: components are composable, reusable, maintainable, testable, and can be conditionally-rendered based on the state of the application.

Here’s how to use ES6 to define a component:

class Welcome extends React.Component {

 render() {

   return <h1>Hello, {}</h1>;



Here’s how to render a user-defined component:

const element = <Welcome name=“Brian" />;





Props in React

Properties (or props) are a set of immutable values that are passed to a component’s render method. Props are a way of passing data from a parent component to a child component. This is a channel in which components can communicate with each other, always from the top to the bottom.

This uni-directional flow is advantageous for many reasons and uses React to its greatest potential. Any and all declared components must never modify props as they are read-only and immutable values. Components in React must act as pure functions with respect to their props. Consider the following:

This is a pure function because it does not attempt to change its inputs:

function sum(a, b) {

 return a + b;


This is an impure function because it changes its own input:

function withdraw(account, amount) { -= amount;


To make our UI interactive and dynamic, we will need more than just being able to pass around immutable properties. We will need to trigger changes to our underlying data model with the use of state, covered in the next section.

State and Unidirectional Data Flow

State allows React to update its outputs in response to user actions and network responses without modifying props within a function. The key thing to remember with this mechanism is “properties flow down, actions flow up.” One of the most challenging parts for newcomers is identifying where your state should live. Before we identify which component will hold state, we must remember that react applications have a unidirectional data flow. This means that a common parent should manage state in a multi-component application and pass the resulting values down to all of its children.

This methodology is advantageous because we now have a single source of truth. There are a few simple steps we can follow to identify where state should live within your multi-component application.  

  1. Identify every component that renders something based on state.
  2. Find a common parent component.
  3. Either the common parent or another component higher up should own state.
  4. If all else fails, create a component simply for holding state and add it above the common parent component.

Once an action is performed on a lower level component and flows up to its parent, a new object is created and passed down to its children. React’s virtual DOM will compute the resulting differences and then update the browser’s DOM efficiently.

Virtual DOM

React’s Virtual DOM is a more efficient way to update the UI than updating the browser’s DOM directly. This is one of the most notable features of React because of the abundance of benefits it provides to our application.

The idea behind React’s Virtual DOM is to minimize and batch DOM updates that require redrawing the web page. Updating the browser’s DOM is fast, but the layout changes the browsers must render can happen very slowly. Every time the DOM is changed, browsers need to recalculate CSS and repaint the web page. The best thing any browser can do to shorten the time to repaint the screen is to minimize and batch the DOM changes—which is exactly what React’s virtual DOM does.

How does React’s virtual DOM work? It’s essentially the same thing as the browser’s DOM, a hierarchy of nodes that contain elements and their attributes along with content as object and properties. The virtual DOM’s node tree is created by our components’ render methods and is updated in response to actions updating our data model. Whenever our data model is changed, there is a three-step process to update our browser’s DOM.

  1. The entire UI is re-rendered in a Virtual DOM representation.
  2. React will calculate the difference between the previous state of the virtual DOM and the new one.
  3. The browser’s DOM will then be updated with the computed difference, essentially applying a patch.

React’s virtual DOM provides an elegant and simple way to asynchronously update our browser’s DOM, which can free up mental capacity and help optimize our user interface by applying minimal updates to the browser’s DOM.

React: The New Industry Standard

React, in my personal opinion, is the premiere javascript library for creating user interfaces. React’s stateful and reusable components combined with its virtual DOM’s ability to create highly scalable, high performing, and interactive applications make React the most desirable library in our industry today. React also outperforms its nearest competitor, Angular, which promotes two-way data binding rather than react’s single source of truth, one way data binding, and uni-directional data flow.  

In addition, React’s virtual DOM takes abstraction to another level by minimizing and applying asynchronous patch updates to our browser’s DOM fast and flawlessly. React’s virtual DOM is also superior because we can render that DOM on the server for server-side rendering which other competing javascript libraries do not offer. All of these features are just high-level concepts of React, but are the reasons why it is my personal favorite library and the new industry standard way of creating your next application.

If you have any questions about React or javascript frameworks, feel free to reach out using ABT’s Contact Us page.

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project


Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

What is the best web development framework?
Many people commonly ask “what is a framework in web development?” Web development frameworks can easily be confused with web development tools, languages, or parts of the web development stack (like PHP, Ruby, or Javascript).
Learn More about What is the best web development framework?
What is the best programming language for web development?
If there was one “best” programming language, then everything else would be obsolete. The reality is that there are so many different programming languages because there is no “best” language for any situation.
Learn More about What is the best programming language for web development?
How much does web development cost?
Web development can vary from a few hundred to millions of dollars depending on what is needed. You may simply need some changes to something that already exists, or you'd like to build a large or complex application.
Learn More about How much does web development cost?
What is the best way to become a web developer?
We get lots of questions from university students working on projects -- How do I get into web development? How long does it take to learn? How much do web developers make?
Learn More about What is the best way to become a web developer?
What is front end vs. back end development?
As web development evolved, it separated into logical specialization: front end web development and back end development. While back end development involves the server-side development, front end is the final rendering.
Learn More about What is front end vs. back end development?
What is full stack web development?
Full stack web development as a term evolved due to the separation of roles between front end and back end developers. A “full stack” developer is a developer that can work in both front end and back end technologies.
Learn More about What is full stack web development?
How can I improve the performance of my application?
There are several primary reasons that applications perform poorly, and in some cases it’s a combination of several. 1) Data latency: If your application is making calls to a data source (whether it’s an API or a direct call) and there is latency at the data provider, your application performance will suffer.
Learn More about How can I improve the performance of my application?