init
« Back to Blog
Development

So, You Want to Build a React Application?

by Daniel Zuzevich | Jul 26, 2018 | [[ readEstimate ]] min read

Introduction

In today's fast-moving tech world, it can be tough to decide which tools to use when creating a web application. No place is this more apparent than in the JavaScript community, where popular frameworks like React, Angular, and Vue battle for internet supremacy. Keeping up with these frameworks is no short order, and can be confusing for those that do not use them habitually. The goal of this article is to focus on our preferred tool, React, to explain how it can be used to create powerful and highly scaleable user interfaces within your web application.

What Is React?

Before we dive into more technical details, we should define exactly what it is. Simply put:

React is a JavaScript library for building user interfaces.

Built by the talented minds at Facebook engineering, it has taken the web development community by storm, becoming the gold standard in modern and scaleable web application development. React focuses specifically on the user interface portion of your application, and is designed to be fast, robust, and easy to use for developers that are skilled with JavaScript.

Because React only handles a small subset of your entire web application, it allows for third party modules to be easily integrated and swapped out with relative freedom. This highly customizable style is opposed to a tool like AngularJS, where strict standards exist and lots of features beyond your UI are built into the framework whether you need them or not. Some don't appreciate having to use third party modules with React, but I believe it is the better way to go.

How Does React Work?

Instead of covering the internal, technical aspects of React, I will touch on two important, high-level concepts:

React is Declarative, Not Imperative.

What does declarative mean? In computer science, there are two terms thrown around when it comes to programming styles. An imperative style means writing code that is highly specific, where the programmer says exactly how to perform an operation in a strict, procedural fashion. In contrast, a declarative style means you describe the result you would like to achieve, without going into detailed specifics of exactly how to achieve that.

React is declarative because you simply describe the UI and functionality you would like to present to the user, and the internals of React take care of most of the technical aspects needed to achieve it. Essentially, it provides an abstraction to help developers write less and more maintainable code.

This is not to say that React handles everything for you and there is no thinking required from the developer. React provides a powerful API for developers to tap into, and customize to their needs.

Although this may be confusing, know that React code will be much easier for developers to write and maintain, versus something like jQuery spaghetti code. A poor codebase can make or break a company, so choosing wisely is vital.

React Is Component Based

The philosophy behind React is to break your UI down into small, reusable pieces instead of writing JavaScript in monolithic files with thousands of lines of code. Approaching your UI in a component-based structure separates your UI into individual JS files, which reduces the number of lines of code per file significantly, and makes readability a breeze. While this is super useful, it is not the only benefit that comes with using a component-based model. 

Another reason to build your UI in components is that, if done correctly, they can be reused in other projects and applications, with little-to-no work to transfer them over by the developer. This would be nearly impossible if your codebase was using highly imperative programming (like jQuery, for example), where most of the code is tied to the individual project.

If you can wrap your head around these two concepts, then you should now have a good understanding of what React is capable of.

Personal Opinions on React

I believe that React is a great choice for stakeholders, as well as development teams. 

React makes development teams better at JavaScript in general. Its reliance on using core JavaScript features forces teams to understand more of the internals of the language, as opposed to other frameworks like Angular and Vue, where unknown, magical things happen behind the scenes when using HTML templates.

As for why it's smart for stakeholders, if done properly, they should not have to worry that their user interface will be a hindrance in growing their business. Adding new features and modifying existing ones can be quick and painless in React.

Build A React Application With Grafton Studio

We are here to provide expert development of your React application. Grafton Studio can take your idea from initial concept all the way through to the development phase, and our user experience and design services are a great complement to our React skillset.