Beginner's Guide to JavaScript Frameworks Part 1: React

Every developer hopes to see their app grow. Developers want to see more users as well as more features to make their app more useful. But that growth comes with challenges like cluttered User Interfaces (UI) or hopelessly large codebases. To combat those issues developers rely on Frameworks to help organize code and take advantage of built-in features to make application deployment easier.

Front-End Frameworks help developers build data-rich and responsive UIs that keep a user’s attention. Seeing an app take in information and reflect changes immediately is now expected from many apps. 

For the world of Progressive Web Apps that means developers need a solid mastery of JavaScript and the Document Object Model (DOM). JavaScript is a versatile language and frameworks help developers take advantage of the power of the DOM. React, Angular, and Vue are three of the most popular JavaScript frameworks for front-end development. But you only need one framework to do the job. How do you pick the best one for your app project? 

Overall, it depends on a variety of factors, including how you want to structure your projects and which features you find easiest to work with. In this guide, we’ll cover the core concepts, advantages, and drawbacks of all three major JavaScript web frameworks: Angular, React, and Vue.

What is Web Development?

Before we jump into the three major web frameworks, let’s define some key web technology terms and concepts.

All three frameworks require a solid understanding of web development, the work involved to create and maintain websites and apps. If you're brand new to programming and/or web development, we recommend brushing up on HTML/CSS/JavaScript before diving into Angular, React, or Vue. 

Hypertext Markup Language (HTML) is used to display and format content on a webpage. This paragraph you’re reading is displayed on this page using HTML, for example.

Cascading Style Sheets (CSS) is used to style web pages. This includes everything from font, colors, imagery, to even animations that make the page interactive and fun to look at.

JavaScript is used to add interactivity to a webpage. When you submit your information on a page, such as when ordering food or clothes, that’s JavaScript in action. The “read more” button that lets you see the rest of the article is JavaScript as well. 

What do React, Angular, and Vue have in common?

There are a few terms and concepts that are leveraged by all three frameworks.

Embracing Modern JavaScript

All three frameworks use the latest and greatest features of JavaScript. In recent years it has added lots of great new features, helping it transform from one of the most dreaded programming languages to the well-loved, robust one it is today. This includes arrow functions which provide short-hand syntax when defining functions, promises that help ensure logical steps are completed in order, and the spread operator which lets you include items in a list without having to retype everything.

Components

All three JavaScript frameworks make use of components, aka the building blocks of a web application. Developers build small, reusable pieces of functionality then combine them into a complete app. They speed up the development process by allowing a developer to make tweaks or fixes in one specific area without worrying about the entire app breaking or affecting another developer’s work in progress.

Think of components like a function. A function in your code should do one thing and return a predictable response every time. Components help you break down problems into smaller, more manageable pieces.

Component-based apps took off after JavaScript introduced modules, which allow developers to use code from other files, effectively avoiding the need to reinvent the wheel. If you have leveraged functionality from a third-party library or package then you are familiar with JavaScript modules.

Command Line Interface (CLI)

All three frameworks have a Command Line Interface (CLI) tool that developers use to quickly create, manage, and scale up projects as they work. They also let developers run test servers so they can see changes in the browser in real time or debug errors as soon as they occur. If you are totally unfamiliar with using the command line then take some time to learn it since they are used in all sorts of programming environments - not just web development. Fortunately, all three frameworks’ documentation cover what you need to know extensively.

Node

Another prerequisite is NodeJS. Node is a JavaScript Runtime Environment that lets us use JavaScript outside of the web browser. It's the tool that will let us install all three frameworks and help our development through the Node Package Manager (npm). With Node we can install packages and create local test servers to see our changes update in real time. It’s not an absolute requirement (especially for Vue) but it makes life much easier for developers looking to get familiar with the typical project structure for each framework.

Now that we’ve seen an overview of various pieces of web dev technology, let's dive deeper into each JavaScript web framework one by one.

React Framework

First up is React. React is the big fish in the Front-End pond. The majority of web developers have used React and thousands of companies use the framework to ship mission-critical apps. The most notable is Facebook, which employs thousands of engineers. They created React out of a need to efficiently organize its code and allow for changes to update quickly and at a global scale.

React: Virtual DOM

Part of the reason React produces such highly performant code is the way React handles the Document Object Model (DOM). The DOM represents the structure and content of a web page. JavaScript uses the DOM to record changes in the browser window and when the DOM detects changes the page can update. Updating the DOM comes at a performance cost especially as code tries to detect what should and should not be updated. 

In response, React uses a “Virtual DOM” concept. The Virtual DOM makes a copy of the page's DOM and changes are only made inside the Virtual DOM. Next, those changes (and only those changes) are applied to the actual DOM. It seems counterintuitive to speed things up by adding an additional step, but it works because the DOM only gets updated with what has changed, instead of replacing the entire DOM all at once.

