Learning JavaScript, CSS and React

I continue working on improving my skills

Introduction

Hi again! for this week my principal focus was studying the FrontEnd environment, I did some little projects and practices with JavaScript, CSS and React, and thanks to the React School (an internal course that I am taking with other partners), I feel that I am learning quickly and efficiently. The Encorians that give us the React classes are such a great developers with vast knowledge, I am glad for having the opportunity of learning from them, all the things that they explain us are very valuable, normally a course like that will cost you a lot on the internet (I know because I used to took online courses before), so I am really thankful for the time and effort that the React School Team put in their sessions, they are awesome!

Learning more about JavaScript

The first React School sessions we had were about JavaScript, the idea is to understand the language and know how it works before jumping to programming with react. I learned how complicated JavaScript can be, now I have a better idea of how it works. Between the new things I could learn this week were:

Call Stack and Memory Heap. In order to executing the code the JS engine needs a place to store and write information (variables, objects, etc.) and needs to keep track of what’s happening to the code line by line. The memory heap is a place to store and write information, at the end of the day all programs just read and write operations (that is to allocate, use and release memory). The call stack helps to keep track of where we are in the code so that we can run the code in order.

Visual representation

Destructuring assignment. Is a syntax that allows you to assign object properties or array items as variables. This can greatly reduce the lines of code necessary to manipulate data in these structures. Consider this example of object destructuring:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

Traditionally, if you wanted a new variable for each property you assign each individually:

const id = note.id
const title = note.title
const date = note.date

With object destructuring, this can all be done in one line:

// Destructure properties into variables
const { id, title, date } = note

The same thing applies for arrays:

const date = ['1970', '12', '01']
// Destructure Array values into variables
const [year, month, day] = date

Rest parameter. This sintax allows us to represent an indefinite number of arguments as an array. With the rest parameter, a function can be called with any number of arguments, no matter how it was defined:

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}
console.log(sum(1, 2, 3));
// expected output: 6

this Keyword. In JavaScript, the thiskeyword refers to the object it belongs to. Here is a list with the different values thiscan have depending on where it is used:

1. In a method: this refers to the owner object.
2. Alone: this refers to the global object.
3. In a function: this refers to the global object.
4. In a function in strict mode: this is undefined.
5. In an event: this refers to the element that received the event.

Methods like call(), and apply() can refer this to any object.

Callbacks, promises and async/await. I already knew the differences between them, but is always good to review it, in short words:

A callback, is a function that is passed to another function. When the first function is done, it will run the second function:

function printString(string, callback){
  setTimeout(
    () => {
      console.log(string)
      callback()
    }, 
    Math.floor(Math.random() * 100) + 1
  )
}

When you use the above function to print three strings, the code will be something like this:

function printAll(){
  printString("A", () => {
    printString("B", () => {
      printString("C", () => {})
    })
  })
}
printAll()

The problem with callbacks is it creates something called “Callback Hell” Basically, you start nesting functions within functions within functions, and it starts to get really hard to read the code.

The promises, try to fix this nesting problem. If we change the function to use promises:

function printString(string){
  return new Promise((resolve, reject) => {
    setTimeout(
      () => {
       console.log(string)
       resolve()
      }, 
     Math.floor(Math.random() * 100) + 1
    )
  })
}

The same process of printing three strings will be as following:

function printAll(){
  printString("A")
  .then(() => {
    return printString("B")
  })
  .then(() => {
    return printString("C")
  })
}
printAll()

This is called a Promise Chain. You can see that the code returns the result of the function (which will be a Promise), and this gets sent to the next function in the chain. The code is no longer nested, but the problem is that still looks messy and it can be difficult to read as it grows.

Await, makes your asynchronous code look more like synchronous/procedural code, which is easier to understand.

Again, let’s try to print the three strings:

async function printAll(){
  await printString("A")
  await printString("B")
  await printString("C")
}
printAll()

In the above function we use the “async” keyword for the printAll function, with this keyword JS know that we are using async/await syntax, and is a requirement if you want to use Await.

I am learning so much with the courses, the last session was my favorite, I could saw how JavaScript works internally with V8 (compiles and executes JavaScript source code, handles memory allocation for objects, and garbage collects objects it no longer needs). and libuv (gives access to the operating system to perform tasks related to the filesystem or time scheduled tasks, etc. libuv is a multi-platform support library with a focus on asynchronous I/O).

Finishing FrontEnd Masters React course and starting a new one

This week I could finish the course Complete Intro to React by Brian Holt:

Learn React in this Complete Introduction to React Course - Use React Hooks to Build Real-World…

I recommended it to anyone who is interested on learning React, in the course I could learned the latest features of this library, hooks, effects, context and portals. I also learned about the React ecosystem, Parcel, ESLint, Prettier, and the React Router.

Another thing I learned was how to use the React Dev Tools, how to inspecting elements, viewing a component’s render tree, and viewing a applications performance profiler.

The final chapters of the course were about how to create and implement a modal in react with the toggleModal method. As a practice, I did a modal for create a message of confirmation.

After finish with this React course I began with another course, this time for learning CSS in depth. At the moment I have only done a review from the basics to remember it, so I did not learning many new things related to CSS, my goal is to finish one or two hours of chapters pair day and working in a project while taking the course.

I guess that’s all for today, I hope you like my blog and I wish you a really nice day, see you next time!