Angular vs React: Compare the basics

I’m new to React and Angular (new to Angular), and I want to compare the two (a little at a time). I’ll update as I go, but this is my starting point. This assumes that the application has already been created for React and Angular.

1 – Start running the app with React

Index.html is the first file to appear. It has a div that we can use to put whatever we want to display.

A routed application would look like this (if you want to learn more about this section, see the routing article).

const 
Copy the code
ReactDOM.render(           
Copy the code

In the index.js file, we import the components we want to use and, based on the path, decide which components we want to use in the routing variable, which is what will be displayed in the rendering of the root element.

2 – Start running your application with Angular

We also have the index.html file, which looks something like this. Note that the component will be equivalent to our root element in React.

This is the component. Note that the name we use in the HTML code is the string we provide for the selector in the component.

But where is the HTML code that will be displayed? It is the code shown above under templateUrl. Check that out. We found.

In Angular’s case, routing is done in app.module.ts.

3- Use the React base components

In React, you can create your component as a class, or as a function. Going forward, the preferred approach is to use functions, so that’s what I’m going to do here.

In the component file, import what you need to use (at the top).

import 
Copy the code

Create components in functional form.

//with props as the argument if needed
Copy the code
.Copy the code
//using the below to avoid the window scroll when on an element
Copy the code
.Copy the code

With the JavaScript code that the component needs, we’ll have JSX code, “HTML-like” code that uses parts of the JavaScript code.

So, with the React components, styles, HTML, and code, we have everything in the same file and import everything we need to use (other components, React functionality, etc.).

4- Use basic Angular components

With Angular, things get a little more organized (in my opinion), but I find the animations a little weirder than React. In short, a basic Angular component looks like this.

With Angular, we don’t have to import every other component we have to use. We can add components to their modules, and we can access them from other components in the same module.

In the component’s TS file, we’ll also have any JavaScript (typecript in this case) functions, properties, and so on that we need to use in the component. We can then access it in an HTML file.

An example of HTML code is that {{}} allows it to access a property (or a method) in a TS file.

<tbody>
Copy the code

If we access a method (function) directly, we use () along with the function name.

We can not only show things in ts code. We can also use a variable in the TS file to set a property, like this.

<button 
Copy the code

Above, disabled is [], and itIsDisabled is the property name in the TS file. Use a hard-coded value directly and do not include quotes.

If you want to bind an event instead of a property, do so (including () for the event name.

.Copy the code

That’s it for now, but look forward to learning more about it. I’m not sure which one I like best. I’m thinking Angular seems more organized, but maybe React is faster for smaller components. We’ll see. I want to learn enough knowledge to see which one I like best before I do it 🙂

If you have a preference, I’d love to hear it.