// 1. Importamos dependencias
import React from 'react';
import { createRoot } from 'react-dom/client';

// 2. Creamos un elemento de React
const element = React.createElement(
  'p',
  { id: 'hello' },
  'Hello World!'
);

// 3. Renderizamos la aplicación
const container = document.querySelector('#root');
const root = createRoot(container);
root.render(element);

En primer lugar importamos las dependencias, que son tanto React mismo como el renderer react-dom.

En segundo lugar creamos el elemento de React, donde usamos la función React.createElement, la cual acepta estos 3 o más argumentos:

1. El tipo de elemento a crear.

2. Las propiedades que queremos que tenga este elemento.

3. El contenido del elemento.

Esta función nos devolverá un elemento de React, el cual es un objeto de JavaScript, y luce tal que así:

{
  type: "p",
  key: null,
  ref: null,
  props: {
    id: 'hello',
    children: 'Hello World!',
  },
  _owner: null,
  _store: { validated: false }
}

En tercer lugar renderizamos la aplicación. Esto lo hacemos seleccionando el contenedor, luego creando el root en ese contenedor y por último renderizando en elemento en el root.

Inspirado en la explicación de Josh Comeau en su curso The Joy of React.

let items = [ "Computer", "Monitor" ];

items.includes("computer"); // false

items.includes("Computer"); // true

As you can see it is case sensitive. And you can check for example numbers too:

let numbers = [ 4, 10, 27 ];

numbers.includes(2); // false

numbers.includes(10); // true

It will return true if the value is found within the array or false if it's not.

const fruits = ['apple', 'strawberry', 'banana', 'orange'];

const apple = fruits[0] // apple

const strawberry = fruits[1] // strawberry

const banana = fruits[2] // banana

const orange = fruits[3] // orange

But we can make it easier:

const fruits = ['apple', 'strawberry', 'banana', 'orange'];

const [ apple, strawberry, banana, orange ] = fruits

Now there is a variable called apple that has the 'apple' value assigned.

How does it work?

This is called destructuring. We assign the first new variable to the first element of the array. And the same for the other variables and values.

Let's see it again but with different names, and we won't create the same number of variables as values of the array:

const fruits = ['apple', 'strawberry', 'banana', 'orange'];

const [ firstFruit, secondFruit ] = fruits

Now we have two new variables: firstFruit and secondFruit. firstFruit has the value of the first element of the fruits array, and secondFruit has the second element of the fruits array.

I like to think it like this: "I will create a variable called x from the array y"

const [newVariable1, newVariable2] = originalArray

But we won't always know the length of the array, so we can extract for example the first two positions of the array and then group the other on another array.

We'll use the rest operator (...)

const fruits = ['apple', 'strawberry', 'banana', 'orange'];

const [ firstElement, secondElement, ...otherElements ] = fruits

Can you think the value of each one of this new variables?

firstElement -> 'apple'

secondElement -> 'strawberry'

otherElements -> [ 'banana', 'orange' ]

We have grouped the rest of the elements of the array to a new one array with the name we gave to the variable, in this example to otherElements.

The magic happens with the three dots before the name of the future new variable.

That's how you can destructure an array and go further with the rest operator!

For example:

const myNumbers = Array(4).fill(0) // [ 0, 0, 0, 0 ]

We place as a parameter to fill() the value we want to place inside the array.

Extra thing!

Another thing we can use about the fill() method is substitute some values of the array with the value we want.

If we have this array:

let myNumbers = [ 1, 2, 3, 4 ]

We can use the fill() method to indicate:

1. With which value to fill the array

2. Start of the filling

3. End of the filling

We can fill the myNumbers array with the 0 number starting at the array position 2 and ending at the position 4, so the values 3 and 4 will be replaced by the zeros:

let myNumbers = [ 1, 2, 3, 4 ]

myNumbers.fill(0,2,4) // [ 1, 2, 0, 0 ]

The fill() method itself won't create new positions and values in the array, it will simply replace them.

Let's see an example:

const firstArray = [1,2,3]

const secondArray = [...firstArray, 4, 5]

firstArray // [ 1, 2, 3 ]
secondArray // [ 1, 2, 3, 4, 5 ]

The first element of the secondArray variable is the content of the firstArray variable. Each value will be placed on one index position and will be part of the array. Note that in the secondArray variable we also added other values to the array. This is possible in addition to the spread operator. Finally, when we see at the firstArray variable values haven't been modified.

slice() receives two parameters:

1. The starting index to remove

2. The end index (it won't be removed)

Let's see an example:

const numbers = [1,2,3,4,5]

const removedValues = numbers.slice(0,2)

removedValues // [ 1, 2 ]
numbers // [ 1, 2, 3, 4, 5 ]

We have the numbers array with five values. Then we use the slice() method to remove some. We set as a first parameter the starting index to remove as zero, because we want to start removing from the value 1 of the list. Then we set a 2 as a second parameter because we want to stop our removal at the index position 2. That means that position value won't be included, so the value 3 won't be part of the removed values.

Then slice() will return the removed values, in this case will return the 1 and 2 values. The interesting thing here is that the original array is not modified. Unlike splice(), slice() doesn't mutate the original array.

1. The starting index to remove.
2. How many items will be removed from the starting position.

For example:

const numbers = [1,2,3,4,5]

let removedValues = numbers.splice(0,2)

removedValues // [ 1, 2 ]

numbers // [ 3, 4, 5 ]

In this example, we start on the position 0 of the array and we remove 2 items. In our example we delete the value of the index we are in and one more.

As we can see the splice() method returns the removed values and mutates the original array.