Advanced Web Dev.

CHAPTER 2:
The React Component
Every React application is built on the foundation of React components.
It is located in the src/App.js file

The App component

This React component, called the App component, is just a JavaScript function.
In contrast to JavaScript functions, it’s defined in PascalCase.
Function components are the modern way of using components There are other variations
of React components.
The App component returns code that resembles HTML: JSX
JSX: It allows you to combine JavaScript and HTML for displaying highly dynamic and
interactive content in a browser.
function’s signature = parameters.

Reminder: JS variable declaration

Two reasons why let (and const) is(/are) superior to var

•Hoisting : When a variable is declared with "var", it is hoisted to the top of its scope (either the function or the
global scope). This means that the variable can be accessed before it is declared, which can lead to unexpected
behavior and bugs. In contrast, variables declared with "let" or "const" are not hoisted and can only be accessed
after they have been declared.

•Scoping: variables declared with "var" have function-level scope, meaning that they are accessible throughout
the entire function, even if they are declared inside a block (such as an if statement or loop). This can also lead to
unexpected behavior and bugs. In contrast, variables declared with "let" and "const" have block-level scope,
meaning that they are only accessible within the block in which they are declared. This helps to prevent bugs and
makes the code easier to reason about.

CONST VS. LET

a variable declared with const cannot be re-assigned a variable declared with let can be
reassigned.

If a variable goes through transformations over time, which is the case for the sum of the age here, it has to be
defined as let.

Yesmine Chalgham 1
Advanced Web Dev.

JSX:
Everything returned from a React component will be displayed in the browser.
JSX (JavaScript XML) combines HTML and JavaScript.
Everything in curly braces in JSX can be used for JavaScript

● Use curly braces to include JavaScript expressions within JSX.

For example, replace <div> Hello, World! </div> with <div> {Hello, World!'} </div>.

● Use the style attribute in JSX to set inline styles.

For example, replace <div style="color: red;"> Hello, World! </div> with <div style={{color:
'red'}}> Hello, World! </div>.

The Rules of JSX

1.Return a single root element

• If you don’t want to add an extra

to your markup, you can write <> and instead
• This empty tag is called a Fragment.
• Fragments let you group things without
leaving any trace in the browser HTML tree.

2.Close all the tags

3.camelCase all most of the things!

For example, replace class with className, and for with htmlFor.

Yesmine Chalgham 2
Advanced Web Dev.

JS Data Types and Data Structures

• JavaScript is a loosely typed language
• Variables are not assigned to a particular data type
• Seven of eight data types in JavaScript are primitives:
• String • Number • Boolean • Undefined • Null • BigInt • Symbol
• The eighth data type is an JavaScript object:
● Arrays
● Objects
● Functions
Note: "render element" usually refers to a piece of JSX code that defines a component or element to be
displayed on the screen.

CHAPTER 3:
Lists in React:

Output:

Yesmine Chalgham 3
Advanced Web Dev.

JS Array methods
The Array object:
● Stores a collection of multiple items under a single variable name
● Has members for performing common array operations Transforming lists in
JavaScript
- Map
- Filter
- Reduce
1. Map() method
Mapping an array of numbers using a function containing an argument

Mapping an array of numbers to an array of square roots

Parameters
callbackFn : A function to execute for each element in the array. Its return value is added as
a single element in the new array. It is called with the following arguments:
Element: The current element being processed in the array.
Index : The index of the current element being processed in the array.
Array: The array map() was called upon.
Return value A new array with each element being the result of the callback function.

Yesmine Chalgham 4
Advanced Web Dev.

Using map to reformat objects in an array

Using map() on sparse arrays

Calling map() on non-array objects

Mapped array contains undefined

2. Filter() method
It creates a shallow copy of a portion of a given array, filtered down to just the
elements from the given array that pass the test implemented by the provided
function.
An iterative method.
It calls a provided callbackFn function once for each element in an array, and constructs a new array
of all the values for which callbackFn returns a truthy value.
Truthy value In JavaScript, a truthy value is a value that is considered true when
encountered in a Boolean context.
➔ All values are truthy unless they are defined as falsy. That is, all values are
truthy except false, 0, -0, 0n, "" , null, undefined, and NaN
A copying method.
callbackFn is invoked only for array indexes which have assigned values. It is not invoked for empty
slots in sparse arrays.

Yesmine Chalgham 5
Advanced Web Dev.

3. Reduce() method
The final result of running the reducer across all elements of the array is a single
value.
Parameters
Accumulator The value resulting from the previous call to callbackFn.
On the first call, initialValue is specified, otherwise the value of array[0].
currentValue The value of the current element.
On first call, the value of array[0] if an initialValue was specified, otherwise the value of array[1].
currentIndex The index position of currentValue in the array.
On first call, 0 if initialValue was specified, otherwise 1.
Array The array reduce() was called upon
Return value
• The value that results from running the "reducer" callback function to completion over the entire
array.

reduce() without an initial value

Yesmine Chalgham 6
Advanced Web Dev.

• The array parameter never changes

through the process , it's always [15, 16, 17, 18,
19].
• The value returned by reduce() would be
that of the last callback invocation (85).

