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
