Introduction to the React Library and Angular Framework

When starting a new JavaScript project you should use the best tools at your disposal. It can be overwhelming how many there are to choose from! React and Angular are two very popular choices, and for good reason. Both React and Angular are all about components, helping keep code smart and reusable.

React

• React takes advantage of JSX for its markup syntax. JSX is pretty similar to HTML, but is a little more strict. One slight difference includes, using className instead of class. Keep in mind, if wanting to return multiple JSX tags in a return, they must be wrapped in a shared parent wrapper, it can just be an empty wrapper. This syntax also allows you to insert JavaScript wherever you’d like, just inside some curly braces.
• As far as updating components state, you’ll want to use React’s useState. First you’ll need to import it into your file. Like, import { useState } from ‘react’; You’re free to then declare state variables, const [followers, setFollowers] = useState(0); This can be used to keep track of whatever states you need, but the naming convention is variableName and setVariableName. Another convention is to have all components separated into their own files.

import { useState } from 'react';

function SayHello(){
  const [exclamation, setExclamation] = useState('!');

  function handleClick(){
    setExclamation(exclamation + '!');
  }

  return (
    <>
      <p> Hello world{exclamation} </p>
      <button onClick={handleClick}>
        Get Excited!
      </button>
    </>
  );
}

Angular

• While both are all about components, that’s not all Angular is about. Being that Angular is a Framework, it has many more tools in its belt. Two major ones are its own Command Line Interface(CLI) and TypeScript, which adds upon the JavaScript language especially useful in errors. The documentation explains it eloquently,

"With Angular, you’re taking advantage of a platform that can scale from single-developer projects to enterprise-level applications."

• Peeking back into conventions, Angular’s is a bit different. Components also go into their files, but naming should follow say-hello.component.ts. Each component is going to need a decorator for defining a selector, the tag (based on the file name), and an HTML template, for browser rendering.

@Component({
  selector: 'say-hello',
  template: ` <p> Hello World! </p> `,
})

Some major upsides

Checking out the documentation for either, you’ll find some cool tutorials to help you get started. React will help you build a Tic Tac Toe game, while Angular allows you to choose between your first web app or their Tour of Heroes.

React

• Pramesh Jain compared React’s and Angular’s components,

“React is way ahead then Angular in terms of components, features, migration, updates, and architecture. So, it does consist [of a] more speedy and brighter future than Angular.”

• When it comes to performance, React uses a virtual DOM and one-way binding instead of a real DOM and two-way binding that Angular does. Giving us some faster speeds at run time.

Image from altexsoft

• On a personal note, I am a big fan of the React documentation’s pleasing UI.

Angular

• Angular has many libraries for your projects, allowing for more than its base framework. If you feel so inclined, you can even publish your own. There are many development tools as well.
• Angular comes with architecture patterns, MVVM(Model–View–ViewModel) and MVC(Model-View-Controller). While the two have some differences, they allow for the separation of business logic and data with the UI.

Image from MDN

Some potential downsides

Both release frequent updates, leaving projects with more maintenance to keep up with the newest updates.

React

• React is still just a library, and as Bala Krishna Ragala said,

“Developers do not enjoy what they can have in a fully featured framework such as Angular”.

• As far as Angular’s previously mentioned architecture patterns, React does not have these capabilities. React is controlling the view, and for everything else, you’ll need to research which other frameworks or libraries would be right for you. This adds to potential issues.

Angular

• Many bloggers refer to Angular’s learning curve as steep, Biz4Solutions adds,

“and this is more so for newbie developers. Angular developers must be well versed in concepts like TypeScript, reactive programming (RxJS), etc., and multiple aspects like templates, components, services, modules, dependency injection, etc”

RxJS in itself can be hard to understand with unintuitive errors. New developers might have further confusion if new to classes or components, they may have no understanding of dependency injection. The documentation can feel lackluster to people as well. Then likely, ending up with further delays in understanding Angular.

• If you aren’t a newbie, installing Angular onto your project involves a lot of boilerplate code. Not a big deal for a large project, but for a quick idea, can be a bit of a drag.

How To Choose For Your Next Project

This isn’t a one-fits-all situation here, like most choices programmers make, it depends on your situation and goals. If you’re new to programming, with no knowledge of either, you will almost definitely have an easier time starting a new project with React. As well as a smaller project, as it involves less setup and boilerplate code. If front and back end are a priority, then Angular might be the way to go. It’ll have support for it straight out of the box. For projects that need the support of a full framework, Angular does come with lots of tools.

All in all, they are both well respected in the JavaScript community and either would be a great addition to your next project! Making these decisions can be difficult, but now you should be more informed to go and start coding!