reduce() with an initial value

• Here we reduce the same array using

the same algorithm, but with an
initialValue of 10 passed as the second
argument to reduce()

Yesmine Chalgham 7
Advanced Web Dev.

React Multiple Components

● Extraction of the List component

● Extraction of Search component

Component tree:

Wrap-up
• Array transformation methods:
➔ map, filter, reduce
• List in React:
➔ map method, use of key for each item
• Multiple components:
➔ Extracting component, Component tree

Yesmine Chalgham 8
Advanced Web Dev.

CHAPTER 4:
JS classes:
A class in object-oriented programming is like a blueprint or a template for creating objects.
● Class should be defined before using it. Unlike functions and other JavaScript
declarations, the class is not hoisted.
● A JavaScript class is not an object. It is a template for JavaScript objects

Properties: “firstName”, “lastName” , Method: Constructor() , Class name: Developer

Using a Class

When you have a class, you

can use the class to create
objects:

The example above uses the

Developer class to create two
Developper objects.

The constructor method is

called automatically when a
new object is created.

Constructor Method
The constructor method is a special method:
• It must have the exact name "constructor"
• It is executed automatically when a new object is created
• It is used to initialize object properties.
If you do not define a constructor method, JavaScript will add an empty constructor method.

Getters and setters

Getter methods get the value of an object (e.g. getName): Use the get keyword for getter
methods
Setter methods set the value of an object: Use the set keyword for setter methods

Yesmine Chalgham 9
Advanced Web Dev.

React Component Instantiation

Virtual DOM
DOM ( Document Object Model)
A tree-like structure that contains all the elements and its properties of a website as its
nodes.
Provides a language-neutral interface that allows accessing and updating of the content of
any element of a webpage.
Virtual DOM
• Every time the DOM changes, the browser has to do two intensive operations:
• Repaint (visual or content changes to an element that do not affect the layout and
positioning relative to other elements)
• reflow (recalculate the layout of a portion of the page - or the whole page layout).
➔ React uses a Virtual DOM to help the browser use less resources when changes
need to be done on a page.
➔ React only updates when a Component changes the state explicitly.
• What happens next is:
• React updates the Virtual DOM relative to the components
• Runs the diffing algorithm (compare DOM trees) to reconcile the changes
• Updates the real DOM
•The Virtual DOM can be referred to as a copy of the actual DOM representation
•It is used to hold the updates made by the user and finally reflect it over to the original
Browser DOM at once, consuming much less time.
ReactDOM
The package provides DOM-specific methods that can be used at the top level of your app
and as an escape hatch to get outside the React model if you need to.
ReactDOM provides the developers with an API containing the following methods and a
few more: render(), findDOMNode(), unmountComponentAtNode(), hydrate(),
createPortal()
render() function
• render() used to render a single React Component, or several Components wrapped
together in a Component or a div element.

Yesmine Chalgham 10
Advanced Web Dev.

Rendering an Element into the DOM

• “root” DOM node : Everything inside it will be managed by React DOM.
• Applications built with just React usually have a single root DOM node.
• If you are integrating React into an existing app, you may have as many isolated root
DOM nodes as you like.

Updating the Rendered Element

React elements are immutable.
Once you create an element, you can’t change its children or attributes.
An element is like a single frame in a movie: it represents the UI at a certain point in time.
The only way to update the UI is to create a new element and pass it to root.render().

React Only Updates What’s Necessary

CHAPTER 5:
Arrow function

Yesmine Chalgham 11
Advanced Web Dev.

* With arrow functions, you can create functions without

using the function keyword.
You also sometimes do not have to use the return keyword.

* If an arrow function’s only purpose is to return a value

and it doesn’t have any business logic in between, you
can remove the block body (curly braces) of the
function.
* In a concise body, an implicit return statement is
attached, so you can remove the return statement.

Handler Function in JSX

Define a function – which can be a normal or arrow function – for the change event of the
input field.
In React, this function is called an (event) handler.
Then the function can be passed to the onChange attribute (JSX named attribute) of the
HTML input field.
The change event is fired for <input>,<select>, and <textarea> elements when the
user modifies the element's value.
Unlike the input event, the change event is not necessarily fired for each alteration to an
element's value.

React’s synthetic event is essentially a wrapper around the

browser’s native event It has more functions that are useful to
prevent native browser behavior (e.g., refreshing a page after
the user clicks a form’s submit button)

Yesmine Chalgham 12