Angular vs React

H. M.Sohaib Faoorq
Angular
Angular is a TypeScript-based free and
open-source web application framework
led by the Angular Team at Google.

https://angular.io/
Adv. Web Overview – H.M.S.F 2
Prerequisites for Angular
 HTML
 JavaScript
 TypeScript

Adv. Web Overview – H.M.S.F 3

Angular Main Components
<app-root>
The first component to load and the container for
the other components.

Adv. Web Overview – H.M.S.F 4

Angular App Structure

Adv. Web Overview – H.M.S.F 5

Verify Installations
Open “Windows PowerShell”
 Check NodeJs Version
“node –v”
 Node Package Manager
“npm –v”
 Angular CLI (command line interface)
“npm install -g @angular/cli”
 Angular
“ng --version”

Adv. Web Overview – H.M.S.F 6

CLI for Angular
 ng new ‘ProjectName’

 ng generate

 ng serve

 ng Test

Adv. Web Overview – H.M.S.F 7

CLI for New Angular Project
 npm install -g @angular/cli
 ng new my-first-project
cd my-first-project
 ng serve –o
 ng build my-app -c production

https://angular.io/guide/setup-local

Adv. Web Overview – H.M.S.F 8

React Js
React is a free and open-source front-
end JavaScript library for building user
interfaces or UI components. It is maintained
by Facebook and a community of individual
developers and companies.
React can be used as a base in the
development of single-page or mobile
applications.

https://angular.io/

Adv. Web Overview – H.M.S.F 9

Prerequisites for React
 HTML
 JavaScript
 JsX

Adv. Web Overview – H.M.S.F 10

React Main Components
<App />
The first component to load and the container for
the other components.

Adv. Web Overview – H.M.S.F 11

React. Strict Mode
StrictMode
is a tool for highlighting potential problems in an
application. Like Fragment, StrictMode does not render
any visible UI. It activates additional checks and
warnings for its descendants.

Adv. Web Overview – H.M.S.F 12

React. reportWebVitals
Create React App includes a performance relayer that
allows you to measure and analyze the performance of
your application using different metrics.
reportWebVitals(console.log);

Adv. Web Overview – H.M.S.F 13

React App Structure

Adv. Web Overview – H.M.S.F 14

Create React App
You’ll need to have Node >= 14.0.0 and
npm >= 5.6 on your machine.

npx create-react-app my-app

cd my-app
npm start

https://reactjs.org/docs/create-a-new-react-app.html

Adv. Web Overview – H.M.S.F 15

Online Playgrounds for Dev.

 Try a Hello World template on CodePen, CodeSandbox,

or Stackblitz.
  

 https://codepen.io/pen?&editors=0010
 https://codesandbox.io/s/new
 https://stackblitz.com/edit/react-rklny6

Copyright 2005 - The Small Business Depot 16

Adv. Web Overview – H.M.S.F 17