Module 1

JavaScript concepts

When writing React applications, you will use a lot of JavaScript concepts, such as:

• const/let

• array/object destructuring

• import/export

• and more

Uppercase a string

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

}

// sample usage (do not modify)

Array.filter recap

const grades = [10, 2, 21, 35, 50, -10, 0, 1];

//get all grades > 20

Array filter

 * @param {number[]} numbers

 */

console.log(getPositiveNumbers([10, -5, 2, -4]));

Array of objects filter

Complete the function getPassingTests such that it returns all the test results that have a passing grade (10 and above).

    console.log(results);

}

}, {

    id: 2,

}]

console.log(getPassingTests(data))

React intro

Short definition

Longer definition

It also allows you to reuse this logic in another part of your UI. Say for example, on the payment page, you can reuse the same logic without having to re-write it.

When learning React (or any other frontend library) it would seem like it's overcomplicated or over-engineered. It is normal to feel that way because the benefit of these libraries is mostly visible when you build medium-sized or large web applications with several team members. So, keep that in mind when learning and remember that the goal is to write maintainable and efficient code.

React is NOT a framework

React is not about the design of your UI

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.

What are we building in this tutorial?

The final project of this tutorial will teach you how to build the following online supermarket app with Stripe checkout.

Recap

Baby steps

function getReactVersion() {

}

Here's a quick refresher on how it works:

const element = document.createElement("h2");

It creates an HTML element, and we can see all the properties by using console.dir(element) which is a method provided by browsers to list all the properties of a certain object.
Here's how it looks like:

How would you change the class of the element? What about the style?

const element = document.createElement("h2");

Multiple classes can be set by separating the class names with a space character.

const element = document.createElement("h2");

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.

Recap

• const element = document.createElement(tagName) creates an HTML element

Complete the function createCard such that it returns a <div class="card"></div> element (not an HTML string)

function createCard() {

In React, you won't be using document.createElement.
However, we saw how it works because it shares some similarities with React.createElement but it's not the same thing.

Comparison

Return value

{

type: 'h1',

Changing the class/style

React.createElement("h1", {className: "center", style: "color: red"})

Notice that we wrote className instead of class because we're talking about the same properties as the one in the previous lesson.

Writing text

If you think that the syntax is a bit ugly and overcomplicated, you're totally right to think so. We will be using JSX which replaces the code above with a <h1>Hello World</h1>. However, JSX is NOT exactly the same as HTML hence why you should learn React.createElement first.

What is a React Element?

In React, an Element is the smallest building block.
It is a representation of what the smallest piece of your User Interface will look like. In its simplest example, that could be a paragraph with the text Welcome inside of it (<p>Welcome</p>).
You will see later on how we will combine several Elements as well as advanced logic to build our supermarket shopping Web App.

Recap

React Elements I

Complete the createDivElement function such that it creates a React Element that represents a div with the text Hello World!

function createDivElement() {

React Elements II

function createTitle() {

}

ReactDOM Intro

Popular notes will also be shown in yellow highlights which can be easily added to your notes with a single click. You can also disable those popular highlights from the top-right menu.

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.

Why is it a separate library?

• ReactDOM makes this UI visible in the browser.

• React Native makes this UI visible in a native app.

Reconciliation

As a React developer, this is a feature that you get out of the box with React and you do not have to worry about how it works (however, we will see later in this course why immutability is required for reconciliation to work).

Recap

ReactDOM Usage

npm install react-dom

This is something you have to do on top of the previous installation.
So if you were getting started from scratch, you'd have to install both packages (react & react-dom) like this:

Import Cost

Importing ReactDOM

import ReactDOM from "react-dom";

As you can see, this is a default import just like we had with the react package.

import {render} from "react-dom";

// You can call render()

Root of your app

Render your first Element

import {render} from "react-dom";

const root = document.querySelector("#root");

Does it feel overcomplicated?

You may be wondering if all of this is worth it, but keep in mind that it's totally normal to feel that way because the benefit of React (and other libraries) will only become visible once we start working with bigger (and real-world) examples.

Recap

• Install ReactDOM with npm install react-dom

ReactDOM I

Render the element on the page inside the given root in the index.html page.
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!

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

render(element, root_element);

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

let rootElem = document.querySelector('#react-root');

import {render} from 'react-dom' ;

let thisElem = React.createElement('h1', {className: 'title'}, 'Online Supermarket');

Root Element

So once you have:

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

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.
We say managed by ReactDOM because later on, you will be rendering things that are more complicated than Elements which would update in the future. And ReactDOM will take care of updating these.

Use cases

There are 2 major use cases for React, here's how they affect the root element:

Apps built with React

Integrate React into existing App

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

Recap

• The root element is completely managed by ReactDOM