Introduction

ES6 is the cornerstone in JavaScript revolution.

After this rise up, many libraries and frameworks appeared. React.Js is one of the most famous.
That’s why we have decided to make a focus on learning React in this super Skill !
During this super skill we are going to:
• Explore what’s React.Js and why it is famous?
• Learn how to setup the environment to use React.Js?
• Discover how to get started with React.Js?

What is the Virtual DOM?

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of
a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This
process is called reconciliation.
This approach enables the declarative API of React: You tell React what state you want the UI to be
in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation,
event handling, and manual DOM updating that you would otherwise have to use to build your app.
Since “virtual DOM” is more of a pattern than a specific technology, people sometimes say it to
mean different things. In React world, the term “virtual DOM” is usually associated with React
elements since they are the objects representing the user interface. React, however, also uses
internal objects called “fibers” to hold additional information about the component tree. They may
also be considered a part of “virtual DOM” implementation in React.

Is the Shadow DOM the same as the Virtual DOM?

No, they are different. The Shadow DOM is a browser technology designed primarily for scoping
variables and CSS in web components. The virtual DOM is a concept implemented by libraries in
JavaScript on top of browser APIs.

What’s React?
As we said earlier React.js is JavaScript library for building user interfaces.
But, what is a library in reality?
A library is sets of function and classes that are grouped in a package. The main idea behind
libraries is to create a reusable code that any one in the development community can use it and
contribute to it.
What’s React?
If you type “What’s React.js?” in google you will find thousands of similar articles talking about
React.js. But let’s make it simple.
React.js is an open-source JavaScript library that is used for building user interfaces specifically for
Single Page Applications.
It’s handling the view layer for web and mobile applications.

What’s Single Page Application ?

Modern apps tend to adhere to what is known as a Single-page App (SPA) model.
This is a world where you never navigate to different pages even if you reload the page Instead, the
different views of your app are loaded and unloaded into the same page itself.
The App.js component will be the starting point for our SPA, App.js is the main Component.

Why use React?

Sometimes in a real-world applications, developing a website using HTML, CSS and JavaScript can
be very hard. Here’s why:

• You usually need to create an HTML, CSS and JavaScript files

for every website page.

• In case you wanted to move an element that lives in page A to

another page B, you will have to copy all of its HTML, CSS
and JavaScript to make it work.

• Sharing CSS and JavaScript can make maintenance really

difficult as the website grows.

Why use react?

So to resolve this problems, libraries and frameworks have come to light. Which make web
development mush more easier. One of this solution is React.js.

Why should we choose React.js to learn?

The answer of this question is very simple, React is:
• Easy to learn.
• Highly maintainable.
• Super fast in rendering views.
• Component based, with the ability to split the code as much as we want
• Simple in debugging.
Features of react
There are many excellent features of ReactJS that are very useful while creating the user interface.

Features of react
• JSX: React uses the JSX syntax in writing it’s component which make the component more
independent.
• Component: React adopte the component based application approach which allows us to
use the same component as many times as we need.
• One way data flow: React only allows us to pass data from parent to child, which is very
helpful to trace data when debugging.
• Virtual DOM: React uses the Virtual DOM which makes rendering UI super fast.
• Simplicity: React is very simple to learn and work with especially for newcomers.

Apps built with react

The digital world is changing as we speak. In such reality, it is definitely hard to adapt to trends.
However, that is exactly what the big names in the industry are doing.
Major apps like Facebook, Instagram, Netflix and others are constantly improving their experience
and adapting to new frameworks and trends.
As of recently, there is a big word of mouth going around ReactJS and its impressive features.
The proof for its popularity is best described by the apps that are using ReactJS – and today, we are
showing you the list of most impressive apps based on ReactJS.
Most of these are : Facebook, Instagram, ADA, Netflix, Dropbox, Paypal ...Etc

Example Netflix movie

Let’s look at an example to highlight the difference between normal HTML and React.
Let’s try to rebuild the netflix movies list using HTML then using React. We will compare both
versions later on.
Using HTML, we end up with this unreadable chunk of code
<div class="nm-content-horizontal-row">
<ul class="nm-content-horizontal-row-item-container">
<li class="nm-content-horizontal-row-item" role="menuitem">
<a
class="nm-collections-title nm-collections-link"
href="https://www.netflix.com/tn-en/title/70079583"
data-uia="collections-title"
>
<img
class="nm-collections-title-img"
src="..."
data-title-id="70079583"
alt="The Dark Knight"
/>
<span class="nm-collections-title-img placeholder"></span>
<span class="nm-collections-title-name">The Dark Knight</span>
 </a>
</li>
<li class="nm-content-horizontal-row-item" role="menuitem">
<a
class="nm-collections-title nm-collections-link"
href="https://www.netflix.com/tn-en/title/80013871"
data-uia="collections-title"
>
<img
class="nm-collections-title-img"
src="..."
data-title-id="80013871"
alt="American Sniper"
/>
<span class="nm-collections-title-img placeholder"></span>
<span class="nm-collections-title-name">American Sniper</span>
</a>
</li>
<li class="nm-content-horizontal-row-item" role="menuitem">
<a
class="nm-collections-title nm-collections-link"
href="https://www.netflix.com/tn-en/title/80064516"
data-uia="collections-title"
>
<img
class="nm-collections-title-img"
src="...."
data-title-id="80064516"
alt="The Revenant"
/>
<span class="nm-collections-title-img placeholder"></span>
<span class="nm-collections-title-name">The Revenant</span>
</a>
</li>
</ul>
</div>

