Quick Glance At: React versus Angular

Both React and Angular are widely popular JavaScript technologies for building single-page applications (SPAs). Both are incredibly capable and well supported.

If you want to build a new application, you will probably succeed with either of the two. Yes, Angular has the "batteries included"... so, for some situations that Angular supports out of the box, you will have to use a library or write some more code when you use React.

If you are likely to succeed with either of the two, does it matter which one you choose? What are the similarities and differences? In which situations do you need to do some extra work with one technology or the other?

Concrete Examples

In this guide, I want to compare React and Angular based on some real-world problems. I want to show you how to solve those problems using both technologies by providing you with concrete examples.

And even though I, personally, have a slight preference for React, I am striving to write this comparison as neutrally as possible. Because, as I have already mentioned, both are great technologies.

In the chapter "Getting Started", I will show you how to set up an empty application, how to write your first component, and what the core concepts are. Then, I will gradually move on to the more advanced stuff.

If you want to compare the two technologies;
If you already know one of them and want to learn the other by connecting to what you already know;
If you want to learn both based on concrete examples;
If you are looking for solutions to defined problems;

This guide is for you. But for now, it is a work in progress. I will add more chapters and sections in the coming weeks and months.

I hope that you find this guide useful. If you have any questions or if you need help, please contact me. You can always find my contact information at the bottom of each page.

-- David Tanzer (business@davidtanzer.net)

Getting Started

In this chapter, you will learn how to create your first React/Angular app with command line tools, how to write your first component, how to use the development tools and more.

It will also teach you the philosophy of React and Angular and some of the core differences.

Use create-react-app, pass in your application name and use the typescript template: npx create-react-app mood-react --template typescript. Learn More...

Use the Angular CLI to create a new application and supply the name: npx -p @angular/cli ng new mood-ng. Learn More...

The first component can be found in a single file, src/App.tsx. Edit this file to add the "hello world" functionality. Add new TypeScript functions to add more compoments. Learn More...

The first angular component contains of two files: src/app/app.component.ts and app.component.html in the same directory. Edit both files to add the "hello world" functionality. Use the Angular CLI to add more components. Learn More...

A React component is, in the most simple case, a function that creates a React element. Batteries are not included: For certain tasks, you will need additional libraries. Learn More...

An Angular component contains of a template that defines how the component is rendered and a class containing the component's logic. Batteries are included: Angular comes with everything you need to develop most single-page applications. Learn More...

Coming soon. Learn More...

Coming soon. Learn More...