Front End Web Development Advanced Track

© Udacity. All rights reserved.

© Udacity. All rights reserved.
 Udacity Connect
Session #1

© Udacity. All rights reserved.

Introductions “in 30 seconds”

❏ Name
❏ Major
❏ Job
❏ Objectives of Enrolling at Web
Nanaodegree.

© Udacity. All rights reserved.

Agenda
❏ Connect Sessions Goals.
❏ Roadmap.
❏ Important Topics & Rules.
❏ ES6 and React Fundamentals.
❏ Q&A.

© Udacity. All rights reserved.

Connect Sessions
Goals
❏ Improving the quality of the learning process.
❏ Helping students to finish the program.
❏ Introducing the updates of the program.
❏ Knowing about communication channels and
interactions.
❏ Knowing about the professional market.
❏ Accessing additional and important learning resources.
❏ Discussions and Q&As.

© Udacity. All rights reserved.

Roadmap
❏ Two Sessions for React Fundamentals
❏ One Session for Project Support and Interview
Questions.
❏ One Sessions for React & Redux.

© Udacity. All rights reserved.

Why React ?
Learning a new skill always takes time and effort. So you don't want to waste your time and
money in learning something that you will not really use or that will become obsolete in a
few years.
You should learn new technology because it will give you something in return.
And that something could be more job opportunities, or scaling up your career as a
developer, or getting a raise at your current job, or being more efficient in your day-to-day
work, or building better products, and building things a lot faster.

© Udacity. All rights reserved.

Why React ?
So with that being said, let me give you my top 5 reasons why you should learn React in
2021.

1.Most Used Library

 So the first reason you should learn ReactJS is because it is the most loved and used
web library among professional developers.
 Every successful business uses react and is looking for new talents daily.
 WhatsApp, Facebook, Uber, Instagram, Salesforce, Dropbox, Daily Motion, Venmo,
CNN are the companies using ReactJS in production.

© Udacity. All rights reserved.

Why React ?
So with that being said, let me give you my top 5 reasons why you should learn React in
2021.

2.Easy to use
React it's a JavaScript library that enables developers to quickly and efficiently build
interactive and dynamic user interfaces with minimal coding.

3.High paying Jobs

 In the US, the average salary for a React developer is 120K a year.(Glassdoor)
 And apart from those jobs, you could also earn a lot by working as a freelancer or
building your own projects with React and selling your products online.

© Udacity. All rights reserved.

Why React ?
So with that being said, let me give you my top 5 reasons why you should learn React in
2021.

4. React Community and Popularity

 The next reason why learning ReactJS in 2021 is worth your time and money is because
React is very popular among developers around the world.
 There are hundreds of great libraries and tools that make building react applications a
lot easier and faster. Such as Material UI: https://material-ui.com/
 It is evolving daily. Engineers at Facebook are working hard to make this library the best
in the market. They are constantly adding features and making React better release
after release.

© Udacity. All rights reserved.

Why React ?
So with that being said, let me give you my top 5 reasons why you should learn React in
2021.

5. Mobile and VR Applications

 Finally, my last reason to learn ReactJS is that you will not only be able to build amazing
and complex web applications, but you will also be able to build mobile and VR
applications.
 With just one technology!
 You'll be able to build a lot of different stuff without having to learn a new framework or
a new programming language every time.
 So when you are looking for jobs, you will have way more opportunities. You could work
as a front-end developer, a mobile developer, or even specialized in Virtual Reality.

© Udacity. All rights reserved.

Revoking Criteria
To avoid the risk of getting revoked from your Nanodegree
and losing your scholarship, make sure you:
❏ Complete all the requirements of your “First Project” for
the first wave AND “Second Project” for the second
wave and submit them before the deadline. You have
until 12 am Cairo time of the deadline date shown in your
classroom to submit your project or it will be considered
late.
❏ Attend your weekly live Connect Session because
attendance is mandatory.

© Udacity. All rights reserved.

Revoking Criteria
Revoking date
 First wave - 3rd week: around the 25th of every month (for
the first month of each cohort).
 Second wave - 7th week: around the 25th of every month
(for the second month of each cohort).

© Udacity. All rights reserved.

Plagiarism
Udacity Honor Code
 I confirm that this submission is my own work. I have not used