Exemple Netflix movies: using React.js

On the other hand, redoing this in React using components, we end up with a much cleaner code.
Notice that <Movie/> tag is not part of HTML, it’s a tag that we created using React, it’s called a
React component.
<Container>
<Row>
<Movie image={...} title=”The Dark Knight”
href=”https://www.netflix.com/tn-en/title/70079583”/> <Movie image={...}
title=”American Sniper”
href=”https://www.netflix.com/tn-en/title/80013871”/> <Movie image={...}
title=”The Revenant” href=”https://www.netflix.com/tn-en/title/80064516”/>
</Row>
</Container>

React is JavaScript library

A single page application is a web site that contain only one pageFalse
In the long term, copy pasting:Makes our code more difficult to maintain
What are the <Movie/>, <Row> and <Container> tags used previously?A React component tag
 1. Node JS
Working with npm (node package manager) and some libraries related to React, requires NodeJS

npx
Now, we are going to create our first React project.
React projects often requires a couple of packages and configuration. Fortunately, there is a npm
package called create-react-app that takes care of all that.
We can call this package directly without installing it thanks to npx command.

Create-react-app
Now, we will create our project using create-react-app and npx command.
Here are the steps to do that:
1. Let’s create a folder for the React projects. You can choose any empty folder.
2. Access it using the Command line/ Terminal.
3. Run the following command to create the React project:
npx create-react-app <project-name>
Note: Replace the <project-name> with your project name
This command will create a subfolder named after the project name you just specified.

What does npx do ?Call a package without installing it

Start a project
Let’s run the project and see how our React app looks like. First we need to:
1. Access the subfolder that was created by create-react-app using the Command line/
Terminal.
2. Run the following command:
Desktop> cd myfirstapp
Desktop/myfirstapp> npm start

Tip: This command will run the script named “start” in the package.json

he previous command will open the browser containing our React website.
Now, try to play around with the html that is inside the App.js file that you can find in the src
folder.
Make sure you have a backup of the App.js file.
The project structure:
You might be wondering why the React project contains a lot of folders and files. We won’t go
through all of them, but we must understand the purpose of some of them.
We can split these files into two sections.
1. npm related files
• node_modules
• package.json
2. React related files
• public
• src

As you can see

npm plays an
important role in
our React project.
Since it’s a package manager, it will take care of installing all the packages that our project needs
including React, ReactDOM and others.
When creating the react app, npm will get all these packages from the npm registry. The registry
contains all the packages that were published by developers.
• Package.json: a file contains all the names of the packages/dependencies we install in our
project and their exact versions.

• Node_modules: A folder contains all of the dependencies installed in the project (including
React).
Tip: If we accidently delete the node_modules, we can always reinstall the packages from the
package.json.
the package.json keeps track of all the packages we used. In fact, when sharing projects, we
exclude the node_modules folder.

React files
• Public folder: where we are going to put all of our images, SVGs, icons and all the assets
that we need for our project.
This folder contains an index.html. This file is the first and only HTML page that gets
 loaded when we access to our website. It’s the entry point to our project (it’s a single-page
application, do your remember?).
• Source folder: the src folder contains our code. We will be most of the time working on this
directory.
What npm does ?Keep track of the modules names used along with their versions.Installs
dependencies for us so we don’t need to include them one by one.Makes sharing projects easier,
since we don’t have to include installed modules (node_modules folder) in our project.
The package.json contain:

The dependencies name and their version

The one and only html file in a react project exists in :public/index.html

Introduction
To understand how the concept of virtual DOM was born, let's return briefly to the DOM.
This document can be represented by the following DOM tree:

The V.DOM
React maintains two Virtual DOM at each time, one contains the updated Virtual DOM and one
which is just the pre-update version of this updated Virtual DOM.
Now it compares the pre-update version with the updated Virtual DOM and figures out what exactly
has changed in the DOM.
This process is known as ‘diffing’. Once React finds out what exactly has changed then it updated
those objects only, on real DOM.
This significantly improves the performance and is the main reason why Virtual DOM is much
loved by developers all around.

ReactDom package
ReactDOM is a package that provides DOM specific methods, it can be used at the top level of a
web app to enable an efficient way of managing DOM elements of the web page.

The render method

ReactDOM provides the developers with an API containing following methods and a few more.
This method can take a maximum of three parameters as described below.
• element: This parameter expects a JSX expression or a React Element to be rendered.
• container: This parameter expects the container in which the element has to be rendered.
 • callback: This is an optional parameter that expects a function that is to be executed once
the render is complete.
What’s the VDOM ? A synced copy of the real DOM
Which package the dom-specific method?

react-dom
The render method accepts:

3 arguments

REACT JS RECAP
Front-end ecosystem is constantly evolving and changing on a day-to-day basis. Some tools become
“bestsellers” in terms of web app development, revolutionizing the workflow, while others become
a dead end.
After this Super Skill, we do all agree that React is a bestseller and the reasons are numerous :
• facilitate coding
• boosts productivity
• facilitate testing
• guarantees stable code
• creates user friendly interfaces
To summarize React is the key to build large-scale applications with data that changes repeatedly
over time