Chapter 3 React

➢ Top Front-End Frameworks

• React, Angular, Vue.js, jQuery, Ember.js, and Meteor.js.

➢ Timeline of front-end JavaScript frameworks

• jQuery is more often considered a library than a framework

➢ React VS Angular

Parameters Angular React

Release Year 2009 2013
Developer Google Facebook
Language TypeScript JavaScript
Type Framework Library
Architecture Component-based Component-based
DOM Real DOM Virtual DOM
Rendering Client/Server side Client/Server side
Learning Curve Steep Moderate
Template HTML + TypeScript JSX + JS (ES5 and beyond)
Performance Slower performance Faster performance

➢ Virtual DOM
• Model gives data to View which in turn creates a DOM for it
• Now each time data was updated by the Model, View had to create a new DOM for it
• This puts heavy load on View and makes our processing slower.
• With ReactJS, when Model gives data to View if the DOM is empty, React will create a
DOM for it
• Now whenever the data updates, React will create a virtual DOM for it and compare the
current DOM with the previous one
• Once the changes are calculated, it will update the Real DOM with only the elements that
have actually changed

A.Hossam
 React Angular
▪ React is a library and not a framework. ▪ Angular is a full-fledged MVC framework.
▪ It is quite simple to understand if you are ▪ Angular uses TypeScript, which takes
familiar with JavaScript. some time to learn.
▪ However, it takes time to learn how to set ▪ Still, Angular is more complex to
up a project properly. understand.
▪ React depends on other libraries to add ▪ Angular itself is a huge library, so initial
functionality. learning effort is worth it.
▪ React was created by Jordan Walke, a ▪ Angular Framework invented by Google It
software engineer at Meta, who released includes set of well integrated libraries to
an early prototype of React called "FaxJS". create single page applications.
▪ He was influenced by XHP, an HTML
component library for PHP.
▪ It was first deployed on Facebook's News
Feed in 2011 and later on Instagram in
2012.
▪ It was open-sourced at JSConf US in May
2013.

➢ Angular and AngularJS

• AngularJS is the first major version of Google's popular Angular family of open source
JavaScript web application frameworks.
• Released in 2010, AngularJS is now scheduled to reach the end of its life on December
31st, 2021.
• After this date, Google will no longer make patches or updates for the AngularJS
framework. 29 Aug 2023
• In 2016 Angular 2 released and still have updates

➢ How react works

• used to create user interface (UI components).
• Set of components or elements to create the user interface [interface composition].
• It is better for large projects without any complexity.

➢ Prerequisites of react
• Knowledge of HTML, CSS, JavaScript, and Git
• Knowledge of package management with Node.js and npm
• Node.js and npm locally installed
• A code editor, such as Visual Studio Code

A.Hossam
➢ What is needed to use REACT?
1. Node JS
o Go and download it from (nodejs.org)but make sure first that its not downloaded on
your device use these steps:
▪ Open cmd (terminal) and write node -v

• In front-end development, there are many frameworks and libraries available for front-
end development. Not all of them are good.
• React is one of the most popular and widely used libraries (it’s not a framework) for
frontend development.
• Web developers were taught for years to create HTML, JavaScript, and CSS separately.
React recommends writing HTML and CSS in JavaScript.
• After testing it, this doesn't seem ridiculous.
• Because front-end development is moving toward component-based development.

➢ Why choose React in frontend development?

1. Easy to learn
o React is easy to learn not just because there are a great number of easy-to-understand
tutorials available on the internet but mainly because it’s a very simple library.
o Unlike Angular, it’s not a complex tool.
o The learning process becomes easier when you have great JavaScript skills.

2. Rich user-interfaces
o React lets you build rich user-interfaces easily.
o Quality of user-interfaces is important because a poorly designed user-interface is
generally less user-friendly, and the users will not like a poorly designed UI.

3. Faster development
o If it takes a huge amount of time to build a simple thing, you’ll lose money.
o On the other hand, if you can deliver products quickly, you can earn cash quickly and
your clients will also be happy.

4. Trusted by great companies

o React is used by great companies and startups such as Facebook, Dropbox, Khan
Academy, CodeAcademy, Netflix, Airbnb, PayPal, Walmart, Tesla Motors, IMDb, and
so on.
Why are so many great companies and startups using this technology?
o The answer is that it’s undoubtedly a very high quality tool for frontend development.
Considering that super successful companies like Facebook and PayPal use React,
that must mean that it’s a truly useful library.

5. Strong community support

o One of the biggest reasons why you should choose React for frontend development is
that it has a very strong community support.
o A large community of React developers is making it better as it’s an open-source
library and coders from around the world are helping people learn the technology in
different ways.

A.Hossam
 6. Strong community support
o The following figure shows that Google gives 82,500,000 results for the search term
‘react tutorial’

➢ When to Use React?

• The content lists scenarios where using React is beneficial:
o You need a dynamic, interactive UI (e.g., dashboards, social media apps, e-
commerce).
o Your app requires high performance with efficient updates (Virtual DOM).
o You want reusable components to build scalable applications.
o You plan to work with React Native for cross-platform mobile apps.
o You prefer a large ecosystem with community support, libraries, and tools.

➢ React Directly in HTML

• The quickest way start learning React is to write React directly in the HTML files.
• This way of using React can be OK for testing purposes, but for production you will need
to set up a React environment.

<!DOCTYPE html>
<html>

<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
</head>

<body>
<div id="mydiv"></div>
<script type="text/babel">
function Hello() {
return <h1>Hello World!</h1>;
}
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
root.render(<Hello />);
</script>
</body>

</html>
• React is an open-source front-end framework
• React introduces JSX, or JavaScript XML
o JSX can be used to create React components
• JSX follows XML rules
o All elements must be placed inside one parent element
o All elements must be closed
<div>
<h1> React </h1>
<p>JSX follows XML rules. All elements must be placed inside one
parent element. All elements must be closed</p>
</div>

A.Hossam
➢ React JS Basic Concepts Reference
• Before grasping its core concepts, we should know how to build a basic react app with the
hello world output.

import React from 'react';

function App() {
return (
<div className="App">
<h1 style={{ textAlign: 'center' }}>
Hello, world!
</h1>
</div>
);
}

export default App;

The End of Chapter 3

‫ال تنسوا الدعاء لوالدي ولزميلنا عبدللا بالرحمة والمغفرة‬

A.Hossam