code from any other Udacity student's or graduate's submission
of the same project. I have correctly attributed all code I have
obtained from other sources, such as websites, books, forums,
blogs, GitHub repos, etc. I understand that Udacity will check
my submission for plagiarism, and that failure to adhere to the
Udacity Honor Code may result in the cancellation of my
enrollment.

© Udacity. All rights reserved.

ES6 Concepts-Syntax
 Hoisting with Var
❏ Hoisting is a JavaScript mechanism where variables and function declarations are moved
to the top of their scope before code execution. This means that if we do this:

© Udacity. All rights reserved.

ES6 Concepts-Syntax
 Let &Const
❏ There are now two new ways to declare variables in JavaScript: let and const.
❏ Before the advent of ES6, var declarations ruled. There are issues associated with variables
declared with var Such as: var variables can be re-declared and updated
❏ Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined,
the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a
Reference Error.

© Udacity. All rights reserved.

ES6 Concepts-Syntax
 Template Literals
❏ Prior to ES6, the old way to concatenate strings together was by using the string
concatenation operator ( + ).

© Udacity. All rights reserved.

ES6 Concepts-Syntax
 Template Literals
❏ Prior to ES6, the old way to concatenate strings together was by using the string
concatenation operator ( + ).
❏ Template literals are essentially string literals that include embedded expressions.
❏ Denoted with backticks (` `) instead of single quotes ( '' ) or double quotes ( "" ),
template literals can contain placeholders which are represented using ${expression}.
This makes it much easier to build strings.
❏ Here's the previous examples using template literals.
❏ let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick
up your report card.`;
© Udacity. All rights reserved.
ES6 Concepts-Syntax
 Destructuring
❏ In ES6, you can extract data from arrays and objects into distinct variables using
destructuring.
❏ Destructuring borrows inspiration from languages like Perl and Python by allowing you
to specify the elements you want to extract from an array or object on the left side of an
assignment.

© Udacity. All rights reserved.

ES6 Concepts-Syntax
 Object Literal Shorthand:
❏ A recurring trend in ES6 is to remove unnecessary repetition in your code. By removing
unnecessary repetition, your code becomes easier to read and more concise. This trend
continues with the introduction of new shorthand ways for initializing objects and
adding methods to objects.
 For...of loop
 Spread operator
 Rest Parameter

© Udacity. All rights reserved.

ES6 Concepts-Built ins
 Sets
 Maps
If Sets are similar to Arrays, then Maps are similar to Objects because Maps store
key-value pairs similar to how objects contain named properties with values.

© Udacity. All rights reserved.

Important Concepts-AXIOS Library
❏ Axios is a JavaScript library for managing your code’s ability to reach out to the web. It’s common to
use APIs to connect resources, exchange data, and access services.
❏ However, accessing resources on the web is not an instantaneous process.  Thankfully, JavaScript
has the Promise API. Promises are useful when performing asynchronous tasks. Asynchronous tasks
can be thought of as things that do not block other things from happening.
❏ The Promise object represents the eventual completion (or failure) of an asynchronous
operation and its resulting value.
❏ A Promise is a proxy for a value not necessarily known when the promise is created. It
allows you to associate handlers with an asynchronous action's eventual success value or
failure reason. This lets asynchronous methods return values like synchronous methods:
instead of immediately returning the final value, the asynchronous method returns a
promise to supply the value at some point in the future.

© Udacity. All rights reserved.

Important Concepts-AXIOS Library
❏ As the Promise.prototype.then() and Promise.prototype.catch() methods return
promises, they can be chained.

© Udacity. All rights reserved.

Important Concepts-AXIOS Library
❏ What’s the Difference Between Axios and Fetch?
❏ One difference is how each library handles response objects. Using fetch, the response object
needs to be parsed to a JSON object:

❏ fetch('/', {
// configuration}).then(response => response.json()).then(response => {
// do something with data})

© Udacity. All rights reserved.

ES6 Array.Map()

Const array1 = [1, 2, 3 ]

const map1 = array1.map(x => x * 2);

console.log(map1) // [2, 4, ,6] .

ES6 Array.filter()

Const array1 = [10, 20, 30 ]

const map1 = array1.filter(x => x < 25);

console.log(map1) // [10, 20]

.
ES6 Arrow Functions
// ES5
var multiplyES5 =
function(x, y) {
return x * y;
};

// ES6
const multiplyES6 = (x, y)
=> { return x * y }
or
const multiplyES6 = (x, y)
=> (x * y ) .
What’s React
A JavaScript library for building user interfaces

React Features:
It uses VirtualDOM instead of RealDOM considering that RealDOM
manipulations are expensive.
Supports server-side rendering.
Follows Unidirectional data flow or data binding.
Uses reusable/composable UI components to develop the view.
Javascript Libraries and Frameworks
Example
.
 DOM

Workbox

- Workbox is a set of libraries that can power a

production-ready service worker for your
Progressive Web App.
 Virtual DOM
What makes DOM manipulation slow?
The DOM is represented as a tree data structure. Because of that, the changes and updates
to the DOM are fast. But after the change, the updated element and it’s children have to be
re-rendered to update the application UI. The re-rendering or re-painting of the UI is what
makes it slow. Therefore, the more UI components you have, the more expensive the DOM
updates could be, since they would need to be re-rendered for every DOM update.
How is Virtual DOM faster?
When new elements are added to the UI, a virtual DOM, which is represented as a tree is
created. Each element is a node on this tree. If the state of any of these elements changes, a
new virtual DOM tree is created. This tree is then compared or “diffed” with the previous
virtual DOM tree.
Once this is done, the virtual DOM calculates the best possible method to make these
changes to the real DOM. This ensures that there are minimal operations on the real DOM.
Hence, reducing the performance cost of updating the real DOM.
What happens when a DOM node value
is updated ?
Virtual DOM
React Element and React Component
A React Component is a template. A blueprint. A global definition. This can be
either a function or a class (with a render function).

A React Element is what gets returned from components. It’s an object that

virtually describes the DOM nodes that a component represents.

With a function component, this element is the object that the function
returns. With a class component, the element is the object that the
component’s render function returns.

React elements are not what we see in the browser. They are just objects in
memory and we can’t change anything about them.
 React.createElement(React Without JSX)
• Create and return a new React element of
the given type.

• The type argument can be either:

• A tag name string (such as 'div' or 'span')
• A React component type (a class or a function)
• A React fragment type.(Fragments)
JSX: JavaScript

React.createElement JSX
JSX: JavaScript in XML
JSX is an XML-like syntax extension to ECMAScript

The purpose of this specification is to define a concise and familiar syntax for
defining tree structures with attributes.

DOM Elements/DOM attributes

supported: Here
States VS Props& State Management
 In a React component, props are variables passed to it by its parent
component. State on the other hand is still variables, but directly initialized
and managed by the component.
 The state can be initialized by props.

Typechecking With PropTypes

Data Flow

React
Types of React Components
What are React Components?
React components are independent and reusable code. They are the building
blocks of any React application. Components serve the same purpose as
JavaScript functions, but work individually to return JSX code as elements for
our UI. Components usually come in two types, functional components and
class components, but today we will also be talking about pure components
and higher-order components.
Types of React Components
Functional Components
Functional components are functions that takes in props and return JSX. They do not
natively have state or lifecycle methods,
but this functionality can be added by implementing React Hooks. Functional
components are usually used to display information. They are easy to read, debug,
and test.

Class Components
Class components have previously been the most commonly used among the four
component types. This is because class components are able to do everything a
functional component do but more. It can utilize the main functions of React, state,
props, and lifecycle methods. Unlike functional components, class components are
consist of … well, a class.
Officially you can't use hook on class component
Types of React Components
Since the React 16.8 update which added hooks to function components, you
might have seen function components replacing class components
everywhere.

Why convert a class component to a function component?

Types of React Components

React Components are usually re-rendered when:

 Change the State Value

 props values are updated
 forceUpdate() is called
Controlled Components
Controlled Components
In a controlled component, the form data is handled by the state within the
component. The state within the component serves as “the single source of
truth” for the input elements that are rendered by the component.

Uncontrolled Components
Uncontrolled components act more like traditional HTML form elements. The
data for each input element is stored in the DOM, not in the component.
Instead of writing an event handler for all of your state updates, you use a ref
to retrieve values from the DOM.
Create React App
Facebook's create-react-app is a command-line tool that scaffolds a React
application.
Using this, there is no need to install or configure module bundlers like
Webpack, or transpilers like Babel.
These come preconfigured (and hidden) with create-react-app, so you can
jump right into building your app!

Install globally with: npm i -g create-react-app

 Session 1 Q&As

© Udacity. All rights reserved.

© Udacity. All rights reserved.