Wait, what are we talking about?
By components, I am referring to anything that you may have more than one of (think modals, search bars, cards, etc.). This also allows compartmentalization of features to avoid having one daunting block of HTML. For those who aren’t interested in spending hours fine tuning CSS styling, they both offer components ready to use out of the box (I am counting React Bootstrap here) for all your basic needs. So, what is the big deal then… Why choose one over the other?
Both are pretty hefty and can take a few minutes to get installed. The process can be completed with a simple terminal command (technically, two commands for Angular).
Getting Started: REACT
Getting Started: Angular
There is undeniably a learning curve here. Angular components are more modular. Each component typically has a Typescript file that holds all the behaviors, an HTML file, CSS file, and a testing file. Of course, there is a single command (generate) that will provide all of these as a skeleton ready to set up. The HTML file is more advanced and can be used with text interpolation, and binding. The syntax of how to achieve these isn’t immediately obvious. I found myself doing a lot of Googling at first to figure out the creation of a simple form, for example.
Basic Development: React
There is a lot that React can accomplish, but as a complete beginner, it is easy to get started quickly with only understanding a few concepts. The state of components (achieved through useState) is straight forward to manage (think, if a user enters something from an input it can be displayed in real time somewhere else). The rendering of components can be handled by one call to useEffect. Data can be passed around from different components by assigning different arguments (props) when “calling” your component from its parent. If this sounds, tricky, trust me it is not. One ten-twenty minute YouTube video can explain all this and more.
Basic Development: Angular
There are more moving pieces to Angular. Achieving an API call from a component isn’t as simple as calling upon fetch like one might do in a React script. Connecting to a database and routing took more time to figure out. Various Typescript files were necessary to create a model for the structure of data that was expected, a service to communicate between components, and a resolver. Angular has impressive lifecycle hooks for what to do upon initiation, multiple state checks, and destruction. The form validation is also very customizable and has useful presets to track pristine, dirty, etc. ( touched or untouched). Both Angular and React have development servers to locally build your project with one command. Changes are viewable upon each save.
Try them both if you have the interest! I know that is not incredibly helpful, but what better way to find out. I can say that if you are short on time, the rumors are true, go with React. However, if you like to be able to control the minutia of how your components respond to user interaction with a streamlined system, it may be worth your time to learn Angular. At the end of the day, there may be someone accessing your website from their terminal and your fancy interface will not matter either way. 🙂