Scribd
Upload
10 views

angular vs react

The document compares Angular and React, highlighting that Angular is a TypeScript-based framework developed by Google, while React is a JavaScript library created by Facebook. It outlines key features, benefits, and example code for both technologies, emphasizing React's advantages in performance and ease of learning. The comparison table details differences in architecture, data binding, performance, and community support.

Uploaded by

burzuyevrcb5
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views

angular vs react

The document compares Angular and React, highlighting that Angular is a TypeScript-based framework developed by Google, while React is a JavaScript library created by Facebook. It outlines key features, benefits, and example code for both technologies, emphasizing React's advantages in performance and ease of learning. The comparison table details differences in architecture, data binding, performance, and community support.

Uploaded by

burzuyevrcb5
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Angular vs React

Student: Revan Abdulov

Teacher: Nubar Kişiyeva

Group: 692.23E
PLAN
■ What are Angular?

■ Key Features of Angular

■ Benefits of Angular

■ Example Code in Angular

■ Key Angular Tools

■ What is React?

■ Key Features of React

■ React Code Example

■ Angular or React - Which is Better?

■ Angular vs react
What are Angular?
Angular is a web application
framework made with TypeScript
and developed by Google. It is
open-source and helps create
single-page web applications
(SPAs). Angular is a complete tool
that includes everything needed to
build web apps, such as managing
navigation, handling data, checking
forms, and connecting to servers.
Benefits of Angular
Complete Framework
1
It provides a full development environment
with all necessary tools built-in.

Consistent Codebase
2 The framework enforces strict patterns and
standards, ensuring uniformity across large
teams.

Strong Community and Google


3 Support
Since it is managed by Google, long-term
support and updates are provided.
Example Code in Angular

Explanation of the Code


(English)
This Angular code defines
a simple component that
displays a message and
allows the user to change
it by clicking a button.
Example Code in Angular
The code imports the Component decorator from
Angular's core library, which is used to define the
structure and metadata of an Angular component.

selector: 'app-root': This defines the HTML tag


used to render this component in the application.
The tag will be <app-root>.

template: Contains the HTML layout for the


component.

<h1>: Displays a static title, "Welcome to


Angular!".

<p>{{ mesaj }}</p>: Displays the value of the


mesaj property using Angular's interpolation
syntax ({{ ... }}).

<button (click)="mesajDeyis()">Dəyiş</button>:
Adds a button with an event binding. When
clicked, it calls the mesajDeyis() method to change
Example Code in Angular

styles: Contains inline CSS styles specific to


this component:
The <h1> text is blue.
The <button> is styled with padding, a blue
background, white text, and no border.

Declares a mesaj variable initialized with the


string "Salam dünya!" ("Hello world!").

Defines a method that updates the mesaj


property to "Düyməni sıxdınız!" ("You clicked
the button!").
This method is invoked when the button is
clicked, thanks to the (click) event binding in
the template.
Key Angular Tools
Angular CLI For automating development tasks.

RxJS A library for handling asynchronous data


streams.

Zone.js For change detection and event handling.

Karma & Protractor Testing tools for unit and end-to-end testing.
What is React?
React is a JavaScript library
developed by Facebook for
building fast, interactive, and
reusable user interfaces,
primarily for web applications.
It focuses on creating
components, which are small,
reusable pieces of code that
represent parts of the user
interface. React uses a virtual
DOM (Document Object Model)
to efficiently update and
render only the components
that have changed, making it
highly performant.
React Code Example

We import React and the useState hook. useState is a built-in


React hook used for managing the state of a component.

The App component is a functional component that returns JSX


(JavaScript XML). JSX allows us to write HTML-like syntax within
JavaScript.

const [message, setMessage] = useState('Hello, World!');


This line declares a state variable message with the initial
value 'Hello, World!'.
setMessage is the function used to update the state when
needed.

<button onClick={changeMessage}>Change</button>
When the button is clicked, the changeMessage function is
called, which updates the state.

{message} inside the <p> tag is where the state value is


displayed, and it will update automatically whenever the state
changes.
Angular or React - Which is Better?
Both Angular and React are the most popular
front-end technologies in the developer’s
community. They offer several amazing benefits
but React works better than Angular. Moreover,
a huge development community supports React
JS.

Since React consists of Virtual DOM and renders


optimizations, it surpasses Angular in the battle
of comparison. Also, it enables developers to
migrate between React versions without any
hassle. Unlike Angular, it has a very easy and
simple installation process.

In a nutshell, React offers many advantages and


robust solutions for developers, which enhances
the development time and eliminates errors.
Angular vs react
Feature Angular React

Type Framework Library

Architecture MVC/MVVM Component-based

Data Binding Two-way data binding One-way data binding

Language TypeScript JavaScript with JSX

Slower in large apps,


Virtual DOM for faster
Performance uses change
rendering
detection

Learning Curve Steeper Easier to learn

Community Backed by Google Backed by Facebook


RESOURCES

■ https://www.damcogroup.com/blogs/angular-vs-react-definitive-guide#:~:text=Angular
%20is%20a%20TypeScript%2Dbased,Material%20UI
Hand drawn flat design metaverse illustration II

■ https://radixweb.com/blog/react-vs-angular
Hand drawn flat design metaverse background IV

■ https://v17.angular.io/guide/what-is-angular

■ https://legacy.reactjs.org/
THANKS
FOR
WATCHING

You might also like