You can see this yourself by creating an app using the Create-React-App command available via npm or similar package manager (like Yarn). Just type:

create-react-app <the name of your app>

The CLI will compile the files you need in a typical folder structure. Use the CLI to enter the new app’s root folder and you can start a local server that displays the getting started page. The entire app runs from an index.js folder like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker'; 

ReactDOM.render(<App />, document.getElementById('root'));

As you see above, the ReactDOM uses a render function to write the <App> to the page. All the content, functions, and components of an app are contained within one element.  

React Framework: Components

Components can either be a single function or a class in React. React components take in information known as props (short for properties) and use props to return the result you want. The beauty of React is that your entire UI is built as a collection of components that is created and managed by the Virtual DOM. Combined with JSX (explained below) you can combine your component’s functionality and UI elements into one easily managed file.

React Framework: Redux

Redux is a state management tool for React. It is an external library (not a part of React) but because it makes managing things easier you will find most React projects use Redux as well.  Redux is simple to install, you just wrap your <App> component in Redux’s <Provider> Store and every item inside your <App> can be managed by Redux. With the Redux provider in place, you can help ensure that state is updated properly across the entire app and test those assumptions easily. 

Taking a cue from the way React uses the Virtual DOM, the information inside the Redux Store is never updated directly. Instead you create Actions that alert the store when changes need to be registered. The key advantage here is that Redux uses these functions to only update what it knows has changed rather than checking the state of everything available. That saves time and improves app performance. 

React Framework: JSX

React Developers use JSX - JavaScript syntax eXtension - to simplify their projects even more. JSX lets you use HTML elements inside your React JavaScript files.  For experienced developers used to separating their JavaScript and HTML code, this probably seems like a step backwards. But the beauty of JSX is that you can separate your files logically without having to worry about separating your syntax as well.

This helps with maintaining clean code and debugging as well since React's "render" function with JSX cuts down on the lines of code needed to display content. Your components only need to be made up of your .jsx and .css files. 

React Framework Strengths

In essence, React projects are just a bunch of small components combined to create a cohesive web application. Developers love this approach, as it allows for reuse and modularization. They can just focus on the code and can get up to speed on a new React codebase easily.

React’s popularity is a strength all its own. Many programmers like to use React simply because it has such a large developer community. More developers mean more features and libraries to help accomplish tasks that they otherwise would have to recreate themselves.

Best of all, if you know JavaScript then you mostly know React when it comes to syntax. That gives it a very low barrier to entry for any level of JavaScript developer. 

React Framework Drawbacks

There is such a thing as too much freedom. Once you create a React app it is up to you to determine the overall project structure and information architecture. React apps do not come pre-configured with everything you need to create an app - you must pick solutions for state management, routing, and more. That can lead to complexity down the line especially as your codebase grows. You will need strict style considerations if you are working with a large team.

Speaking of style, some developers really do not like combining their HTML with JavaScript a la JSX. It can be confusing to developers who prefer a strict separation of concerns. That is fine since you’re not required to use JavaScript syntax eXtension with the React framework, but it may reduce the overall utility if you decide JSX is not worth the effort.

Ionic React

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript. Web developers looking to get more from their React skills should take a look at Ionic React, the native React version of Ionic Framework. Not only can React developers build great apps for web and desktop, but mobile (iOS, Android) as well. 

The best part of Ionic React? It’s just React: standard React development patterns, the standard react-dom library, and the huge ecosystem around the web platform. Ionic Framework uses React Router and the Virtual DOM just as regular React apps do, so you can use the same libraries and tools you know and love.

Ionic Framework also provides over 100+ prebuilt components that let you quickly build mobile-optimized UIs without having to reinvent the wheel. Getting started is easy:

npm install @ionic/cli 
ionic start myApp --type=react 
cd myApp 
ionic serve

From there, follow this tutorial to learn the fundamentals of Ionic app development by creating a real app step by step.

Bottom Line

Strengths: 

• Large ecosystem and adoption
• Virtual DOM and one way data flow enable highly performant applications
• JSX makes it easy to make components with the UI and functionality combined

Drawbacks:

• No “batteries included:” Developers must pick from a wide variety of tools to build a complete app
• Some developers do not like combining HTML and JavaScript with JSX
  

React Framework is good for developers who: 

• Want a lot of resources for support
• Want to create apps/components quickly
• Pure JavaScript lovers 
  

This is the first guide of a three-part series covering JavaScript frameworks. Next up, Angular.

About Ionic

Ionic is the leading cross-platform developer solution with 5 million developers worldwide. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.

Ionic is a leader in enterprise app development. Thousands of enterprise customers use Ionic to build mission-critical apps for their customers, both external and internal.