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
