Andrew playing the guitar

Andrew Kao

drewcodes@gmail.com

Building with React

SPA Javascript Goodness.


What is React?

React is everyone’s favorite front end technology… but what is it? React.js is a Javascript library developed by Facebook in 2013. The library was Facebook’s solution to creating user interfaces (UI’s) and single page applications (or SPA’s as they’re affectionately known). A single page application is a web application that has dynamic functionality without ever having to refresh the page. Think about how your Facebook notifications just appears to pop up when you receive a new comment or like. Even the re-rendering of only the News Feed when you scroll up or down. These are examples of single page application functionality built using React.

Components

React is a very ingenious library that is conceived around the idea of reusable components and state management. A “component” is just a chunk of code that you can call, use or render when needed and can also be removed from view when not needed. This keeps the code very modular and allows flexibility in scaling an application, while also maintaining a simpler way to debug and troubleshoot your code without running through hundreds or thousands of lines of code.

React is also built using the ES6 or ES2016 version of Javascript. While ES6 isn’t a whole lot different, some of the features of ES6 do have their usefulness. In ES6, the “var” keyword is now replaced with “let” or “const” to distinguish which variables can be used, overwritten and/or locked. This prevents a lot of unnecessary confusion when writing or debugging code in large applications where you may have mistakenly redefine a variable’s value or type. ES6 also streamlines the syntaxes for writing functions, keeping your code a bit more concise and readable.

JSX and Babel

While Javascript ES6 has not been fully adopted by all browsers, we can transpile the ES6 code into ES5 code using Babel. Babel would be assigned the task of grabbing the ES6 code you’ve written and translate it into ES5 code that browsers can understand and render onto your page. The process also allows you to write in more semantically recognizable code called JSX.

JSX is a lot more readable to humans, though it does not necessarily mean it can be understood by the browsers. Babel would reconfigure the code, or transpile the code, into something that the browser can completely understand and render.

Virtual DOM

What’s also cool is that React has a built in feature to run code in a virtual DOM, which saves you time. The purpose of the virtual DOM within React is to create a virtual rendering in the in-memory data structure cache, so it can compare what is currently rendered on a page versus what to render next. React is smart enough to detect only the differences and re-render what is necessary, without changing anything that is the same. This virtual DOM feature saves you re-rendering time because the application just doesn’t have to re-render every single element of the page.

User Interfaces and Components

React’s main purpose is to help front end developers create user interfaces that dynamically changes as it interacts with its users. In traditional front end development, pages typically have to refresh or redirect to a new link or page in order to repopulate data or show a different feature of the site. Using React, front end developers can now build web pages that will never (if rarely) have to refresh or redirect to a different URL because the same page can be used to show different features.

This means you can now design different components that will show different UI’s depending on what the user is interacting with. Each component is a modular piece of HTML-like code that renders HTML elements to a page. Since React is written in Javascript, components can also include in-line Javascript code, similar to writing back end templates in Express.js or PHP.

Imagine that your user doesn’t have to wait for a new page to load just to access your contact form or view a new section of your site. This is done through the power and magic of state management.

State Management

Since users are interacting and moving about on a single website, it’s important to have a way to track what the site is currently rendering and what to render next. This “tracking” is called state and React has a beautiful state management feature built into the library. Without getting too deep and technical, state management allows developers to assign different values to a component’s state depending on what a user is presently doing. Whether its a simple to-do application or a full stack Netflix clone, users will engage with the website in a way that needs to change values of some sort and cause the site to re-render the appropriate state or component.

 

Why Build with React?

React is a client-side solution for building web applications. While traditional applications that require a back end server still exist, the benefits of having a client-side web application is that it would shorten processing and rendering time of the application.

Think of all those times you’ve waited for a page to load after clicking a link. The delay can be attributed to a number of possible reasons such as a large number of users are requesting the page at once, or the server being busy processing other things on its bandwidth.

In React, you can sidestep this by providing the application all it’s necessary code, components and routes on the client side. Since the information is already available on the user’s end, the change of state, rendered components or even linking to another “page” is all happening on their machine.

React has a great tool called React Router. React Router allows developers to build applications and simulate back end routes without actually having a back end. As a developer, you would write routes and assign them to numerous components that are to be rendered, while disabling the browser from actually making a page refresh or requiring it to make a call to a server. This is totally awesome and doesn’t restrict you from only building “one page” applications. You can build a single-page-application (or SPA) that mimics a full website with multiple pages and routes all from the same page.