And the main benefit react that moves faster than web components

JavaScript Recap

JavaScript concepts

Complete the function sayLouder such that it makes the text in uppercase.

// sample usage (do not modify)

Here's an example:

Array filter

Complete the function getPositiveNumbers such that it returns all numbers greater than 0.

}

}

React is a JavaScript library created and (mostly) maintained by Facebook.

Short definition

For example, say you're building an e-commerce website and you'd like to maintain the number of items in the shopping bag as the user adds and removes items. React makes it easier for you to specify that you'd like to show the number of items in the shopping bag: {items.length}.

React will display that (the number of items in the shopping bag) but also update it whenever it changes.

The difference between a library and a framework is that a library only helps you in one aspect whereas a framework helps you in many aspects. Let's take an example:

What about Web Components?

You could use Web Components to develop a Web Application, you don't necessarily need React. You could also use React to complement your Web Components and vice-versa. The main benefit of Web Components is that they work everywhere. And the main benefit of React is that it moves faster than Web Components. And this is pretty natural because Web Components are a standard (defined and implemented by the browsers) and React is a library that is not standardized.

	React is a JavaScript library for building User Interfaces. React is only responsible for the View layer. React is not a framework.

Baby steps

console.log(getReactVersion());

Document.createElement

document.body.appendChild(element);

You won't need most of the properties you see above, however, the most important ones that show up in the full list are:

• id

element.style = "color: red; background-color: blue";

element.className = "container center";

You can also change the class with element.classList.add("name-of-class") however, you will see later on in React that you will need to avoid changing the DOM directly (for example with classList.add) and instead define the elements that you'd like to render; more on that later on.

}

However, we saw how it works because it shares some
similarities with React.createElement but it's not the same thing.

Comparison

//returns an object similar to this one:

The reason why React.createElement returns an object rather than the DOM element itself is because React operates a Virtual DOM. We will cover the virtual DOM later on, but for now, here's a simplified explanation of what it means:
A virtual DOM is when a representation of the UI is kept in memory and synced with the DOM. So React.createElement returns an object rather than a DOM element because this allows React to do some performance optimizations (such as the Virtual DOM).

Changing the class/style

To write a text inside the element, you have to provide the 3rd parameter
for React.createElement which is called children (so it also accepts other Elements for later on).

React.createElement("h1", {}, "Hello World")

What is a React Element?

In React, an Element is the smallest building block.

// sample usage (do not modify)

// sample usage (do not modify)

The save notes popup will not show up if you select lines spanning multiple paragraphs. It's because you retain information better when you take shorter notes.

ReactDOM is the glue between React and the DOM.

However, they got split into 2 separate libraries: React and ReactDOM to allow for the launch of React Native.

React Native is the glue between React and native apps. React Native is outside the scope of this course but as you can see, React is the library that lets you write reusable UI and then:

ReactDOM Usage
Let's start by installing ReactDOM:

Import Cost
How much does ReactDOM weigh? ReactDOM weighs 119KB.

So in total, React + ReactDOM weigh 12.5 + 119 = 131.5KB.

This ReactDOM object contains a method that you will use very often, which is called render. By importing ReactDOM with this default import, you will have access to the render method inside the ReactDOM object. You can access it like this:

import ReactDOM from"react-dom";

You can use whichever syntax you prefer. Technically speaking the named import is better than the default one because you're specifically importing the render method that you need rather than importing the whole object. But whether that will have an effect on your total JavaScript size depends on how your module bundler (example: Webpack) is configured.

Root of your app

Let's go with root for this example:

<div id="root"></div>

If you imported ReactDOM rather than render, then you can call ReactDOM.render() and the rest would be the same.

• • • • •

When an index.html file is available, you can see the output of your code by clicking on the Browser tab. You can try it already in this challenge!

Also make sure to check the code inside the index.html file so that you can get the id of the

let root_element = document.querySelector("#react-root");

let elem =React.createElement('h1',{},'Online Supermarket');

import{render}from'react-dom';

Supermarket');

This root element that you pass to ReactDOM will become completely managed by React. So you should not write any kind of JavaScript that changes its content.

So once you have:

You are not supposed to do anything else with the root variable and the <div id="react-root">...</div> because it will be managed by ReactDOM.

An app built with React usually has a single root element just like we'll be seeing throughout this course.

The whole application is rendered inside that root element.

In that case, the cart logic would go into a <div id="react-cart"></div> root element.

And your application could potentially contain more than 1 root element in the future.

You may have noticed that we've been asking you to import React every time you use React.createElement, that's because we'd like to make sure you understand this concept and get used to it.

Eventually, this becomes boring so we'll make it easier for you later in this course.

Intro to JSX

This JSX syntax may look similar to HTML, but it is NOT HTML.

Let's see an example:

import React from"react";