Hands-On Review of React JS


react logo

Front-End Development and JavaScript Frameworks

When thinking about front-end development, everything boils down to three key areas: HTML, CSS, and JavaScript. HTML (HyperText Markup Language) defines the structure of a webpage, CSS (Cascading StyleSheets) describes the styles for your site, and JavaScript handles anything interactive in those pages.

 

Building a Complex JavaScript Application

JavaScript is the programming language that modern browsers use and understand. It’s what allows you to interact with pages without the page needing to refresh. JavaScript has changed a lot since it was first created in the mid-‘90s. As browser processing power has increased, front-end developers have been able to build more and more complex (and hopefully dynamic and interesting) applications. 

As application requirements get more complex, so too does the JavaScript powering the application. In an effort to prevent this increase in JavaScript complexity from obscuring the codebase, developers have created libraries that provide shortcuts for common functionality and simplify codebase structure.   React is one such library. A member of the Facebook development team created an early version of React specifically for Facebook in 2010 and seeing the potential for broader applications,  they released it as an open source library in 2013.

React JS

Whereas traditional “vanilla” JavaScript is written like a recipe with step-by-step instructions for the browser to follow, a defining characteristic of React is that it lets developers write in a more descriptive fashion. Rather than writing every single step and needing to  account for every possible combination of UI elements, user choices, etc., developers can describe all the different states (how the UI renders and behaves at a particular time) for an application. Its components and the React library does the work to determine and flesh out the code for all the steps between those states.

React vs. other popular frameworks

There are a number of other JavaScript libraries and frameworks that have been gaining popularity recently. Let’s take a look at how two of them, Angular and Vue, compare with React:

 

  Angular Vue React
Easy to Learn? Not Really Yes Yes
Easy to Set Up? Not Really Yes Yes

Easy to Drop in to Existing Projects?

No No Yes

3rd Party Library Integration Difficulty

Difficult Depends Depends

Good for Large Scale Apps?

Yes Not Really Yes

Good for Mobile Apps?

Yes Not Really Yes

Large Community Support?

Yes Not Really Yes

 

The main takeaways are:

  • Compared to Angular, React has an easier learning curve, is less complicated to set up and drop in to existing projects, and better integrates with third-party libraries.
  • Compared to Vue, React has wider community support, scales up more efficiently, and can better translate to mobile apps.

For these reasons, React is the modern JavaScript library for our projects at agencyQ.

Possible Downsides

Like most new technologies, React has some drawbacks, too. We think they are minor but still worth mentioning:

  • Potential ding to SEO: Out of the box, React components are all rendered in the browser which means there’s less for search engines to find when they crawl your site. This can be mitigated with server-side rendering of React, though.
  • It’s not tiny: It's about 100 kilobytes just for the core library, but in most cases the efficiences are probably worth the 100 kB. It might be worth reducing code (maybe CSS or other JavaScript optimization) or image files to include React in your application or site.
  • Time investment: While easier than some other JavaScript libraries, the learning curve is still significant.

Considering drawbacks, the costs that React presents may outweigh the benefits for straightforward, static sites. 

Why agencyQ Likes React

We’ve had the chance to build some projects with React, and have really liked what we’ve seen so far. The ability to apply it selectively to specific components and pages within a site, rather than having to rebuild an entire site to work with it (a major drawback of Angular) was a huge reason for our decision to try React.  Additionally, with React being  created and maintained by Facebook for use in all of their applications, there is a dedicated (and paid!) support team behind React. This provides us with a little extra peace of mind that the project won’t disappear without notice. Lastly, React comes stock with lots of useful features, like “React Developer Tools,” to help us quickly spin up projects, easily debug them, and effortlessly optimize them.

React is a very usable and intuitive library. If you’re looking for a front-end library to use in the creation of widgets, rich applications, or even adding one of these interactive elements to an existing page, React is well worth considering. 

*Credits: Daniel Thompson and Gretchen Ward also contributed to this post.