Forem: Jorge Nascimento

Introdução ao TypeScript

Jorge Nascimento — Thu, 27 Jul 2023 16:31:48 +0000

TypeScript é uma linguagem de programação de código aberto desenvolvida pela Microsoft. Ela é uma extensão da linguagem JavaScript que adiciona recursos de tipagem estática ao JavaScript, tornando-se uma opção popular para desenvolvimento de aplicativos web e outros projetos.

TypeScript
- Vantagens do TypeScript
- Desvantagens do TypeScript
- Inferência de tipos
- Configurando o Typescript
Tipos Básicos em TypeScript
Tipos Objetos em TypeScript
- Object
- Type Alias
- Utility Types
- Interface
Generics em TypeScript
- Função com Generics
- Classe com Generics
- Interface com Generics
Class em TypeScript
Decorator
- Configuração
- Criando um Decorator
- Aplicando o Decorator
- Criando Decorator com Argumentos

Vantagens do TypeScript:

Verificação de tipos em tempo de compilação: Uma das principais vantagens é a detecção de erros em tempo de compilação, o que ajuda a evitar erros comuns em JavaScript. Isso ajuda a melhorar a qualidade do código e facilita a manutenção.

Melhor suporte a IDE: O TypeScript é altamente integrado com ferramentas de desenvolvimento, como o Visual Studio Code, fornecendo autocompletar, realce de sintaxe e informações sobre tipos para melhorar a produtividade do desenvolvedor.

Facilita a colaboração em equipes grandes: Com a adição de tipos estáticos, o código se torna mais autoexplicativo, facilitando o entendimento e a colaboração entre membros da equipe em projetos de grande escala.

Ecossistema maduro: O TypeScript é amplamente utilizado e possui um ecossistema de bibliotecas e frameworks crescente, oferecendo suporte a várias tecnologias populares.

Código mais robusto: A tipagem estática ajuda a evitar certos erros comuns, tornando o código mais robusto e seguro.

Desvantagens do TypeScript:

Curva de aprendizado: Para desenvolvedores que não têm experiência com tipagem estática ou que estão familiarizados apenas com JavaScript, a curva de aprendizado pode ser um obstáculo inicial.

Compilação adicional: Como o TypeScript precisa ser compilado para JavaScript antes de ser executado no navegador ou no servidor, isso adiciona um passo extra ao processo de desenvolvimento.

Tamanho do arquivo: A adição de informações de tipo pode aumentar o tamanho do arquivo, mas isso pode ser mitigado com a compressão e minificação adequadas.

Problemas de compatibilidade: Embora o TypeScript seja compatível com JavaScript, em alguns casos, bibliotecas JavaScript podem não funcionar perfeitamente ou exigir esforços adicionais para serem usadas com TypeScript.

Em geral, o TypeScript é uma excelente escolha para projetos em que a segurança e a manutenção do código são importantes. Ele ajuda a evitar muitos erros comuns em JavaScript e proporciona uma experiência de desenvolvimento mais robusta e produtiva. No entanto, é importante considerar o contexto do projeto e a familiaridade da equipe com o TypeScript antes de decidir usá-lo.

Inferência de tipos

A inferência de tipos é um recurso poderoso do TypeScript que permite ao compilador deduzir automaticamente o tipo de uma variável ou expressão com base em seu valor e uso. Isso ajuda a evitar a necessidade de declarar explicitamente os tipos em muitos casos, tornando o código mais conciso e menos propenso a erros.

O TypeScript usa um sistema de tipos estático, o que significa que os tipos são verificados em tempo de compilação, antes de o código ser executado. Isso é diferente do JavaScript padrão, que é de tipagem dinâmica e verifica os tipos em tempo de execução.

Quando você declara uma variável sem especificar explicitamente seu tipo, o TypeScript tenta inferir o tipo com base no valor atribuído a ela.

Aqui está um exemplo:

let mensagem = "Olá, TypeScript!"; // O TypeScript infere que 'mensagem' é do tipo 'string'

Neste caso, o TypeScript deduz que a variável mensagem deve ser uma string porque ela recebeu um valor de texto.

A inferência de tipos também pode ocorrer em funções. Quando você define uma função e não especifica os tipos de seus parâmetros ou retorno, o TypeScript tenta inferi-los com base nos argumentos passados e no que é retornado dentro da função.

Aqui está um exemplo:

function soma(a, b) {
  return a + b;
}

let resultado = soma(5, 10); // TypeScript infere que 'resultado' é do tipo 'number'

Neste caso, o TypeScript deduz que a função soma recebe dois argumentos numéricos e retorna um valor numérico, portanto, a variável resultado será do tipo number.

A inferência de tipos funciona bem em muitos casos, mas pode haver situações em que o TypeScript não é capaz de inferir o tipo corretamente. Nesses casos, você pode optar por adicionar anotações de tipo explícitas para garantir a precisão dos tipos ou fornecer mais informações ao compilador.

No geral, a inferência de tipos é uma das características fundamentais do TypeScript que ajuda a fornecer os benefícios da verificação de tipos estática sem a necessidade de especificar manualmente os tipos em todos os lugares. Isso torna o código mais legível, mais seguro e mais fácil de manter.

Configurando o typescript

Para configurar o TypeScript e começar a utilizá-lo em seus projetos, siga os passos abaixo:

Passo 1: Instalação do TypeScript

Primeiro, você precisa ter o Node.js instalado no seu sistema. Se ainda não tiver, faça o download e instale-o a partir do site oficial (https://nodejs.org/).

Após a instalação do Node.js, abra um terminal ou prompt de comando e execute o seguinte comando para instalar o TypeScript globalmente no seu sistema:

npm install -g typescript

Passo 2: Inicialização de um projeto TypeScript

Crie uma pasta para o seu projeto e navegue até ela no terminal. Em seguida, utilize o comando tsc --init para gerar um arquivo de configuração chamado tsconfig.json. Esse arquivo contém as configurações do TypeScript para o seu projeto.

tsc --init

Passo 3: Configuração do arquivo tsconfig.json

O arquivo tsconfig.json permite que você configure o TypeScript para atender às necessidades específicas do seu projeto. Você pode personalizar as opções de compilação, direcionar a pasta de saída dos arquivos gerados, entre outras configurações. Abra o arquivo tsconfig.json com um editor de texto e faça as alterações desejadas.

Alguns exemplos de configurações comuns:

target: Determina para qual versão do ECMAScript o TypeScript deve compilar. Por exemplo, "ES5", "ES6", etc.
outDir: Especifica a pasta de saída dos arquivos transpilados (.js).
strict: Habilita várias verificações rigorosas de tipos.
include: Define quais pastas devem ser incluídas na compilação.

Passo 4: Escrevendo código TypeScript

Agora você pode começar a escrever o código TypeScript nos arquivos com a extensão .ts. O TypeScript é uma linguagem que adiciona tipagem estática ao JavaScript, portanto, você pode declarar tipos para as variáveis, funções e objetos.

Passo 5: Compilando o código TypeScript

Depois de escrever seu código TypeScript, você precisa compilá-lo para JavaScript. Para isso, basta executar o comando tsc no terminal na pasta raiz do projeto (onde está localizado o arquivotsconfig.json).

tsc

Agora, você encontrará os arquivos JavaScript gerados na pasta de saída configurada no arquivo tsconfig.json.

Esses são os passos básicos para configurar e usar o TypeScript em seus projetos. A partir daqui, você pode explorar recursos avançados, como módulos, decorators, etc., para aproveitar ao máximo o poder do TypeScript no desenvolvimento de aplicativos escaláveis e mais seguros.

Existem ferramentas que o auxiliaram no seu desenvolvimento como tais como:

TS Node Dev - permite que você execute diretamente arquivos TypeScript sem a necessidade de prévia transpilação manual.
Zod - bibliotecas de validação de esquema typescript-first.
TS Jest - Um transformador Jest com suporte a sourcemap que permite usar Jest para testar projetos escritos em TypeScript.
Typescript Eslint - permite que o ESLint analise e valide código TypeScript de maneira mais precisa.

Essas sao apenas alguns exemplos de ferramentas que o ajudaram no seu desenvolvimento, porem existem inúmeras outras que vamos conhecemos conforme avancemos.

Tipos Básicos em TypeScript

Em TypeScript, existem várias tipagens básicas que podem ser usadas para declarar os tipos de variáveis. Abaixo estão alguns exemplos dos tipos mais comuns:

number: Representa números, tanto inteiros como de ponto flutuante.
Exemplo:

let age: number = 30;
let price: number = 9.99;

string: Representa sequências de caracteres, texto.

let name: string = "John Doe";
let greeting: string = "Hello, TypeScript!";

boolean: Representa valores verdadeiro (true) e falso (false).

let isReady: boolean = true;
let isPlaying: boolean = false;

array: Representa uma coleção de elementos do mesmo tipo.

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: string[] = ["apple", "banana", "orange"];

tuple: É um array com um número fixo de elementos, em que cada elemento pode ter um tipo diferente.

let person: [string, number] = ["Alice", 30];

enum: Permite definir um conjunto de valores nomeados com um valor numérico associado.

enum Color {
  Red,
  Green,
  Blue,
}

let favoriteColor: Color = Color.Blue;
console.log(favoriteColor); // Saída: 2

any: Permite que uma variável aceite qualquer tipo de valor. É usado quando o tipo não é conhecido ou quando estamos migrando um código JavaScript existente para TypeScript.

let data: any = 42;
data = "hello";
data = [1, 2, 3];

void: Representa a ausência de um tipo de valor. É comumente usado como o retorno de funções que não retornam nenhum valor.

function sayHello(): void {
  console.log("Hello!");
}

sayHello(); // Saída: Hello!

null e undefined: Tipos que têm valores null e undefined, respectivamente.

let x: null = null;
let y: undefined = undefined;

never: Representa o tipo de valores que nunca ocorrem, geralmente usado para funções que lançam exceções ou entram em um loop infinito.

function throwError(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {
    // Código que nunca termina
  }
}

Tipos Objetos em TypeScript

Em TypeScript, existem basicamente 3 tipos para lidar com objetos:

Object

O tipo object é um tipo primitivo em TypeScript que representa qualquer valor não primitivo, ou seja, qualquer valor que não seja number, string, boolean, symbol, null ou undefined. Isso inclui objetos, arrays, funções e outros tipos de dados complexos.

function printObject(obj: object) {
  console.log(obj);
}

const person = {
  name: "John",
  age: 30,
};

const colors = ["red", "green", "blue"];

printObject(person); // { name: 'John', age: 30 }
printObject(colors); // ['red', 'green', 'blue']

Type Alias

Um type alias é uma maneira de criar um nome alternativo para um tipo existente ou para definir um novo tipo com base em tipos existentes. Isso pode ser útil para tornar o código mais legível, modular e reutilizável.

type Point = {
  x: number;
  y: number;
};

function printPoint(point: Point) {
  console.log(`x: ${point.x}, y: ${point.y}`);
}

const pointA: Point = { x: 10, y: 20 };
const pointB: Point = { x: 5, y: 12 };

printPoint(pointA); // x: 10, y: 20
printPoint(pointB); // x: 5, y: 12

Aqui estão variações de type alias que podem ser usados para criar tipos mais complexos.

Union Type Alias:

type MyBoolean = boolean | string;

const isActive: MyBoolean = true;
const status: MyBoolean = "active";

Intersection Type Alias:

type Person = {
  name: string;
  age: number;
};

type Employee = {
  company: string;
  jobTitle: string;
};

type EmployeeInfo = Person & Employee;

const john: EmployeeInfo = {
  name: "John Doe",
  age: 30,
  company: "ABC Corp",
  jobTitle: "Software Engineer",
};

Tuple Type Alias:

type Coordinate = [number, number];

const point: Coordinate = [10, 20];

Mapped Type Alias:

type Person = {
  name: string;
  age: number;
};

type PartialPerson = {
  [P in keyof Person]?: Person[P];
};

const partialInfo: PartialPerson = {
  name: "Alice",
};

Esses são apenas alguns exemplos dos diversos usos de type aliases em TypeScript. Eles podem ser extremamente úteis para tornar o código mais legível e fácil de manter.

Utility Types

Existem diversos tipos utilitários que podem ser usados para criar tipos mais complexos ou manipular tipos existentes de maneira mais conveniente. Abaixo estão alguns dos tipos utilitários mais comuns com exemplos de código:

Partial<T>:

Cria um tipo com todas as propriedades de T tornadas opcionais.

interface Todo {
  title: string;
  description: string;
}

function updateTodo(todo: Partial<Todo>, newTitle: string) {
  return { ...todo, title: newTitle };
}

const myTodo: Todo = {
  title: "Learn TypeScript",
  description: "Study TypeScript types",
};
const updatedTodo = updateTodo(myTodo, "Master TypeScript");
console.log(updatedTodo);
// Output: { title: "Master TypeScript", description: "Study TypeScript types" }

Required<T>:

Cria um tipo com todas as propriedades de T tornadas obrigatórias.

interface Options {
  name?: string;
  age?: number;
}

function createUser(options: Required<Options>) {
  return options;
}

const user = createUser({ name: "John", age: 30 });
console.log(user);
// Output: { name: "John", age: 30 }

Readonly<T>:

Cria um tipo com todas as propriedades de T tornadas somente leitura (imutáveis).

interface Point {
  x: number;
  y: number;
}

const p: Readonly<Point> = { x: 10, y: 5 };
// p.x = 20; // Erro! Não é possível modificar propriedades de um tipo somente leitura.

Pick<T, K>:

Cria um tipo contendo apenas as propriedades de T cujos nomes estão em K.

interface Person {
  name: string;
  age: number;
  address: string;
}

type PersonNameAndAge = Pick<Person, "name" | "age">;

const personInfo: PersonNameAndAge = { name: "Alice", age: 25 };
console.log(personInfo);
// Output: { name: "Alice", age: 25 }

Omit<T, K>:

Cria um tipo contendo todas as propriedades de T, exceto as propriedades cujos nomes estão em K.

interface Car {
  make: string;
  model: string;
  year: number;
}

type NewCar = Omit<Car, "year">;

const myNewCar: NewCar = { make: "Toyota", model: "Camry" };
console.log(myNewCar);
// Output: { make: "Toyota", model: "Camry" }

Esses são apenas alguns dos tipos utilitários disponíveis no TypeScript. Eles são úteis para criar tipos mais precisos, compreensíveis e seguros em suas aplicações.

Interface

Uma interface é uma forma de definir a estrutura de um objeto em TypeScript. Ela descreve os tipos de propriedades e métodos que um objeto deve ter. As interfaces também podem ser usadas para definir tipos para funções.

interface Animal {
  name: string;
  age: number;
  speak: (sound: string) => void;
}

const dog: Animal = {
  name: "Buddy",
  age: 5,
  speak: (sound: string) => {
    console.log(`${sound} ${sound}`);
  },
};

const cat: Animal = {
  name: "Whiskers",
  age: 3,
  speak: (sound: string) => {
    console.log(`Meow!`);
  },
};

dog.speak("Woof!"); // Woof! Woof!
cat.speak("Meow!"); // Meow!

Note que os três tipos têm usos diferentes, embora possam se sobrepor em alguns cenários. O uso de type alias e interface é especialmente útil para criar estruturas mais complexas e legíveis, enquanto o tipo object é mais amplo e inclui qualquer valor não primitivo.

Generics em TypeScript

Em TypeScript, os "Generics" são uma ferramenta poderosa que permitem criar componentes reutilizáveis e flexíveis, permitindo que funções, classes e interfaces trabalhem com vários tipos de dados de forma segura durante a compilação.

Os Generics são representados pelo símbolo "<>", seguido por um nome de tipo genérico (por convenção, geralmente utiliza-se a letra "T", mas qualquer nome pode ser utilizado). Vamos ver alguns exemplos para entender melhor como funcionam.

Função com Generics

Suponha que desejamos criar uma função que retorne o primeiro elemento de um array, independentemente do tipo de dado presente no array. Para isso, podemos usar Generics.

function getFirstElement<T>(arr: T[]): T | undefined {
  return arr.length > 0 ? arr[0] : undefined;
}

// Uso da função com diferentes tipos de arrays
const numArray: number[] = [1, 2, 3];
const strArray: string[] = ["a", "b", "c"];

console.log(getFirstElement(numArray)); // Saída: 1
console.log(getFirstElement(strArray)); // Saída: "a"

Neste exemplo, a função getFirstElement usa um tipo genérico T, que é inferido com base no tipo do array passado como argumento. Dessa forma, podemos obter o primeiro elemento independentemente do tipo do array.

Classe com Generics

Vamos criar uma classe genérica para representar uma caixa (box) que pode conter qualquer tipo de item.

class Box<T> {
  private items: T[] = [];

  addItem(item: T) {
    this.items.push(item);
  }

  getItems(): T[] {
    return this.items;
  }
}

// Uso da classe Box com diferentes tipos de dados
const numberBox = new Box<number>();
numberBox.addItem(1);
numberBox.addItem(2);
numberBox.addItem(3);
console.log(numberBox.getItems()); // Saída: [1, 2, 3]

const stringBox = new Box<string>();
stringBox.addItem("apple");
stringBox.addItem("banana");
stringBox.addItem("orange");
console.log(stringBox.getItems()); // Saída: ["apple", "banana", "orange"]

Neste exemplo, a classe Box usa um tipo genérico T, que é utilizado para especificar o tipo dos itens que podem ser armazenados na caixa. Quando criamos uma instância da classe Box, podemos definir o tipo específico dos itens que queremos armazenar.

Interface com Generics

Vamos criar uma interface genérica que representa um par de valores.

interface Pair<T, U> {
  first: T;
  second: U;
}

// Uso da interface Pair com diferentes tipos de valores
const numberAndString: Pair<number, string> = { first: 42, second: "hello" };
const booleanAndArray: Pair<boolean, number[]> = {
  first: true,
  second: [1, 2, 3],
};

Neste exemplo, a interface Pair é genérica e possui dois parâmetros de tipo, T e U, que representam os tipos dos valores do primeiro e segundo elemento do par, respectivamente. Assim, podemos criar pares com diferentes tipos de valores.

Os Generics são uma ferramenta poderosa para criar código flexível e reutilizável, permitindo que suas funções e classes trabalhem com diversos tipos de dados sem perder a segurança de tipo que o TypeScript oferece.

Class em TypeScript

Em TypeScript, a programação orientada a objetos é suportada, e isso envolve o conceito de classes, modificadores de acesso (access modifiers) e herança (inheritance). Vamos explicar cada um deles e fornecer exemplos de código para ilustrar o seu uso:

Classe (Class):

Uma classe é um modelo ou uma estrutura que descreve um objeto, definindo suas propriedades e comportamentos. Em TypeScript, as classes podem ser usadas para criar objetos reutilizáveis e organizar a lógica do programa de maneira mais clara e modular.

Exemplo de código:

class Animal {
  // Propriedades
  name: string;
  age: number;

  // Construtor
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // Método
  makeSound() {
    console.log("Animal is making a sound.");
  }
}

// Criando uma instância da classe Animal
const animal1 = new Animal("Leo", 3);
console.log(animal1.name); // Saída: "Leo"
animal1.makeSound(); // Saída: "Animal is making a sound."

Modificadores de acesso (Access Modifiers):

Os modificadores de acesso em TypeScript permitem controlar o acesso a propriedades e métodos de uma classe a partir de outras partes do código. Existem três modificadores de acesso principais:

public: A propriedade/método é acessível de qualquer lugar, é o padrão quando nenhum modificador é fornecido.
private: A propriedade/método só pode ser acessado dentro da própria classe e não é visível fora dela.
protected: A propriedade/método é acessível dentro da própria classe e também nas classes derivadas (subclasses).

Exemplo de código:

class Person {
  private name: string;
  protected age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  public introduce() {
    console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
  }
}

class Employee extends Person {
  private salary: number;

  constructor(name: string, age: number, salary: number) {
    super(name, age);
    this.salary = salary;
  }

  public showSalary() {
    console.log(`My salary is $${this.salary}.`);
  }
}

const john = new Person("John", 30);
// john.name; -> Erro: 'name' é privado e só pode ser acessado na classe 'Person'.
// john.age; -> Erro: 'age' é protegido e só pode ser acessado na classe 'Person' e suas subclasses.
john.introduce(); // Saída: "Hi, I'm John and I'm 30 years old."

const employee1 = new Employee("Alice", 25, 50000);
// employee1.age; -> Erro: 'age' é protegido e só pode ser acessado na classe 'Person' e suas subclasses.
employee1.introduce(); // Saída: "Hi, I'm Alice and I'm 25 years old."
employee1.showSalary(); // Saída: "My salary is $50000."

Herança (Inheritance):

A herança é um conceito fundamental da programação orientada a objetos, onde uma classe (subclasse) pode herdar propriedades e comportamentos de outra classe (superclasse). Em TypeScript, usamos a palavra-chave extends para criar uma relação de herança entre classes.

Exemplo de código:

class Shape {
  protected color: string;

  constructor(color: string) {
    this.color = color;
  }

  public getColor() {
    return this.color;
  }

  public draw() {
    console.log(`Drawing a shape with color ${this.color}.`);
  }
}

class Circle extends Shape {
  private radius: number;

  constructor(color: string, radius: number) {
    super(color);
    this.radius = radius;
  }

  public getRadius() {
    return this.radius;
  }

  public draw() {
    console.log(
      `Drawing a circle with color ${this.color} and radius ${this.radius}.`
    );
  }
}

const circle1 = new Circle("blue", 5);
console.log(circle1.getColor()); // Saída: "blue"
console.log(circle1.getRadius()); // Saída: 5
circle1.draw(); // Saída: "Drawing a circle with color blue and radius 5."

Neste exemplo, a classe Circle herda da classe Shape. A classe Circle também redefine o método draw, o que é conhecido como sobrescrita (override) do método da classe pai (Shape).

TypeScript também possui todos os recursos para lidar com POO, tais como polimorfismo, herança, interfaces e classes abstratas.

Decorators em Typescript

Em TypeScript os decoradores são uma funcionalidade poderosa que permitem adicionar funcionalidades extras a classes, métodos, propriedades e parâmetros de função. Eles são comumente usados em frameworks e bibliotecas para estender o comportamento de classes e funções de uma maneira declarativa.

Utilizando Decorators

Passo 1: Configuração

Para começar, é importante ter uma configuração TypeScript que permita o uso de decoradores. No seu arquivo tsconfig.json, verifique se a opção "experimentalDecorators": true está habilitada:

  {
  "compilerOptions": {
    "target": "es6",
    "experimentalDecorators": true
  }
}

Passo 2: Criando um Decorator

Vamos começar criando um decorador simples que exibe uma mensagem antes e depois da execução de um método. Neste exemplo, criaremos um decorador chamado logMethod.

// Definição do Decorador
function logMethod(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Antes da execução de ${key}`);
    const result = originalMethod.apply(this, args);
    console.log(`Depois da execução de ${key}`);
    return result;
  };

  return descriptor;
}

Passo 3: Aplicando o Decorator

Agora que temos nosso decorador, vamos aplicá-lo a um método em uma classe:

class MinhaClasse {
  @logMethod
  soma(a: number, b: number) {
    return a + b;
  }
}

const minhaInstancia = new MinhaClasse();
console.log(minhaInstancia.soma(2, 3));

Ao executar o código acima, você verá a seguinte saída no console:

  Antes da execução de soma
  Depois da execução de soma
  5

Isso demonstra que o decorador logMethod foi aplicado ao método soma da classe MinhaClasse e funcionou conforme o esperado.

Criando Decoradores com Argumentos

Decoradores também podem ter argumentos. Vamos criar um decorador que aceita um argumento para definir a mensagem de log.

function logMessage(message: string) {
  return function (target: any, key: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
      console.log(`Mensagem: ${message}`);
      const result = originalMethod.apply(this, args);
      return result;
    };

    return descriptor;
  };
}

Agora, podemos aplicar esse decorador à nossa classe da seguinte maneira:

class MinhaClasse {
  @logMessage("Executando a operação de soma")
  soma(a: number, b: number) {
    return a + b;
  }
}

const minhaInstancia = new MinhaClasse();
console.log(minhaInstancia.soma(2, 3));

Ao executar o código, a saída será:

Mensagem: Executando a operação de soma
5

Decorators são uma funcionalidade poderosa, mas é essencial usá-los de forma adequada. Eles podem tornar o código mais complexo e difícil de manter se usados de maneira inadequada.

Nesse artigo temos o básico necessário para começamos a construir nossas aplicações de forma mais robusta com essa incrível linguagem.

Links de referências e saiba mais.
- Mini-curso de TypeScript - Willian Justen
- Documentacao TypeScript
- Repositorio - Techs Roadmap

Este post tem como objetivo ajudar quem esta começando no aprendizado das tecnologias web, além de servir como incentivo no meus estudos e a criar outros posts pra fixação do aprendizado.

Me paga um café ? :) | pix: nascimento.dev.io@gmail.com

Me Sigam :)

Linkedin | Github

JavaScript - Event Loop

Jorge Nascimento — Wed, 01 Mar 2023 14:40:33 +0000

JavaScript - Event Loop

O event loop é o mecanismo que permite a execução de código assíncrono no Javascript, sendo I/O não bloqueante. Sabemos que o JS é single-threaded, ou seja, executa uma coisa por vez, e precisa lidar com chamadas que demandam tempo em background para deixar a sua Call Stack livre para continuar executando o código.

Vamos caminhar pelos conceitos do event loop e entender o que acontece por deixa dos panos.

A engine Javascript

Uma engine Javascript é um programa ou um interpretador que executa código Javascript. Uma engine Javascript pode ser implementada como um interpretador padrão, ou apenas um compilador que na hora certa (Just-in-time) compila Javascript para bytecode de alguma forma.

A engine mais famosa do javascript é a V8 da Google que é a mesma utilizada pelo NodeJs, vamos começar por ela, abaixo uma representação simplificada.

A engine consiste de dois principais componentes:

Memory Heap — é onde a alocação de memória acontece.

Call Stack — onde seus stack frames (quadros de pilha) estão enquanto seu código é executado.

O Runtime ( tempo de execução )

Há APIs no browser que têm sido utilizadas por quase todo o desenvolvedor Javascript (exemplo: setTimeout ). Estas APIs, no entanto, não são fornecidas pela Engine.

Então, de onde elas vem?

Acontece que a realidade é um pouco mais complicada.

Então, temos a engine, mas na verdade tem muito mais. Temos essas coisas das quais chamamos Web APIs que são fornecidas pelos browsers, como o DOM, AJAX, setTimeout e muito mais.

E então, temos o tão popular event loop e o callback queue.

A Call Stack (Pilha de chamadas)

A Call Stack é uma estrutura de dados que armazena basicamente onde no programa nós estamos. Se entrarmos em uma função, nós colocamos ela sobre o topo da Stack. Se retornamos de uma função, saímos do topo da stack. Isso é tudo que a stack pode fazer.

Vamos ver um exemplo. Veja o seguinte código:

function multiply(x, y) {
  return x * y;
}
function printSquare(x) {
  var s = multiply(x, x);
  console.log(s);
}
printSquare(5);

Quando a engine começa a executar esse código, a Call Stack vai estar vazia. Depois, os passos serão os seguintes:

Cada entrada na Call Stack é chamada de Stack frame.

E isso é exatamente como stack traces estão sendo construídos quando uma exceção é lançada — isso é basicamente o estado da Call Stack quando a exceção acontece. Dê uma olhada no seguinte código:

function foo() {
  throw new Error("throw error here ...");
}
function bar() {
  foo();
}
function start() {
  bar();
}
start();

Se isso é executado no Chrome, o seguinte stack trace vai ser produzido:

"Explodir a stack” — isso acontece quando você chega no tamanho máximo da Call Stack. E o que poderia acontecer muito facilmente, especialmente se você está utilizando recursão sem testar seu código muito extensivamente. Dê uma olhada neste exemplo de código:

function foo() {
  foo();
}
foo();

Quando a engine começa a executar esse código, ela começa chamando a função “foo”. Essa função, no entanto, é recursiva e começa a chamar ela mesmo sem qualquer condição para terminar. Então em cada ponto da execução, a mesma função é adicionada para a Call Stack de novo e de novo. Isso parece alguma assim:

Em algum ponto, no entanto, o número de chamadas de função na Call Stack excede o tamanho atual da Call Stack, e o browser decide tomar uma ação, lançando um erro.

Executando código sobre um single-thread pode ser muito fácil desde que você não tenha que lidar com cenários complicados que são criados em ambientes multi-threaded — por exemplo, deadlocks.

Mas executando sobre single-thread é muito limitante também. Já que o Javascript tem uma única Call Stack, o que acontece quando as coisas estão lentas ?

Concorrência e o Event Loop

O que acontece quando você tem callback na Call Stack que tomam uma enorme quantidade de tempo a fim de ser processada? Por exemplo, imagine que você quer fazer alguma transformação complexa de imagem com Javascript no browser.

Você pode perguntar — Por que isso é um problema ? O problema é que enquanto a Call Stack tem funções para executar, o browser não pode fazer qualquer coisa mais — ele está bloqueado. Isso significa que o browser não pode renderizar, ele não pode executar qualquer outro código, está preso. E isso cria problemas se você quer UI fluídas em seu código.

E esse não é o único problema. Uma vez que o browser começa processar muitas tarefas na Call Stack, ele pode parar de responder por um longo tempo. E a maioria dos browsers tomam uma ação criando um erro, perguntando se você quer encerrar a página web.

Agora, essa não é a melhor experiência do usuário não é?

Então, como podemos executar códigos pesados sem bloquear a interface do usuário e deixar o navegador sem resposta? Bem, a solução é callbacks assíncronos.

O Event Loop

A engine JS não é executada isoladamente, ela é executada dentro de um ambiente de hospedagem , que para a maioria dos desenvolvedores é o típico navegador da Web ou o Node.js. Atualmente, o JavaScript é incorporado em todos os tipos de dispositivos, desde robôs até lâmpadas. Cada dispositivo representa um tipo diferente de ambiente de hospedagem para a engine JS.

O denominador comum em todos os ambientes é um mecanismo interno chamado event loop, que lida com a execução de vários fragmentos de seu programa ao longo do tempo, sempre chamando o engine de JS.

Isso significa que a engine JS é apenas um ambiente de execução sob demanda para qualquer código JS arbitrário. É o ambiente circundante que agenda os eventos (as execuções do código JS).

O navegador é então configurado para escutar a resposta da rede, e quando tiver algo para retornar a você, ele agendará a função de retorno de chamada ( callback ) a ser executada inserindo-a no loop de eventos .

Vamos ver o diagrama abaixo:

E quais são essas APIs da Web? Em essência, eles são tópicos que você não pode acessar, você pode apenas fazer chamadas para eles. Eles são as partes do navegador nas quais a simultaneidade entra em ação. Se você é um desenvolvedor do Node.js, essas são as APIs do C++.

Então, o que é o event loop depois de tudo ?

O Event Loop tem um trabalho simples — para monitorar a call stack e a callback queue. Se a call stack estiver vazia, ela pegará o primeiro evento da fila e a empurrará para a call stack, que efetivamente a executa.

Tal iteração é chamada de tick no Event Loop. Cada evento é apenas uma função de callback.

Vamos “executar” esse código a seguir e ver o que acontece:

console.log("Hi");

setTimeout(function cb1() {
  console.log("cb1");
}, 5000);

console.log("Bye");

O estado é claro. O console do navegador é claro e a call stack está vazia.
console.log('Hi') é adicionado à call stack.
console.log('Hi') é executado.
console.log('Hi') é removido da pilha de chamadas.
setTimeout(function cb1() { ... })é adicionado à call stack.
setTimeout(function cb1() { ... }) é executado. O navegador cria um cronometro como parte das APIs da Web. Ele vai lidar com a contagem regressiva para você.
setTimeout(function cb1() { ... })está completo e é removido da call stack.
console.log('Bye') é adicionado à call stack.
console.log('Bye') é executado.
console.log('Bye') é removido da call stack.
Após pelo menos 5000 ms, o temporizador é concluído e ele envia o retorno de chamada cb1 para a fila de retorno de chamada.
O Event Loop retira o cb1 da callback queue e o envia para a call stack.
O cb1 é executado e adiciona o console.log('cb1')à call stack.
console.log('cb1') é executado.
O console.log('cb1') é removido da call stack.
O cb1 é removido da call stack.

O ES6 especifica como o event loop deve funcionar, o que significa que, tecnicamente, ele está dentro do escopo das responsabilidades da engine JS, que não está mais desempenhando apenas uma função de ambiente de hospedagem.

Job Queue

No event loop existe uma fila que lida com micro task chamada Job Queue que trata caso de assíncronismo como Promise , enquanto as macro task é tratado pela Task Queue.

Aqui estão alguns pontos essenciais a serem observados:

Nem todas as tarefas são criadas com a mesma prioridade. Existem macrotarefas e microtarefas.
MacroTasks são chamados Tasks e MicroTasks são chamados Jobs.
Exemplos de macrotarefas são setTimeout, setInterval, setImmediate, I/O tasks, etc.
Exemplos de microtarefas são Promises, process.nextTick, etc.
A Fila no Loop de Eventos contém as Tasks ( ou as MacroTasks ) chamadas Task Queue.
A fila no loop de eventos contém os Jobs ( ou as microtasks ) chamados Job Queue.
Por exemplo, Promises estão em Job Queue e as funções para setTimeOut estão em Task Queue.

A Job Queue possui prioridade sobre a Task Queue no Event Loop.

No geral, o Event Loop ganhou mais um item a ser considerado em sua orquestração de Execução de Código. Vamos entender a lógica acima com um fluxo de execução de código.

const tom = () => console.log("Tom");

const jerry = () => console.log("Jerry");

const cartoon = () => {
  console.log("Cartoon");

  setTimeout(tom, 5000);

  new Promise((resolve, reject) =>
    resolve("should it be right after Tom, before Jerry?")
  ).then((resolve) => console.log(resolve));

  jerry();
};

cartoon();

Portanto, a saída esperada é,

Cartoon
Jerry
should it be right after Tom, before Jerry?
Tom

Fluxo de execução:

A função cartoon entra na call stack.
Ele executa o log do console do texto Cartoon. A setTimeOut API da Web sai da call stack na linha de execução a seguir e a função associada tom é colocada em TaskQueue.
Na seguinte linha de execução, encontramos uma Promise. Um callback de uma promise obtém um lugar na JobQueue. Portanto, a execução da função de log do console na promessa vai para JobQueue.
Na linha de execução a seguir, a função jerry é colocada na stack e executada.
Temos uma entrada em TaskQueue e outra em JobQueue. O event loop prioriza todos os Jobs em JobQueue sobre qualquer coisa em TaskQueue. Portanto, o callback da Promise chega primeiro à call stack, é executado e, em seguida, a função tom chega à call stack da TaskQueue e é executada.

E por aqui terminamos mais esse estudo de conceitos relacionado ao Javascript. Entender como funciona o Event Loop nos ajuda a criar códigos melhores, mais otimizados e é um conhecimento muito importante para quem quer se torna um programador acima da média.

Links de referências e saiba mais.
- Como o Javascript funciona: O event loop
- Task Queue and Job Queue - Deep dive into Javascript Event Loop Model
- Javascript Event Loop - Why so Serious!
- NodeJS para iniciantes - Event Loop

Para se aprofundar mais no funcionamento interno do V8 e algoritmos de gerenciamento de memória acesse essa serie de artigos.

Como o Javascript funciona: uma visão geral da engine, runtime e da call stack

Este post tem como objetivo ajudar quem esta começando no aprendizado das tecnologias web, além de servir como incentivo no meus estudos e a criar outros posts pra fixação do aprendizado.

Me paga um café ? :) | pix: nascimento.dev.io@gmail.com

Me Sigam :)

Linkedin | Github

JavaScript - Assincronismo

Jorge Nascimento — Fri, 17 Feb 2023 13:45:14 +0000

Normalmente, o código de um programa é executado de forma direta, com uma coisa acontecendo por vez. Se uma função depende do resultado de outra função, ela tem que esperar o retorno do resultado, e até que isso aconteça, o programa inteiro praticamente para de funcionar do ponto de vista do usuário.

Dependendo do ambiente de programação que você está usando (navegadores da Web, no caso de desenvolvimento da Web) esses fornecem API's ( fetch, promise, works) que permitem executar essas tarefas de forma assíncrona, ou seja, realizar processamento fora da thread principal e após finalizar o resultado é retornado.

Técnicas async ( assíncronas ) são muito úteis, principalmente na programação web. Quando um aplicativo web é executado em um navegador e executa um pedaço de código rigoroso sem retornar o controle para o navegador, ele pode parecer que travou. Isso é chamado de blocking; o navegador está bloqueado de continuar a manusear a entrada do usuário e de realizar outras tarefas até que o aplicativo web retorne o controle do processador.

Tarefas pesadas como cálculos demorados, ou buscar uma informação em servidor podem demorar e bloqueiam o navegador e isso torna uma experiência ruim para o usuário.

Threads

Uma thread é basicamente um único processo que um programa pode usar para concluir tarefas. Cada thread só pode fazer uma tarefa de cada vez:

Cada tarefa será executada sequencialmente, uma tarefa tem que ser concluída antes que a próxima possa ser iniciada.

JavaScript é tradicionalmente single-threaded. Mesmo com múltiplos núcleos de processamento, você só pode fazê-lo executar tarefas em uma única thread, chamada de main thread (thread principal).

Depois de um tempo, o JavaScript ganhou algumas ferramentas para ajudar em tais problemas. As Web workers te permitem mandar parte do processamento do JavaScript para uma thread separada.

Você geralmente usaria uma worker para executar um processo pesado para que a UI não seja bloqueada.

Main thread: Tarefa A --> Tarefa C

Worker thread: Tarefa pesada B

Código Assíncrono

Os Works ajudam no processamento paralelo, porém eles possuem limitações e não são a principal solução em JavaScript para lidar com assíncronismo. Os browsers nos permitem executar certas operações de modo assíncrono através de recursos como Promises que te permitem executar uma operação e depois esperar pelo resultado antes de executar outra operação:

Main thread: Tarefa A                   Tarefa B
Promise:         | ---> operação async ---> |

Já que a operação está acontecendo em outro lugar, a main thread não está bloqueada enquanto a operação assíncrona está sendo processada.

JavaScript Async

A programação assíncrona é uma técnica que permite que seu programa inicie uma tarefa potencialmente de longa duração e ainda seja capaz de responder a outros eventos enquanto essa tarefa é executada, em vez de ter que esperar até que essa tarefa seja concluída.

Muitas funções fornecidas pelos navegadores, podem levar muito tempo e, portanto, são assíncronas. Por exemplo:

Fazendo solicitações HTTP usando fetch()
Acessar a camera ou o microfone de um usuário usando getUserMedia()
Pedindo a um usuário para selecionar arquivos usando showOpenFilePicker()

Na programação síncrona o programa executa o código uma linha de cada vez na ordem em que o escrevemos, aguardando a finalização da tarefa anterior para seguir para a próxima.

O problema dessa abordagem é que, quando o navegador precisa lidar com processamento que são potencialmente demorados a página trava até que o processamento retorne com o resultado.

O conceito de assíncronismo é usada para resolver esse tipo de problema, pois podemos delegar um processamento para uma função e continuar o fluxo de execução, após o processamento for concluído o seu retorno fica disponível para utilização.

Manipuladores de eventos são exemplos de uso de assíncronismo, pois recebem funções ( callbacks ) que são executadas baseada em disparo de evento.

Funções de Callback

Callbacks são funções passado como argumentos de outras funções, que é chamada de volta quando um determinado evento/processo seja acionado, como por exemplo um evento do navegador como click .

Essa era forma mais utilizada para lidar com comportamento assíncrono no passado e que ainda é utilizado por algumas API's event-driven. Dependendo da operação a utilização de callback pode deixa o código com difícil legibilidade e dificulta manutenção conforme o exemplo abaixo:

function doStep1(init, callback) {
  const result = init + 1;
  callback(result);
}

function doStep2(init, callback) {
  const result = init + 2;
  callback(result);
}

function doStep3(init, callback) {
  const result = init + 3;
  callback(result);
}

function doOperation() {
  doStep1(0, (result1) => {
    doStep2(result1, (result2) => {
      doStep3(result2, (result3) => {
        console.log(`result: ${result3}`);
      });
    });
  });
}

console.log(doOperation()); // => result: 6

Como temos que chamar callbacks dentro de callbacks, obtemos uma função doOperation() profundamente aninhada ( às vezes é chamado de callback hell ), que é muito mais difícil de ler e depurar, como forma de lidar com esse problema foram criado novas formas de lidar com assíncronismo como Promise.

Promises

Uma Promise é um objeto que representa a eventual conclusão ou falha de uma operação assíncrona e é a forma mais moderna de lidar com processamento assíncrono em javascript.

Para utilizar uma Promise é necessário instanciar la com o operador new passando uma função que recebe 2 argumentos ( resolve, reject ), esses são funções que são chamadas em caso de sucesso ou falha da operação.

Uma Promise sempre retorna outra promise e utilizamos os métodos .then e .catch que retorna resultado seja de sucesso ou falha como parâmetro em sua função de callback.

Vamos refatorar o exemplo anterior para melhor entendimento:

function doStep1(init) {
  return new Promise((resolve, reject) => {
    const result = init + 1;

    resolve(result);

    // tratar possíveis erros - reject(erro)
  });
}

function doStep2(init) {
  return new Promise((resolve, reject) => {
    const result = init + 2;

    resolve(result);

    // tratar possíveis erros - reject(erro)
  });
}

function doStep3(init) {
  return new Promise((resolve, reject) => {
    const result = init + 3;

    resolve(result);

    // tratar possíveis erros - reject(erro)
  });
}

function doOperation() {
  return doStep1(0)
    .then((result1) => doStep2(result1))
    .then((result2) => doStep3(result2))
    .then((result3) => console.log(`result: ${result3}`))
    .catch((err) => console.log(err));
}

doOperation(); // => result: 6

Percebemos que removemos a função de callback e capturamos o valor do processamento através do método .then, esse pode ser encadeado com outras chamadas conforme o exemplo ( evitando o callback hell ).

Utilizamos o .catch ao final para capturar possíveis erros no processamento. ( Nesse exemplo não foi simulado processamento assíncrono e retorno de erro por se tratar de um exemplo simplificado ).

Promises deixam o código mais legível, fácil de entender e manter em casos mais complexos.

A API de Promise possui métodos que ajudam em execução de operação de forma paralela como o Promise.all(), Promise.race() entre outros, para maior conhecimento deixarei o link do documentação ao final do post.

Async / Await

Async / Await é um sintax sugar ( forma simplificada ) para utilizar promises, com essa sintaxe o código fica similar a um código síncrono e não é necessário realizar encadeamento de métodos.

Normalmente utilizamos await dentro de uma função com o prefixo async, o await aguarda a resolução de uma Promise que geralmente é armazenada em uma variável e utilizada conforme desejado na sequencia do código.

Utilizamos o bloco try catch para captura possíveis erros nos retorno das promises.

Vamos refatorar o mesmo exemplo anterior:

function doStep1(init) {
  return new Promise((resolve, reject) => {
    const result = init + 1;

    resolve(result);

    // tratar possíveis erros - reject(erro)
  });
}

function doStep2(init) {
  return new Promise((resolve, reject) => {
    const result = init + 2;

    resolve(result);

    // tratar possíveis erros - reject(erro)
  });
}

function doStep3(init) {
  return new Promise((resolve, reject) => {
    const result = init + 3;

    resolve(result);

    // tratar possíveis erros - reject(erro)
  });
}
async function doOperation() {
  try {
    const result1 = await doStep1(0);
    const result2 = await doStep2(result1);
    const result3 = await doStep3(result2);

    console.log(`result: ${result3}`);
  } catch (err) {
    console.log(err);
  }
}

doOperation(); // => result: 6

Basicamente a única alteração é na forma de como tratamos o retorno de uma promise, precisamos de uma função async e dentro dessa função utilizamos o await para aguardar retornos de promises e tratar conforme o desejado, deixando um código mais linear e evitando excesso de complexidade.

Então é isso pessoal, nesse artigo conseguimos ter uma noção do que é assíncronismo e como a linguagem Javascript lida com esse comportamento para evitar bloqueio da sua thread, outro assunto importante para entender por menores internos da linguagem é estudar o Event Loop que será tema do próximo post.

Links de referências e saiba mais.
Introdução ao JavaScript Async
Usando promises
Funções assíncronas
Concorrência, Paralelismo, Processos, Threads, programação síncrona e assíncrona

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Este post tem como objetivo ajudar quem esta começando no aprendizado das tecnologias web, além de servir como incentivo no meus estudos e a criar outros posts pra fixação do aprendizado.

Me Sigam :)

Linkedin | Github

JavaScript Fundamentos - Tipos Objetos

Jorge Nascimento — Wed, 08 Feb 2023 15:44:10 +0000

Nesse post vamos conhecer um pouco sobre o tipo objeto da linguagem, sendo esse mais um fundamento importante para fortalecer nossa base em JavaScript.

Em JS tudo é objetos, mesmo os tipos primitivos se comportam como objetos quando precisamos utilizar métodos para sua manipulação.

typeof function sum(a, b) {
  return a + b;
}; // => 'function'
typeof { name: "Linus Torvald" }; // => 'object'
typeof [1, 2, 3, 4, 5]; // => 'object'
typeof /[a-zA-Z_$]/; // => 'object'
typeof new Date(); // => 'object'

Vamos conhecer os principais tipos de objetos e algumas das API's fornecidas.

Objetos

Um objeto é uma coleção dinâmica de propriedades definidas por chaves, que podem ser do tipo string ou symbol, e valores que podem ser de qualquer tipo de dados.

É possível criar objetos de várias formas : pela notação literal, por meio de uma função construtura ou do método create da Object API

{} // literal
new Object(); // Construtora
Object.create(null); // API

Atribuindo um objeto a uma constante.

const book = {
  title: "Clean Code",
  author: "Robert C Martin",
  pages: 464,
  language: "English",
  available: true,
};

Shorthand notation, quando o nome de uma variável é utilizado com o mesmo nome da chave, utiliza se apenas o nome da variável.

const book = { title, author, pages, language, available };

É possível computar chaves em tempo de execução.

const key1 = "title";
book[key1] = "other title";

Na criação de chaves com nomes composto é necessário utilizar aspas.

const person = {
  //name-sobrenome: "Jorge Nascimento",  -> gera erro na chave
  "nome-sobrenome": "Jorge Nascimento",
};

Além do notação literal , é possível atribuir propriedades aos objetos por meio da usa referência.

const car = {};
car.marca = "Ferrari";
car.ano = "2020";
car.modelo = "Spider";

Propriedades consultadas por meio de sua referência.

car.modelo; // => "Spider"

É possível consultar uma determinada chave por meio do operador in.

"modelo" in car; // => true

As propriedades de um objeto podem ser apagadas por meio do operador delete;

delete car.ano;

Iterando objeto com o for in

for (let key in car) {
  console.log(car[key]); // iterando sobre as chaves do objeto
}

Criando um cópia do objeto car.

const car2 = {};

for (let key in car) {
  car2[key] = car[key];
}

A comparação dos objetos é feita por meio de sua referência , assim, ainda que dois objetos tenham exatamente as mesmas propriedades eles serão considerados diferentes.

const book = {
  title: "JavaScript",
  author: "Nascimento",
};

const book2 = {
  title: "JavaScript",
  author: "Nascimento",
};

book === book2; // => false

Um das formas para comparar os objetos é analisando cada uma das propriedades por meio da comparação das chaves e valores.

let equal = true;

for (let key in book) {
  if (book[key] !== book2[key]) equal = false;
}

for (let key in book2) {
  if (book[key] !== book2[key]) equal = false;
}

Para garantir que um objeto é igual ao outro é necessário verificar seus protótipos.

Herança - O principal objetivo de herança é permitir o reuso de código por meio do compartilhamento de propriedades entre objetos, evitando duplicação.
- Na linguagem Javascript a herança é realizada entre objetos e não classes.
- A propriedade proto é uma referência para o prototipo do objeto.

const functionalLanguage = {
  paradigm: "Functional",
};

const scheme = {
  name: "Scheme",
  year: 1975,
  // paradigm: "Functional" ,    - propriedade que se repete.
  __proto__: functionalLanguage,
};

const javascript = {
  name: "Javascript",
  year: 1995,
  // paradigm: "Functional"
  __proto__: functionalLanguage,
};

javascript.paradigm; // => Functional

Quando a propriedade não é encontrada no objeto atual esse sera buscada na sua cadeia de protótipos, chegando até object que tem proto null.

O método hasOwnProperty pode ser utilizado para determinar se uma propriedade pertence ao objeto.

for (let key in scheme) {
  console.log(key, scheme.hasOwnProperty(key));
}

Os métodos Object.setPrototypeOf e Object.getPrototypeOf permite setar ou retornar prototipo de um objeto.

// seta prototipo através da API do Object
Object.setPrototypeOf(objeto, prototipo);

// Retorna o seu prototipo
Object.getPrototypeOf(objeto);

Com o método Object.create é possível criar um objeto passando seu protótipo como parâmetro.

const scheme = Object.create(functionalLanguage);
scheme.name = "Scheme";
scheme.year = 1975;

Sem prototipo o objeto perde algumas operações importantes ( método como hasOwnProperty)

Vamos conhecer os métodos da Object API.
- O método Object.assign faz a cópia das propriedades dos objetos passados por parâmetro para o objeto alvo, que é retornado.

const javascript = Object.create({});

Object.assign(
  javascript,
  {
    name: "JavaScript",
    year: 1995,
    paradigm: "OO and Functional",
  },
  {
    author: "Brendan Eich",
    influenceBy: "Java, Scheme and Self",
  }
);

- O método Object.keys retorna um array com as chaves do objeto informado.

Object.keys(javascript); // ==> [ 'name', 'year', 'paradigm', 'author', 'influenceBy' ]

- O método Object.value retorna um array os valores das propriedades.

Object.values(javascript); // => [ 'JavaScript', 1995,'OO and Functional', 'Brendan Eich','Java, Scheme and Self' ]

- O método Object.entries retorna um array de arrays onde cada posição do array retornado possui o par chave e valor do objeto passado.

Object.entries(javascript); // ==> [ [ 'name', 'JavaScript' ], [ 'year', 1995 ],  [ 'paradigm', 'OO and Functional' ],[ 'author', 'Brendan Eich' ],[ 'influenceBy', 'Java, Scheme and Self' ] ]

- O método Object.is compara dois objetos, considerando os tipos de dados, de forma similar ao operador === ( comparação de referência )

Object.is(javascript, javascript); // ==> true

- O método Object.defineProperty define uma nova propriedade diretamente em um objeto, ou modifica uma propriedade já existente em um objeto, e retorna o objeto.

Na definição dessa propriedade essa pode ter configurações conforme abaixo:

configurable - Permite que uma determinada propriedade seja apagada.

enumerable - permite que uma determinada propriedade seja enumerada ( exibida ).

value - Define o valor de uma determinada propriedade.

writable - Permite que uma determinada propriedade tenha seu valor modificado

const JavaScript = {};

Object.defineProperty(JavaScript, "name", {
  value: "JavaScript",
  enumerable: true,
  writable: true,
  configurable: true,
});

Caso apenas o value seja especificada as demais são consideradas falsa (enumerable | writable | configurable)

- O método Object.preventExtensions impede que o objeto tenha novas propriedades, mas permite modificar ou remover as propriedades existentes.

Object.preventExtensions(JavaScript);
Object.isExtensible(JavaScript); // => false

- O método Object.seal impede que o objeto tenha novas propriedades ou apague propriedades existentes, mas permite modificar propriedades existentes.

Object.seal(JavaScript);
Object.isSealed(JavaScript); // => true

- O método Object.freeze impede que o objeto tenha novas propriedades apague ou modifique propriedades existentes.

Object.freeze(JavaScript);
Object.isFrozen(JavaScript); // => true

RegExp

As expressões regulares são estruturas formadas por uma sequência de caracteres que especificam um padrão formal que servem para validar, extrair ou mesmo substituir caracteres dentro de um string.

let regExp = /john@gmail.com/ || new RegExp(/john@gmail.com/);

O método test verifica se a string passada por parâmetro possui o padrão da regexp, retornando um booleano.

let result = regExp.test("john@gmail.com"); // => true - padrão identificado

O método exec possui um retorno com mais informações ele retorna um array com index onde foi encontrado o padrão e input analisado, grupos.

regExp.exec("john@gmail.com");

/*[ 'john@gmail.com',
  index: 0,
  input: 'john@gmail.com',
  groups: undefined ] */

Documentação: RegExp

Function

Uma função é um objeto que contém código executável. Assim como o programa em si, uma função é composta por uma sequência de instruções chamada corpo da função. Valores podem ser passados para uma função e ela vai retornar um valor.

Na linguagem JavaScript, as funções são de primeira classe, ou seja, podem ser atribuída a uma variável, passadas por parâmetro ou serem retornada de uma outra função.

function declaration forma padrão de declara com a palavra reservado function.

function sum(a, b) {
  return a + b;
}

Na function declaration a mesma é içada para o inicio do contexto de execução sendo assim ela pode ser chamada antes de declarada.

function expression declaração de função atribuída a uma variável.

const sum = function (a, b) {
  return a + b;
};

Função que retorna outra função - para ter acesso a a função interna é necessário realizar uma dupla invocação calculator()()

const calculator = function (fn) {
  return function (a, b) {
    return fn(a, b);
  };
};

calculator(sum)(2, 2); // => 4

Definindo valores padrão para o parâmetro, no caso desse parâmetro não for passado ele irá assumir o default.

const subtract = function (a = 0, b = 2) {
  return a - b;
};

subtract(5); // => 3

arguments é uma variável implícita que é possível acessar os parâmetros da função invocada, essa retorna um objeto com índice e valor passado.

const argsFunction = function () {
  return arguments;
};

argsFunction(1, 2, 3, 4, 5); // => { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }

Também é possível acessar os parâmetros da função invocada por meio do rest paramenter, esse retorna um array com os parâmetros passados, deve ser usado como último da lista de parâmetros.

const restFunction = function (...numbers) {
  return numbers;
};
restFunction(1, 2, 3, 4, 5); // => [ 1, 2, 3, 4, 5 ]

constructor functions ( Funções Construtoras ) servem como molde para a criação de objetos, essas precisam ser instanciadas pelo operador new. O this dentro delas se referencia ao objeto criado a partir delas.

New permite que crie objetos tanto das funções construtoras quanto das classes.

const Person = function (name, city, year) {
  this.name = name;
  this.city = city;
  this.year = year;
};

Toda função tem uma propriedade chamada prototype, que é vinculada ao __proto__ do objeto criado pelo operador new.

Person.prototype.getAge = function () {
  return new Date().getFullYear() - this.year;
};

const newPerson = new Person("Bill Gates", "Seattle", 1955);

factory function ( Funções Fábricas ) são semelhantes às funções construtoras / funções de classe, mas em vez de usar new para criar um objeto, as funções de fábrica simplesmente criam um objeto e o retorna.

// Reaproveitando propriedades em comuns.
const personPrototype = {
  getAge() {
    return new Date().getFullYear() - this.year;
  },
};

const createPerson = function (name, city, year) {
  const person = {
    name,
    city,
    year,
  };
  Object.setPrototypeOf(person, personPrototype);
  return person;
};

const createPerson = createPerson("Linus Torvalds", "Helsinki", 1965);

Call e Apply - Essas funções são capaz de alterar o valor this. Por padrão, o primeiro parâmetro que recebe é o valor do this e o demais parâmetros são da função que invoca o método.

const circle = {
  radius: 10,
};

function calculateArea(fn) {
  return fn(Math.PI * Math.pow(this.radius, 2));
}

calculateArea.call(circle, Math.round); // => 315
calculateArea.apply(circle, [Math.ceil]); // => 315

A diferença entre call e apply é que no apply os parâmetros são passando como um array.

Bind funciona de uma maneira diferente do call e do apply, ao invés de executar uma função, este retorna uma nova função. O seu primeiro parâmetro continua recebendo o valor que será atribuído ao this e os demais argumentos serão os parâmetros que definirão os valores atribuídos da primeira função.

const calculateAreaForCircle = calculateArea.bind(circle);
calculateAreaForCircle(Math.round); // => 315

Arrow Function

As Arrow Functions tem uma abordagem mais simples e direta para escrever uma função e podem melhorar a legibilidade do código em diversas situações.

Com a arrow function retiramos a palavra function e apos os parêntese se utiliza o =>, podendo também retirar as chaves { } que nesse caso será realizado um retorno implícito sem o uso da palavra return .

const sum = (a, b) => a + b;
// {
//   return a + b;
// };

const subtract = (a, b) => a - b;
// {
//   return a - b;
// }

Um exemplo com função que retorna outra função.

const calculate = (fn) => (a, b) => fn(a, b);
// (fn) =>{
//   return (a, b) =>{
//     return fn(a, b);
//   };
// };

calculate(sum)(2, 3); // ==> 5

Cuidado com a legibilidade do código.

A Arrow functions nos permite também abrir mão dos parênteses nos casos onde é utilizado apenas um parâmetro.

Arrow functions não possuem as suas próprias variáveis this e arguments.

// this
const person = {
  name: "James Gosling",
  city: "Alberta",
  year: 1955,
  getAge: () => {
    return new Date().getFullYear - this.year; // => NaN
  },
};

// arguments
const sum = () => {
  let total = 0;

  for (let argument in arguments) {
    total += arguments[argument];
  }
  return total;
};

sum(2, 3, 4, 5); // error

Arrays

Um Array é um objeto similar a uma lista que armazena diferentes tipos de dados e oferece operações para acessar e manipular suas propriedades.

Podemos criar um array através da função construtora ou iniciando com [ ]

const languages = new Array("Python", "C", "Java");
const languages = ["Python", "C", "Java"];

É possível iniciar um array passando apenas um Number para a função construtora.

const numbers = new Array(10);
console.log(numbers); // => [ <10 empty items> ]

A propriedade length indica a quantidade de elementos que existem dentro do array. Os elementos vazios sao considerados no length, caso o array tenha elementos com indices com espaços com elementos vazios esses são contabilizados no length)

console.log(numbers.length); // => 10

AccessorAPI

Os accessor methods quando invocados retornam informações especificas sobre o array.

indexOf: Retorna a posição do primeiro elemento encontrado, caso não exista o elemento no array é retornado -1.

const languages = ["Python", "C", "Java"];
console.log(languages.indexOf("Python")); // => 0

lastIndexOf: Retorna a posição do último elemento encontrado, caso tenha mais de um elemento igual no array.

console.log(languages.lastIndexOf("Python")); // => 0

includes: Retorna true se o elemento existir no array.

console.log(languages.includes("JavaScript")); // => false

concat: Retorna um novo array resultante da concatenação de um ou mais array.

Arrays não são alterados, apenas é retornado um novo array com a concatenação.

const veiculos = ["HB20", "Opalla", "Agile"];
const motocicletas = ["Honda CB", "Kawasaki Ninja"];

console.log(veiculos.concat(motocicletas)); // => [ 'HB20', 'Opalla', 'Agile', 'Honda CB', 'Kawasaki Ninja' ]

slice: Retorna partes de um determinado array de acordo com a posição inicio e fim, posição fim é o valor -1, caso passe apenas o valor inicial irá retornar desse ponto até o final.

console.log(veiculos.slice(1, 3)); // => ['Opalla,'Agile']

join: Converte o array para uma String, juntando os elementos com base em um separador.

const joinArray = veiculos.join("-");
console.log(joinArray); // => HB20-Opalla-Agile

MutatorAPI

Os mutator methods quando invocados modificam o array.

push: Adiciona um elemento no final e retorna o novo length do array.

const languages = ["Python", "C", "Java"];

languages.push("C#");
console.log(languages); // ==> [ 'Python', 'C', 'Java', 'C#' ]

pop: Remove um elemento do final e o retorna.

console.log(languages); // ==> [ 'Python', 'C', 'Java' ]

unshift: Adiciona um elemento no inicio e retorna o novo length.

languages.unshift("JavaScript");
console.log(languages); // ==> [ 'JavaScript', 'Python', 'C', 'Java' ]

shift: Remove um elemento no inicio e o retorna.

languages.shift();
console.log(languages); // ==> ["Python", "C", "Java"]

splice: Remove, Substitui ou Adiciona um ou mais elementos em uma determinada posição e retorna um novo array com os elementos removidos.
- splice(posição do elemento a ser removido, quantidade de elementos a serem removido a parti daquele ponto)

languages.splice(1, 1); // Remove C e retorna ["C"];
console.log(languages); // ==> [ 'Python', 'Java' ]

Inserindo elementos com splice, quando não for remover no segundo parâmetro utiliza se 0.

languages.splice(1, 0, "C++", "C#"); // Partindo da posição 1 é inserido os elementos C++ e C#
console.log(languages); // ==> [ 'Python', 'C++', 'C#', 'Java' ]

Removendo os 2 elementos inseridos e colocando novamente o C.

languages.splice(1, 2, "C"); // Retorna ["C++", C#]
console.log(languages); // ==> ["Python", "C", "Java"]

sort: Ordena os elementos de acordo com a função de ordenação.
- Sort recebe uma função com parâmetros a e b, sendo seu retorno a - b pra ordenação crescente, b - a inverte a ordem.

const languagesObj = [
  {
    name: "Python",
    year: 1991,
  },
  {
    name: "C",
    year: 1972,
  },
  {
    name: "Java",
    year: 1995,
  },
];

languagesObj.sort(function (a, b) {
  return a.year - b.year;

  // return (a.name <= b.name) ? -1 : 1; // Para ordenação por ordem alfabética
  // return a.name.localeCompare(b.name);
});

console.log(languagesObj);
/*[ { name: 'C', year: 1972 },
    { name: 'Python', year: 1991 },
    { name: 'Java', year: 1995 } ] */

reverse: Inverte a ordem dos elementos.

languages.reverse();
console.log(languages); // => ["Java", "C", "Python"]

fill: Preenche os elementos de acordo com a posição de inicio e fim.
- fill(value, pos. inicial,pos. final) - preenche com o value o intervalo passado no parâmetro.

languages.fill("JavaScript", 0, 2);
console.log(languages); // ==> [ 'JavaScript', 'JavaScript', 'Python' ]

IterationAPI

Os iteration methods quando invocados iteram sobre os elementos do array.

forEach: Executa a função passada por parâmetro para cada elemento.

const frameworks = ["VueJS", "NextJS", "AngularJS"];
frameworks.forEach((framework) => console.log(framework)); // ==> "VueJS", "NextJS", "AngularJS"

filter: Retorna um novo array contendo somente os elementos que retornaram true na condição da função passada por parâmetro.

const frameworks = [
  {
    name: "AngularJS",
    contributors: 1548,
  },
  {
    name: "EmberJS",
    contributors: 746,
  },
  {
    name: "VueJS",
    contributors: 240,
  },
];

const resultFilter = frameworks.filter(
  (framework) => framework.contributors < 1000
);

console.log(resultFilter);
// =>
/* [ { name: 'EmberJS', contributors: 746 },
     { name: 'VueJS', contributors: 240 } ]  */

find: Retorna o primeiro elemento que retornou true na condição da função passada por parâmetro.

const resultFind = frameworks.find((framework) => framework.name === "VueJS");

console.log(resultFind); // ==> { name: 'VueJS', contributors: 240 }

some: Retorna true se um ou mais elementos retornaram true na condição da função passada por parâmetro.

const resultSome = frameworks.some(
  (framework) => framework.name === "AngularJS"
);

console.log(resultSome); // ==> true

every: Retorna true se todos elementos retornaram true na condição da função passada por parâmetro.

const resultEvery = frameworks.every(
  (framework) => framework.contributors > 1000
);

console.log(resultEvery); // ==> false

map: Retorna um novo array com base no retorno da função passada por parâmetro.

const resultMap = frameworks.map((framework) => framework.name);

console.log(resultMap); // ==> ["AngulaJS", "EmberJS", "VueJS"]

reduce: Recebe uma função de callback que possui 2 parâmetros principais o acc ( accumulator ) e o currentItem ( item atual do array iterado), o segundo parâmetro é o tipo de dado que será retornado do reduce.

const resultReduce = frameworks.reduce(function (total, framework) {
  return total + framework.contributors;
}, 0);

console.log(resultReduce); // ==> 2534 ( soma do total de contribuidores )

Math API

Math é um objeto global que contém constantes matemática e métodos para realização de operações envolvendo números.

Constantes Matemáticas

Math.E; // => 2.718281828459045
Math.LN10; // => 2.302585092994046
Math.LN2; // => 0.6931471805599453
Math.LOG10E; // => 1.4426950408889634
Math.PI; // => 3.141592653589793
Math.SQRT2; // => 1.4142135623730951
Math.SQRT1_2; // => 0.7071067811865476

Operações de arredondamentos
- abs - converte o sinal de um número para positivo

Math.abs(10); // =>10
Math.abs(-10); // => 10

- ceil - Arredonda o número para cima.

Math.ceil(1.1); // => 2
Math.ceil(-1.1); // => -1

- floor - Arrendonda o número para baixo.

Math.floor(9.9); // => 9
Math.floor(-9.9); // => 10

- round - Arredonda o número para cima se a parte decimal for de 5 a 9 e para baixo se for de 0 a 4;

Math.round(4.5); // => 5
Math.round(-4.5); // => -4

- sign - Retorna 1 se o número for positivo e -1 se for negativo.

Math.sign(5); // => 1
Math.sign(-5); // => -1

- trunc - Elimine a parte decimal do número ,tornando-o um inteiro.

Math.trunc(2.3); // => 2
Math.trunc(-2.3); // => -2

Operações aritméticas / Trigonometria
- cbrt - Retorna a raiz cúbica do número.

Math.cbrt(8); // => 2

- cos - Retorna o cosseno de um ângulo

Math.cos(Math.PI / 3); // => 0.5000000000000001

- exp - Retorna ex, onde x é o argumento, e e é a Constante de Euler, a base dos logaritmos naturais

Math.exp(1); // => 2.718281828459045

- hypot - Retorna a raiz quadrada dos quadrado dos números.

Math.hypot(3, 4); // => 5

- log - Retorna o logaritmo do número em base natural.

Math.log(1); // => 0

- pow - Retorna o número elevado a um determinado expoente.

Math.pow(2, 10); // => 1024

- sin - Retorna o seno de um ângulo.

Math.sin(Math.PI / 2); // => 1

- sqrt - Retorna a raiz quadrada do número.

Math.sqrt(4); // => 2

- tan - Retorna a tangente de um ângulo.

Math.tan(Math.PI / 4); // => 0.9

Mínimo, Máximo e Random.
- min - Retorna o menor número passado por parâmentro.

Math.min(1, 2, 3, 4, 5, 6); // => 1

- max - Retorna o maior número passado por parâmetro.

Math.max(1, 2, 3, 4, 5, 6); // => 6

- random - Retorna um número randômico entre 0 e 1, não incluindo o 1;

Math.floor(Math.random() * 1000);

Por hoje é isso pessoal, conseguimos ter uma boa noção dos principais tipos objetos e como manipula-los, nos próximo posts iremos conhecer conceitos como closures e assíncronismo ( Promises ).

Obrigado por ler.

** Exemplos são baseado no curso JavaScript - MasterClass do Rodrigo Branas.

Links de referências e saiba mais.
- Objetos Globais

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Este post tem como objetivo ajudar quem esta começando no aprendizado das tecnologias web, além de servir como incentivo no meus estudos e a criar outros posts pra fixação do aprendizado.

Me Sigam :)

Linkedin | Github

JavaScript Fundamentos - Tipos Primitivos e Operadores

Jorge Nascimento — Tue, 07 Feb 2023 15:39:28 +0000

Vamos entender os tipos de dados fornecidos pela JS e os métodos que ajudam em sua manipulação.

Os Tipos primitivos são: Number | Boolean | String | Null | Undefined e Symbol.

Vamos passar por cada um desses tipos e explorar cada método que utilizamos quando queremos realizar algum tipo de manipulação, conhecendo também os tipos de operadores da linguagem.

Vamos lá.

Number

O tipo Number ele é primitivo, imutável e é representado internamente pelo padrão IEEE 754 de 64bits.

Suporte a decimal, octal, hexadecimal e binário.

new Number(10); // Decimal
new Number(08); // octal
new Number(0xff); // Hexadecimal
new Number(0b11); // binário

// Métodos auxiliares

// fixar quantidade de casa decimais após a virgula
(10).toFixed(2); => '10.00'

// Quantidade algarismo que deve ser representado.
(20).toPrecision(10); => '20.00000000'

Conversão do tipo number

Forma mas simples de conversão de um número é chamando a função construtora Number.

Number("10"); => 10
Number("0b10"); => 2
Number("0o10"); => 8
Number("0xFF"); => 255

Number("JavaScript"); // => NaN

Conversão com operadores numérico - Cuidado ! Nem todos operadores realiza a conversão para número.

// converte a string "10" para o inteiro 10.
~~"10";
+"10";
"10" - 0;
"10" * 1;
"10" / 1;

Utilizando o toString() para converter número em outras bases.

(0xa).toString(10); // => '10'
(0b1010).toString(16); // => 'a'
(010).toString(2); // => '1000'
(10).toString(8); // => '12'

Utilizando o parseInt(), caso não seja decimal deve se informa de qual base o número estar.

parseInt("10", 10); // => 10
parseInt("9.9", 10); // => 9
parseInt("A", 16); // => 10
parseInt("11", 2); // => 3

Utilizando o parseFloat() - converte apenas números decimais.

parseFloat("10"); // => 10
parseFloat("2.5"); // => 2.5
parseFloat("0xFF"); // => 0  (ignora as letras)
parseFloat("0b10"); // => 0   (ignora as letras)

IEE754 - Define o padrão de numeração em 64bits / Ocasiona anormalidade em determinadas situações

0.1 + 0.3; // => 0.30000000000000004
666.7 - 666.6; // => 0.10000000000002274
33.33 * 3; // => 99.89999999999999
12.2 / 0.1; // => 121.99999999999999

Infinity - positivo ou negativo | é retornado quando uma operação ultrapassa os limites do tipo Number.

1 / 0; // => Infinity
Math.pow(10, 1000); // => Infinity
Number.MAX_VALUE * 2; // => Infinity
-Number.MAX_VALUE * 2; // => -Infinity
Math.log(0); // => -Infinity

Vamos conhecer os operadores da linguagem são eles:
Aritméticos + - / * %

2 + 2; // => 4
5 - 3; // => 2
4 * 5; // => 20
9 / 3; // => 3
7 % 2; // => 1

Atribuição += -= *= /= %=

let resultado = 10;

resultado += 2; // => 12
resultado -= 2; // => 8
resultado *= 2; // => 20
resultado /= 2; // => 5
resultado %= 2; // => 0

Incremento e Decremento ++ | --

resultado = 10;
resultado--; // => 9
resultado++; // => 10

- Operadores binários (bit a bit) |(or) &(and) ^(xor) ~(not) <<(shift - deslocamento de bits)>> >>>(shift com mudança de sinal) - operações são realizada com 32bits.

4 | 3; // => 7 ( Operação resultante de comparação em escala binária)
(4).toString(2).padStart(32, 0); // convertendo o valor em binário com 32bits
(3).toString(2).padStart(32, 0); // é feita a comparação bit a bit do operador

3 & 1; // => 1
5 ^ 2; // => 7
~2; // => -3
4 << 2; // => 16
128 >> 1; // => 64
-2 >>> 1; // => 2147483647

Boolean

O tipo Boolean é primitivo , imutável e representado pelas palavras true e false.

typeof true; // => boolean
typeof false; // => boolean

new Boolean(true); // => [Boolean: false]
new Boolean(false); // => [Boolean: false]

typeof new Boolean(false); // => object

// Exemplos

let condition = true;

if (condition) {
  console.log("The condition is true");
} else {
  console.log("The condition is false");
}

// Exemplo 2

let condition = new Boolean(true);

if (condition) {
  console.log("The condition is true");
} else {
  console.log("The condition is false");
}

// Ambas entra no true devido coerção de tipo

Warning - Cuidado com a coerção de tipo, acontece quando um tipo de dados é utilizado em um contexto onde é convertido de forma implícita ou explicita.

// Conversões pra false

!!0; // => false
!!NaN; // => false
!!""; // => false
!!false; // => false
!!undefined; // => false
!!null; // => false

// Conversões pra true ( todo o resto)

!!-10; // => true
!!"JavaScript"; // => true
!!{}; // => true
!![]; // => true
!!"/JavaScript/"; // => true
!!new Date(); // => true
!!function () {}; // => true

Operadores de comparação == , ===, !=, !==, <, >, <=, >=

1 == 2; // => false
10 === 10; // => true
"a" != "b"; // => true
3 !== 2; // => true
10 > 11; // => false
5 >= 5; // => true
"z" < "x"; // => false
"c" <= "c"; // => true

Coerção de tipos (type coercion) é o processo de conversão de um valor de um tipo, para outro (como a conversão de uma string para um número, um objeto para um booleano e etc). Qualquer tipo, seja primitivo ou um objeto, é um sujeito válido para coerção de tipo.

Para comparar o tipo de dados além da coerção se utiliza operador === ou !== nesse caso é comparado também o seu tipo alem do valor e/ou coerção.

// Coerção de tipo para um valor booleano

0 == ""; // => true
0 == "0"; // => true
false == undefined; // => false
false == null; // => false
null == undefined; // => true
1 == true; // => true
0 == false; // => true
0 == "\n"; // => true

Operadores lógicos || ( ou ) e && ( e )

0 || 2; // => 2
1 || 2; // => 1
1 && 2; // => 2
0 && 2; // => 0

String

O tipo String é primitivo, imutável e é representado internamente pelo padrão Unicode, codificado em UTF-16.

Declarado com aspas simples, aspas duplas e acento grave (crase).

// Declaração

"JavaScript";
"JavaScript";
`JavaScript`;

// Declaração com Função Construtora

new String("javaScript"); // => [String: 'javaScript']
new String("javaScript"); // => [String: 'javaScript']
new String("javaScript"); // => [String: 'javaScript']

Template literal é uma forma de declarar uma String que permite a interpolação de expressões.

//Exemplo

let host = "localhost";
let port = "3000";
let resource = "users";
let url = "https://" + host + ":" + port + "/" + resource;

// Com template literal

url = `https:// ${host}:${port}/${resource} `;

// Outra característica é poder escrever string com multi linha, sem necessidade de caracteres especiais ( + \ \n).

let monthsOfYear = ` 0 - Jan
1 - Feb
2 - Mar
3 - Apr
4 - May
5 - Jun
6 - Jul
7 - Aug
8 - Set
9 - Oct
10 - Nov
11 - Dec`;

String API

O tipo string possui uma API com diversos métodos que irão nos ajudar na sua manipulação.

Vamos conhecer:

length - Retorna o tamanho da String

"JavaScript".length; // => 10

indexOf - Retorna a primeira posição encontrada do caractere passado por parâmetro.

"PHP".indexOf("P"); // => 0

lastIndexOf - Retorna a ultima posição encontrada do caractere passado por parâmetro

"PHP".lastIndexOf("P"); // => 2

toUpperCase - Retorna uma nova string convertendo as letras em maiúsculas.

"cobol".toUppercase(); // => "CABOL"

toLowerCase - retorna uma nova string convertendo as letras em minúscula.

"ALGOL".toLowerCase(); // => 'algol'

charAt - Retorna o caractere na posição por parâmetro.

"JavaScript".charAt(1); // => 'a'

charCodeAt - Retorna o código com base na posição passado por parâmetro

"JavaScript".charCodeAt(1); // => 97

fromCharCode - Retorna um caractere com base no código passado por parâmentro.

String.fromCharCode(97); // => 'a'

includes - Retorna verdadeiro se a String contém a String passada por parâmetro.

"JavaScript".includes("Java"); // => true

startsWith - Retorna verdadeiro se a String inicia com a String passada por parâmetro.

"JavaScript ES6".startsWith("JavaScript"); // => true

endsWith - Retorna verdadeiro se a String termina com a String passada por parâmetro

"JavaScript ES6".endsWith("ES6"); // => true

localeCompare - Retorna -1 se a String passada por parâmetro for maior, 0 se for igual e 1 se for menor ( Levando em consideração o charCode das string, ou seja, caracteres com assentos tem pesos diferentes ).

"javascript".localeCompare("javascript1"); // => -1
"javascript".localeCompare("javascript"); // => 0
"javascript".localeCompare("java"); // => 1

Match - Retorna partes da String (em um array) com base na RegExp passada por parâmetro.

"C++".match(/\+/g); // => [ '+', '+' ]

Search - Retorna o index da primeira posição encontrada com base na RegExp passada por parâmetro.

"Java".search(/a/); // => 1 (index)

Replace - Retorna uma nova string com a substituição de parte ou total baseado no RegExp/string passado no primeiro parâmetro pelo valor informado no segundo parâmetro.

"JavaScript".replace("Java", "ECMA"); // => "ECMAScript"

slice - Retorna um parte da string que esta invocando a função, iniciando na posição passada no primeiro parâmetro ate a posição final passado no segundo parâmetro, caso não tenha segundo irá até o final da string.

"javaScript".slice(3, 8); // => 'aScri' ( não inclui a posição final)

"JavaScript".slice(4); // => 'Script'

split - Retorna um array contendo o resultado da divisão da String original de acordo com critério passado no parâmetro.

"C;C++;C#;Ruby".split(";"); // => [ 'C','C++', 'C#', 'Ruby' ]

substring - Similar ao slice, não aceita valores negativos como parâmetro e permite a inversão dos .

"JavaScript".substring(0, 4); // => "Java"

concat - Retorna uma nova string resultante da concatenação da que esta invocando a função e da outra passada por parâmetro;

"Jorge".concat(" Nascimento"); // => 'Jorge Nascimento'

padStart - Completa a string com caracteres no inicio

"10".padStart(4, 0); // => "0010"

padEnd - Completa a string com caracteres no fim.

"10".padEnd(4, 0); // => "1000"

repeat - repete um caractere em x vezes informando no parâmetro.

"C".concat("+".repeat(2)); // => "C++"

trim - Elimina espaços em branco no inicio e no fim

" Self ".trim(); // => 'Self'

trimLeft - Elimina espaços em branco no inicio.

" C#".trimLeft(); // => "C#"

trimRight - Elimina espaços no fim.

"Java ".trimRight(); // => "Java"

Null e Undefined

O valor undefined é utilizado quando uma variável não possui um valor. Já o null é utilizado quando se quer intencionalmente dizer que há uma ausência de qualquer valor para uma variável ou objeto, quando tentamos acessar uma chave de objeto que não existe ela retorna undefined.

const book = {
  title: "JavaScript",
  author: "Nascimento",
};

book.pages; // ==> undefined
book.publisher = null;

Não utilizar underfined ou null para apaga uma propriedade de objeto, você pode utilizar a palavra delete para remover propriedade de objetos.

Symbol

O tipo Symbol é primitivo, único e imutável, atuando como identificador único.

Symbol("a");
Symbol("b");
Symbol("c");

Symbol("d") === Symbol("d"); // => false

Por hoje é isso pessoal, conseguimos ter uma boa noção dos tipos primitivos e como manipula-los, nos próximo post iremos entrar nos principais tipos objetos e as API's fornecidas para sua manipulação.

Obrigado por ler.

** Exemplos são baseado no curso JavaScript - MasterClass do Rodrigo Branas.

Links de referências e saiba mais.
- Tipos Primitivos

Este post tem como objetivo ajudar quem esta começando no aprendizado das tecnologias web, além de servir como incentivo no meus estudos e a criar outros posts pra fixação do aprendizado.

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Me Sigam :)

Linkedin | Github

JavaScript Fundamentos - Variáveis e Tipos de Dados

Jorge Nascimento — Mon, 06 Feb 2023 15:31:17 +0000

JavaScript é uma das linguagens de programação mais popular do mundo, é utilizada tanto para desenvolvimento no front end, back end, mobile entre outras finalidades. É uma linguagem interpretada, multi paradigmas e com tipagem dinâmica.

É fundamental conhecer bem a base da linguagem antes de se aventurar a aprender uma lib/framework como react, vue e angular.

Nesse post inicial vamos falar sobre os tipos de variáveis e suas características no Javascript.

Variáveis

Utilizamos as palavras reservadas Var, Let e Const para criação de variáveis em JavaScript.

As regras de criação de variáveis seguem o padrão [a-zA-Z0-9_$]

As variáveis possuem os seguintes ciclo de vida:
- Declaração: Quando o nome é registrado no contexto de execução (Escopo).
- Inicialização: A variável é inicializada com valor undefined.
- Atribuição: Um valor é atribuído para a variável.

Características

Var - Na declaração com VAR quando o escopo é interpretado a variável é inicializada como undefined caso tente exibi la antes da mesma ser declarada, não respeitando o bloco e permitindo a redeclaração e reatribuição.

// pi inicializada com undefined
console.log(pi);

var pi = 3.141592;

// permite a redeclaração da variável
var pi = 3;

console.log(pi); // => 3

// Mesmo sendo declarada dentro de um escopo a variáveis é acessada fora (içamento)
if (true) {
  var pi = 2;
}

console.log(pi); // => 2

Let - Na declaração com LET o escopo é respeitado, pode ser reatribuida mas não redeclarada.

console.log(pi); // => ReferenceError: Cannot access 'pi' before initialization

let pi = 3.141592;

let pi = 3; // => SyntaxError: Identifier 'pi' has already been declared

pi = 3; // permite reatribuição

// Declarado dentro do escopo não pode acessada fora.
if (true) {
  let pi = 2;
}

console.log(pi); // => 3

Const - Na declaração com CONST o escopo é respeitado, não pode ser reatribuido nem redeclarado.

console.log(pi); // => ReferenceError: Cannot access 'pi' before initialization

const pi = 3.141592;

const pi = 3; // => SyntaxError: Identifier 'pi' has already been declared

pi = 3; // TypeError: Assignment to constant variable.

// Declarado dentro do escopo não pode acessada fora.
if (true) {
  const pi = 2;
}

console.log(pi); // => 3

Tipos de dados

Vamos entender os tipos de dados fornecidos pela JS.

Os tipo de dados se dividem em Primitivos e Objetos.

Os Tipos primitivos são: Number | Boolean | String | Null | Undefined e Symbol.

// O operador typeof retorna uma string indicando o tipo de um operando.

typeof 10; // => 'number'
typeof "JavaScript"; // => 'string'
typeof true; // => 'boolean'
typeof Symbol(); // => 'symbol'
typeof null; // => 'object'
typeof underfined; // => 'underfined'

Os Tipos Objetos são valores que representam uma referência em memória que pode ser alterada, exemplo: Function | Object | Arrays | Regex | Date...

typeof function sum(a, b) {
  return a + b;
}; // => 'function'
typeof { name: "Linus Torvald" }; // => 'object'
typeof [1, 2, 3, 4, 5]; // => 'object'
typeof /[a-zA-Z_$]/; // => 'object'
typeof new Date(); // => 'object'

Por hoje é isso pessoal, nos próximos postes iremos entrar de forma mais detalhadas nos tipos de dados e as API's fornecidas para sua manipulação.

Obrigado Por ler.

** Exemplos são baseado no curso JavaScript - MasterClass do Rodrigo Branas.

Links de referências e saiba mais.
- Sintaxe e tipos

Este post tem como objetivo ajudar quem esta começando no aprendizado das tecnologias web, além de servir como incentivo no meus estudos e a criar outros posts pra fixação do aprendizado.

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Me Sigam :)

Linkedin |
Github

Styled Components

Jorge Nascimento — Fri, 08 Jul 2022 16:08:42 +0000

Styled Components é um lib utilizada no ecossistema React que usa o conceito (CSS in JS ), ou seja, o CSS é gerado a partir de arquivos javascript, o styled retorna componentes React estilizados.

Algumas vantagens:

Styled-components gera nomes de classe exclusivos para seus estilos ( estilos escopados )
Melhor manutenabilidade pois estilo está vinculado a um componente específico.
CSS dinâmico baseado em props, aumentando flexibilidade de forma simples.
Sintaxe do CSS puro com vendor prefix inserido de forma automática.

Você obtém todos esses benefícios enquanto ainda escreve o CSS que conhece.

Instalação

Após iniciar um projeto com um template como o CRA, vamos instalar o styled components.

# com npm
npm install --save styled-components

# com yarn
yarn add styled-components

Styled utiliza tagged template literals que permite interpolação de código JS na criação dos estilos, o retorno da função styled.tag é a criação de um componente React estilizado.

Exemplo de criação de componente de nome Title que renderiza uma tag h1 com alguns estilos.

import styled from 'styled-components';

export const Title = styled.h1`
  font-size: 1.5rem;
`;

Para utiliza-lo apenas import em outro arquivo e use como o exemplo abaixo:

import Title from './styles'; // insira o caminho para o arquivo

const App = () => {
  return (
     <Container> 
      <Title> Algum título</Title>
     </Container>
  )
}

Estilização baseada em props

Podemos passar uma função interpolada para obter acesso a props e assim alterar a estilização de um componente, veja o exemplo abaixo:

const Button = styled.button`
  /* a cor é definida de acordo com a prop primary */

  background: ${props => props.primary ? "black" : "white"};
  color: ${props => props.primary ? "white" : "black"};

  padding: 0.25em 1em;
  border-radius: 3px;
`;

// So definir via props o tipo do botão e a estilização é definida
render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

Estendendo estilos

Podemos estender estilo de um componente, para isso precisamos passar o componente como parâmentro do construtor styled, conforme exemplo abaixo:

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

Usa todos os estilos de Button acrescendo apenas color e border-color diferentes.

Helpers keyframes e css

O styled disponibiliza a função keyframes para criação de animações, essa gera uma instância única que você pode usar em todo o seu aplicativo.

import { keyframes, css } from 'styled-components';

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

//  adicionado no componente estilizado
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;

// usado no seu componente
render(
  <Rotate>&lt; 💅🏾 &gt;</Rotate>
);

Para criar trechos de código de estilização isolado você pode usar o função css, vamos ao exemplo.

...
const rotationAnimation = css`
  animation: ${rotate} 2s linear infinite;
`

Definindo estilos globais

O GlobalStyle é uma função onde definimos o css que reseta e padroniza regras globais,essas regras afetam toda árvore de componentes pois definimos geralmente no App, como por exemplo reset de margin, padding etc. Essa função retorna um componente que inserimos no componente de mais alto nível.

Vamos ao exemplo:

import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
  }
  body {
    background: #312e38;
    color: #fff;
    -webkit-font-smoothing: antialiased;
  }
  body, input, button {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
  }
  h1, h2, h3, h4, h5, h6, strong {
    font-weight: 500;
  }
  button {
    cursor: pointer;
  }
`;

Adicionando no componente App ...

import React from 'react';
import GlobalStyle from './styles/global';

function App() {
  return (
    <>
      <GlobalStyle />
    </>
  );
}

export default App;

ThemeProvider e useTheme

O styled components disponibiliza um componente ThemeProvider que utiliza a context API para disponibilizar acesso ao tema para sua árvore de componentes.

O Provider possui um atributo theme onde é definido o tema que sera disponibilizado para os componentes children.

import { ThemeProvider } from 'styled-components';

// Componente App
const App = () => {
  const theme = {
    bg: '#333333'
    fg: '#f5f5f5'
  }

  <ThemeProvider theme={theme}>     
    <Button>Theme</Button> 
  </ThemeProvider>
}

...

// Button - estilizado com acesso a prop theme do provider
const Button = styled.button`
  color: ${props => props.theme.fg};
  border: 2px solid ${props => props.theme.fg};
  background: ${props => props.theme.bg};

  font-size: 1em;
  margin: 1em;
`;

Temos então acesso como visto antes, via props, nesse caso ao theme definido no ThemeProvider, com isso podemos criar arquivos diferentes para definir temas diferentes como dark e light e alternar o valor do atributo theme criando um toggleTheme para a aplicação, entre outras possibilidades.

O hook useTheme concede acesso ao contexto do ThemeProvider, ou seja, tudo que é disponibilizado no atributo theme também é disponibilizado para acesso via hook.

Veja aqui um exemplo de toggle theme com a criação de um novo contexto para isolar lógicas pertinentes ao tema da aplicação, incluindo usando o localStorage para armazena o tema escolhido.

Obrigado por ler!

Documentação Oficial - Styles Components

Repositório com exemplos

Veja também: Aprendendo React - The Roadmap!

Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Me Sigam :)

linkedin | github

React router DOM

Jorge Nascimento — Thu, 30 Jun 2022 16:12:40 +0000

React router DOM é uma biblioteca que lida com rotas em React/React-Native, em uma app SPA ( single Page Application ) sua principal característica é ao alternar entre views/página não exista o recarregamento da página, isso melhora o desempenho e experiência do usuário, essa lib lida então com as rotas, url, rotas aninhadas e disponibiliza também hooks para facilitar o acesso a algumas informações da rota e também com redirecionamento de forma programática.

Os exemplos serão feito utilizando a versão 6+.

Instalação

Após iniciar um projeto com um template como o CRA, vamos instalar o react router dom.

yarn add react-router-dom

Principais componentes

Vamos conhecer os principais componentes que usamos para criar as rotas:

BrowserRouter é a interface recomendada para executar o React Router em um navegador da web. A BrowserRouter armazena a localização atual na barra de endereços do navegador usando URLs limpas e navega usando a pilha de histórico integrada do navegador.

<Routes>e <Route> são as principais maneiras de renderizar algo no React Router. Você pode pensar em uma <Route>como uma espécie de if; se o path corresponder ao URL atual, ele renderizará seu element. A prop caseSensitive <Route caseSensitive> determina se a correspondência deve ser feita com distinção entre maiúsculas e minúsculas (o padrão é false).

Sempre que a localização muda, <Routes>examina todos os seus children elementos para encontrar a melhor correspondência e renderiza essa ramificação da interface do usuário.

<Route> os elementos podem ser aninhados para indicar a interface do usuário aninhada, que também corresponde a caminhos de URL aninhados. As rotas pai renderizam suas rotas filhas renderizando um arquivo .

Link é um elemento que permite ao usuário navegar para outra página clicando ou tocando nela. Em react-router-dom, a <Link>renderiza um elemento acessível <a> com um real href que aponta para o recurso ao qual está vinculando. Isso significa que coisas como clicar com o botão direito em um <Link> funciona como você esperaria.

<Outlet/> deve ser usado em elementos de rota pai para renderizar seus elementos de rota filho. Isso permite que a interface do usuário aninhada apareça quando as rotas filhas são renderizadas. Se a rota pai corresponder exatamente, ela renderizará uma rota de índice filho ou nada se não houver nenhuma rota de índice.

Criando o componente de rotas

Como exemplo básico vamos criar 3 páginas e definir as rotas, uma dessas página é a de não encontrado, quando uma url não existe na app,

Vamos criar um arquivos para definir as rotas

//  routes.js
import { Route, Routes } from "react-router-dom";

import Home from "./pages/Home";
import About from "./pages/About";
import NotFound from "./pages/NotFound";

export const RoutesApp = () => {
  return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
  );
};

Aqui temos um arquivo routes.js onde importando os componentes ja citados para criar a definição das rotas, temos também o importe dos arquivos de pages que são as view que serão renderizado de acordo com a rotas, '/ ' página Home, '/about ' página About e no caso de nenhuma path dê match com os definidos a página NotFound será exibido.

Adicionando um menu de navegação

Agora vamos criar um menu para alternar entre as páginas, o menu sera criado em um componente principal, que poderia ser o Appque ja vem criado no template, esse componente precisa ser de hierarquia superior do aplicativo.

//  RoutesExample.js
import { BrowserRouter, Link } from "react-router-dom";
import { RoutesApp } from "./routes";

export const RoutesExample = () => {
  return (
    <BrowserRouter>
      <header>
        <nav className="nav-routes">
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/asdf">Other</Link>
            </li>
          </ul>
        </nav>
      </header>
      <RoutesApp />
    </BrowserRouter>
  );
};

Aqui temos o componente de maior hierarquia da App, definimos então o BrowserRouter como wrapper, criamos um menu que possui os Link que define na props to o recurso que deve ser acessado, nesse caso as páginas Home, About e uma que não existe ( NotFound ).

resultado do exemplo: aqui

Rotas aninhadas ( nested routes )

Podemos criar rotas dentro de rotas, para isso precisamos criar filhos para uma determinada rota, onde esse componente possuir rotas internas, precisamos também fazer uso do <Outlet/> para indicar onde os elementos das sub-rotas irão ser renderizado no componente pai.

Vamos entender:

// routes.js
...
 <Route path="/about" element={<About />}>
  <Route path="route-a" element={<SubRouteA />} />
  <Route path="route-b" element={<SubRouteB />} />
</Route>

Dentro do arquivo routes criamos sub-rotas para a rota About, <SubRouteA /> e <SubRouteA /> são pages ou componentes ( também importando em routes ), nesse caso criei 2 páginas simples, apenas informando que aquele é a sub-rota correspondente, usei uma animação apenas para melhora a visualização da alteração das rotas.

No componente About criamos os Link com as rotas correspondente e logo abaixo inserimos o <Outlet/> que define onde essa sub-rota irá renderizar.

Dessa forma:

// About.js
...
<nav>
  <Link to="route-a">Sub-rota a</Link> |
  <Link to="route-b">Sub-rota a</Link>
</nav>
<Outlet />
</>

resultado do exemplo: aqui

Rotas privadas

Para criar rotas privadas criamos um componente que checa se um usuário esta logado, e caso esteja retorna o componente desejado do contrário o usuário pode ser redirecionado a página de login por exemplo.

// ProtectedRoute.js
import React from "react";

export const ProtectedRoute = ({ children }) => {
  // lógica para checar usuário logado
  const logged = true;

  return logged ? children : <p>Você não esta logado</p>;
};

No exemplo o componente <ProtectedRoute> retorna o children que é um componente definido como filho no arquivo de rotas, veja o exemplo abaixo:

...
<Route
  path="/dashboard"
  element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  }
/>

Adicionamos esse código no arquivo de rotas e temos então um rota que so sera acessado caso o ProtectedRoute retorne true em sua lógica para identificar se um usuário esta logado, geralmente validando algum token no localStorage.

Principais hooks do react-router-dom

A lib disponibiliza alguns hooks para lidar com redirect, parâmetro da URL, o history do navegador entre outros, vamos conhecer os principais.

useLocation retorna o objeto location atual. Isso pode ser útil se você quiser realizar algum efeito colateral sempre que a localização atual mudar.

useNavigate retorna uma função que permite navegar programaticamente, por exemplo, após o envio de um formulário.

useParams retorna um objeto de pares de chave/valor dos parâmetros dinâmicos da URL atual que foram correspondidos pelo <Route path>. As rotas filhas herdam todos os parâmetros de suas rotas pai.

Conhecemos então o essencial da lib que é a mais utilizada junto ao React com a finalidade de roteamento, com esses conhecimentos temos o básico necessário para lidar com rotas, sinta-se a vontade a explorar a documentação oficial para ter informações mais aprofundadas e conceitos avançados.

Obrigado por ler!

Documentação Oficial - Tutorial

Veja também: Aprendendo React - The Roadmap!

Repositório do código: react-router-dom

Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Me Sigam :)

linkedin | github

Virtual DOM | Algoritmo de reconciliação | Performance

Jorge Nascimento — Sat, 18 Jun 2022 15:20:40 +0000

O React se utiliza do conceito de virtual DOM junto com um algoritmo de reconciliação para realizar atualizações na interface. O React atualiza a UI de forma otimizada alterando apenas o que realmente foi modificado, mas como isso ocorre ? vamos lá.

Virtual DOM

O virtual DOM (VDOM) é um conceito de programação onde uma representação ideal, ou “virtual”, da interface do usuário é mantida em memória e sincronizada com o DOM “real” por uma biblioteca como o ReactDOM.

A virtual DOM possui todos os nós da DOM renderizado em tela e utilizar o algoritmo de diferenciação para realizar atualizações pontuais na interface, isso permite a API declarativa do React com manipulação de states e o ganho de performance na manipulação do DOM 'real'.

Algoritmo de reconciliação

O React provê uma API declarativa, ou seja, informamos o que muda e não como muda, isso é responsabilidade interna do React que se utiliza do algoritmo de diffing para realizar as atualização em tela.

Sempre que existir alterações em estados ou props o react atualiza/recria a virtual DOM e compara com a DOM 'real' para que as alterações sejam feita, isso se da a nível de atributos, mesmo que dois elementos sejam iguais e apenas algum de seus atributos tenha sido mudado o React sabe que apenas aquele atributo precisa ser alterado na DOM do navegador.

<div className="before" title="stuff" />

<div className="after" title="stuff" />

O react através do algoritmo de diferenciação consegue identificar exatamente o que foi alterado e realiza as atualizações apenas na classe.

Quando o react realiza comparação em elementos filhos como de uma lista é importante utilizar o atributo key com identificação única, isso ajuda o react a identificar mudanças e melhora o desempenho, evitando também problemas de renderizações caso esses elementos são reordenados.

Fluxo de renderização

De forma forma básica o fluxo de re-renderizações em React ficaria desta forma:

O React possui o DOM Virtual ( cópia do DOM em tela ) em memória.
Quando um componente é atualizado, um novo DOM Virtual é criado.
Então é feita uma comparação pelo Algoritmo de Diferenciação. Essa comparação é realizada em memória, dessa forma o componente ainda não foi atualizado na DOM.
Após a comparação, o React cria um novo DOM Virtual com as alterações necessárias.
Em seguida, ele atualiza o DOM do navegador com o menor número possível de alterações sem renderizar todo o DOM novamente. Isso melhora drasticamente a performance da aplicação.

Entender como funciona o fluxo de renderização e o algoritmo de diffing ajuda em debug e melhoria de performance em aplicações React.

Melhorando a performance com memo, useMemo e useCallback

Como vimos entender sobre o fluxo de renderização no react pode nos ajudar a melhorar a performance de uma aplicação em determinados casos, o que significa que podemos impedir que componentes não entre no fluxo de criação de uma nova virtual DOM para realizar o diff caso um condição não seja satisfeita.

As funções memo, useMemo e useCallback existem com essa finalidade, cada uma com suas particularidade e caso de uso, vamos entender com exemplos como isso funciona.

Exemplo - Componente ListItems

import React, { memo, useCallback, useMemo, useState } from "react";

let count = 0;

export const ListItems = () => {
  const [items, setItems] = useState([]);
  const [itemValue, setItemValue] = useState("");

  console.log("RE-RENDER - LIST ITEMS");

  function handleAddItem(e) {
    e.preventDefault();
    setItems([...items, { id: count++, text: itemValue }]);
  }

  const handleRemoveItem = useCallback(
    (id) => setItems((state) => state.filter((item) => item.id !== id)),
    [setItems]);

    const slowCalc = useMemo(() => {
    console.log("useMemo");
    return items.filter((item) => item.text.includes("a")).length;
  }, [items]);

  return (
    <>
      <form onSubmit={handleAddItem}>
        <input
          onChange={(e) => setItemValue(e.target.value)}
          value={itemValue}
        />
        <button type="submit">Add Item</button>
      </form>
      <ul>
        {items.length > 0 &&
          items.map((item) => (
            <Item
              key={item.id}
              item={item}
              handleRemoveItem={handleRemoveItem}
            />
          ))}
      </ul>
      <p style={{ textAlign: "center" }}>
        Quantidade item que possui a letra ( a ): {slowCalc}
      </p>
    </>
  );
};

No nosso exemplo temos um componente ListItems que ira renderizar um formulário para adicionar itens a uma lista, temos funções para adicionar e remoção item da lista, no JSX temos o formulário com input e botão que adiciona o item e a chamada do componente Items que sera renderizado assim que adicionamos os items no state items, temos o useCallback usando na função de remoção do item e para exemplificar o useMemo criamos uma variável que simula alguma operação que demandaria muito recursos de processamento, no nosso caso é apenas a contagem de items com possui a letra a.

Exemplo - Componente Item

const Item = memo(({ item, handleRemoveItem }) => {
  console.log("RE-RENDER -  ITEMS");

  return (
    <li key={item.id}>
      {item.text} <button onClick={() => handleRemoveItem(item.id)}>x</button>
    </li>
  );
});

O Componente Items recebe 2 props, o item que é um objeto com id e text e uma função que será utilizada para remover o item, essa recebe o id como argumento, o componente então retorna uma <li> com o texto inserido no input do formulário e um <button> que recebe a função handleRemoveItem passando o id respectivo do item.

Agora que entendemos o nosso exemplo vamos entender para que server e quando usar o memo, useMemo e useCallback.

memo

O memo é um função que retorna o componente memorizado, isso significa que, caso nenhuma de suas props ou state seja alterados esse componente não entra no fluxo de renderização do React, no exemplo, temos as props item e a função handleRemoveItem no componente Item, então quando alteramos o value do input o Items não é alterado porém o componente ListItems é re-renderizado e isso altera a referência da função handleRemoveItem o que faz o Item entra no mesmo fluxo, para resolver isso utilizamos o useCallback.

useCallback

O useCallback é um hook do React que retorna uma função memorizada, para isso ele recebe a função e um array de dependências como parâmentros, o array define as dependências que fará essa função ser redeclarada ( alterando sua referência ), no nosso exemplo a função handleRemoveItem so é redeclarada quando o state items for atualizado, isso significa que, quando o state referente ao input é alterado essa função não muda sua referência e assim tanto o item quanto handleRemoveItem se mantém sem alterações, dessa forma, o componente Item não é re-renderizado o que em determinados casos influência na performance da aplicação.

useMemo

O useMemo semelhante ao useCallback recebe os mesmo parâmentros ( uma função e seu array de dependências), a diferença é que o useMemo retorna a execução da função memorizada e não a função em si, e essa operação so é refeita quando alguma de sua dependências sejam alterados, em operações que demandaria grandes recursos computacional o useMemo pode fazer a diferença.

Fiz um post falando sobre esses hooks disponível em React Hooks.

Nesse video você pode perceber quando cada componente e re-renderizado, useMemo e o componente Item apenas é chamado quando existe alterações no array de dependências.

Quando usar desses recursos para melhorar a performance?

É muito importante entender que não devemos usar esses hooks em todos componentes e em qualquer função, pois existe uma comparação que é realizada para seus funcionamento que nem sempre é mais performática que o fluxo normal de renderização.

Quando usar o memo ?

Componentes Puro - são componentes que com as mesmas entradas sempre retorna a mesma saida.
Re-renders excessivos - componentes que são re-renderizados muitas vezes sem necessidade ( sem alterações em suas props ).
Componentes médios/grandes - componentes muitos pequenos não afeta a performance da aplicação, em casos de componentes médios para grandes que renderização muita coisa em tela podemos considerar o uso do memo.

Quando usar o useMemo ?

Cálculos complexos - use para evitar re-cálculos complexos a cada re-render, em casos de cálculos simples não faz sentido seu uso.

Quando usar o useCallback ?

Resolver igualdade referencial - Evitar a função ser recriada a cada re-render, evitando assim componentes childs que use um memo para não renderizar novamente ( useMemo também resolve esse problema ).

A partir de agora temos um bom conhecimento de como funciona o fluxo de renderização React e como usar hooks para melhorar o desempenho da sua aplicação.

Obrigador por ler!

Referencias : Reconciliação | Fluxo de renderização e o algoritmo de reconciliação — React e React Native | Virtual DOM | Video - React - Guia definitivo de performance (useMemo, useCallback, memo) - Code/drops #82

Códigos de exemplo: Repositório - Ecossistema React

Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts para fixação do aprendizado.

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Me Sigam :)

Github | Linkedin

React - Manipulando dados com Axios

Jorge Nascimento — Sat, 11 Jun 2022 16:23:00 +0000

Aprender a realizar chamadas a API's é algo crucial, pois a maioria das aplicações irão se comunicar com um backend para mostrar informações, realizar autenticações, validações, etc. Uma das formas mais usadas pra isso é o Axios.

O que é Axios?

Axios é uma biblioteca cliente HTTP baseado promises para nodejs e browser, se utilizando de API como XMLHttpRequest do browser e http do nodejs.

Entre suas vantagens estão:

Facilidade na manipulação de JSON ( menos código ).
Funções que correspondem aos métodos HTTP ( get, post, delete...).
Pode ser usando tanto no cliente como no servidor.

Instalação

Se você tem um projeto React existente, você só precisa instalar o Axios com npm (ou qualquer outro gerenciador de pacotes):



npm install axios

Vamos realizar os exemplos de uso do axios junto com a JSON Placeholder API para obter e alterar dados de postagem.

Realizando solicitações GET

Para realizar uma solicitação de recursos ao servidor utilizamos o método HTTP GET, aqui temos um exemplos simples.



import React, { useEffect, useState } from "react";

import axios from "axios";

const baseUrl = "https://jsonplaceholder.typicode.com/posts";

export function Post() {
  const [post, setPost] = useState(null);

  useEffect(() => {
    axios.get(`${baseUrl}/1`).then(({ data }) => setPost(data));
  }, []);

  if (!post) return null;

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </div>
  );
};

Utilizamos os hooks useState para armazenar o retorno da API e o useEffect usamos para realizar a chamada assim que o UI for montada, utilizamos então o método GET da importação do Axios no inicio do arquivo para realizar a chamada a API e retornar um post que é armazenado na variável post através do setPost no método then que possui acesso a resposta da API.

O response retorna um objeto que possui a propriedade data que nesse caso é um objeto com id, title, body e userId, utilizamos então o title e body do post para montar o post em tela.

Realizando solicitações POST

Para realizar criação de recursos no servidor utilizamos o método POST, vamos criar um exemplo de criação de um novo post.

O endpoint para criar um novo post é /post informando o title e body na requisição.



...
function handleCreatePost() {
    axios
      .post(baseUrl, {
        title: "Titulo do Post",
        body: "Esse é um novo post e foi criado em um exemplo de uso do axios, não é incrível?",
      })
      .then(({ data }) => setPosts(data));
  }

  return (
    <div className="container">
      <h1>Postagens</h1>
      <hr />
      {posts ? (
        <>
          <h2 className="post-title">{posts.title}</h2>
          <p className="post-body">{posts.body}</p>

          <div className="container-crud-btns">
            <button onClick={handleCreatePost} className="post-btn">
              Create post
            </button>

            <button onClick={handleUpdatePost} className="post-btn">
              Update post
            </button>
          </div>
        </>
      ) : (
        <h2 className="post-title">Nenhum Post Disponível</h2>
      )}
    </div>
  );

O axios como dito anteriormente possui funções com o nome dos métodos http, nesse caso utilizamos a função post(), para realizar a criação de um novo post, adicionamos um botão e no evento onClick é chamada a função handleCreatePost que faz a requisição de criação do post.

Na função post() do axios passamos o endpoint /posts e como segundo argumento é passado um objeto que contém o title e o body do post, o retorno da API ( .then()) é o post criado que armazenamos no estado posts

Apenas para finalidade estética adicionei um h1 e hr para melhor a apresentação em tela.

Realizando solicitações PUT

Para realizar um atualização de recursos no servidor utilizamos o método PUT, vamos criar um exemplo de criação de um novo post.



...
  function handleUpdatePost() {
    axios
      .post(baseUrl, {
        title: "Novo Titulo do Post",
        body: "Esse é um novo post e foi atualizado em um exemplo de uso do axios, não é incrível?",
      })
      .then(({ data }) => setPosts(data));
  }

  return (
    <div className="container">
      <h1>Postagens</h1>
      <hr />
      {posts ? (
        <>
          <h2 className="post-title">{posts.title}</h2>
          <p className="post-body">{posts.body}</p>

          <div className="container-crud-btns">
            <button onClick={handleCreatePost} className="post-btn">
              Create post
            </button>

            <button onClick={handleUpdatePost} className="post-btn">
              Update post
            </button>
          </div>
        </>
      ) : (
        <h2 className="post-title">Nenhum Post Disponível</h2>
      )}
    </div>
  );

Muito parecido com o exemplo do método Post, adicionamos um novo botão e criamos a função handleUpdatePost que realiza a atualização, a função put() da mesma forma que a post() recebe o endpoint ( que nesse caso precisa do id do post a ser atualizado) e retorna no then o post atualizado que mais uma vez adicionamos no estado posts.

Realizando solicitações DELETE

Para realizar uma exclusão de recursos no servidor utilizamos o método DELETE, vamos criar um exemplo de remoção do post.



...
function handleDeletePost() {
    axios.delete(`${baseUrl}/1`).then(() => {
      alert("Post deleted!");
      setPosts(null);
    });
  }

  return (
    <div className="container">
      <h1>Postagens</h1>
      <hr />
      {posts ? (
        <>
          <h2 className="post-title">{posts.title}</h2>
          <p className="post-body">{posts.body}</p>

          <div className="container-crud-btns">
            <button onClick={handleCreatePost} className="post-btn">
              Create post
            </button>

            <button onClick={handleUpdatePost} className="post-btn">
              Update post
            </button>

            <button onClick={handleDeletePost} className="post-btn">
              Delete post
            </button>
          </div>
        </>
      ) : (
        <h2 className="post-title">Nenhum Post Disponível</h2>
      )}
    </div>
  );
}

No caso do delete criamos também um novo botão e uma função handleDeletePost que realiza a remoção do post com id especificado, no retorno then não existe dados porém é importante para garantir que a solicitação foi realizada com sucesso.

Para atualizar a interface setamos o estado posts com null que com a tratativa do código será retornado um mensagem de 'Nenhum Post Disponível'.

Lidando com erros no Axios

Se ocorrer um erro na solicitação seja por envio de dados errado, falha de rede, endpoint errado, esse é tratado na função catch(), esse tem acesso ao erro de retorno e esse pode ser atribuído a um estado para ser tratado na UI.



...
 axios
  .put(`${baseUrl}/1`, {
    title: "Novo Titulo do Post",
    body: "Esse é um novo post e foi atualizado em um exemplo de uso do axios, não é incrível?",
  })
  .then(({ data }) => setPosts(data))
  .catch((error) => setError("error" + error));

Criando uma instância do Axios

Com axios podemos criar uma instância com a baseURL da API com a função create(), além de outros valores que você pode especificar a cada solicitação como headers.



const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

// uso
client.get("/post").then()

Quando chamamos a client é retornada uma instância com a baseURL definida, nesse caso no parâmetro passamos apenas a rota desejada, exemplo / | /post, etc.

Usando async - await com Axios

Async-await permite que você escreva um código muito mais limpo sem as funções then e catch para retorno. Além disso, o código com async-await se parece muito com o código síncrono e é mais fácil de entender.

Exemplo da função do useEffect usando async - await



...
useEffect(() => {
    async function getPosts() {
      try {
        const response = await axios.get(`${baseUrl}/1`);

        setPosts(response.data);
      } catch (error) {
        setError(error);
      }
    }

    getPosts();
  }, []);

Para que seja possível usar async await é necessário criar uma função nomeada getPosts() nesse caso e chamando-a logo na sequência, pode ser uma IIFE, utilizamos o try catch dentro a função para capturar possíveis erros.

#### Fluxo async await:

Declaração da função com a palavra async ( possibilita o uso so await dentro dela ).
O await aguarda o retorno de um promise ( axios retorna sempre um promise das requisições ).
Apenas após o retorno do await a próxima linha será executada.
O try e catch nesse caso é usado para tratar erros na requisição.

O Async Await deixa o código limpo e pode ser usado com axios com facilidade.

Criando o Custom Hook useAxios

Custom hooks são utilizado para retirar lógicas que podem ser reutilizados em componentes diferentes, aqui o intuito é apenas mostrar que podemos deixar o componente Post mais limpo e deixar toda lógica de requisição no hook useAxios, nele lidamos também com outro estados, o loading que serve para lidar com um elemento de carregamento na tela.

Exemplo de código para useAxios



import { useEffect, useState } from "react";

import axios from "axios";

const api = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts",
});

export const useAxios = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function getPosts() {
      try {
        setLoading(true);
        setError(null);

        const response = await api.get(`/1`);

        setData(response.data);
      } catch (error) {
        setError(error);
        setData(null);
      } finally {
        setLoading(false);
      }
    }
    getPosts();
  }, []);

  function handleCreatePost() {
    setLoading(true);
    setError(null);

    api.post("/", {
        title: "Titulo do Post",
        body: "Esse é um novo post e foi criado em um exemplo de uso do axios, não é incrível?",
      })
      .then(({ data }) => {
        setData(data);
      })
      .catch((error) => setError("error" + error));
    setLoading(false);
  }

  function handleUpdatePost() {
    setLoading(true);
    setError(null);

    api.put(`/1`, {
        title: "Novo Titulo do Post",
        body: "Esse é um novo post e foi atualizado em um exemplo de uso do axios, não é incrível?",
      })
      .then(({ data }) => {
        setData(data);
      })
      .catch((error) => setError("error" + error));
    setLoading(false);
  }

  function handleDeletePost() {
    setLoading(true);
    setError(null);

    api.delete(`/1`)
      .then(() => {
        alert("Post deleted!");
        setData(null);
      })
      .catch((error) => setError("error" + error));
    setLoading(false);
  }

  function handleError() {
    setLoading(true);
    setError(null);

    api.get(`/asdf`)
      .then(({ data }) => setData(data))
      .catch((err) => {
        setData(null);
        setError("error" + err);
      });
    setLoading(false);
  }

  return {
    data,
    error,
    loading,
    handleCreatePost,
    handleUpdatePost,
    handleDeletePost,
    handleError,
  };
};

Esse hook é mais especifico para nosso exemplo de post mais poderia ser o mais genérico possível recebendo a url como parâmetro, com lógicas mais robusta, mas para o exemplo esse serve.

Então além dos dados retornados pelos states podemos também retorna funções que lida com o CRUD, isso deixa nosso componente Post muito mais limpo e melhora a manutenção.

Código completo do nosso exemplo



//  Componente Post - Sem utilizar o useAxios
import React, { useEffect, useState } from "react";

import axios from "axios";

import "./Post.css";
const baseUrl = "https://jsonplaceholder.typicode.com/posts";

export function Post() {
  const [posts, setPosts] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function getPosts() {
      try {
        const response = await axios.get(`${baseUrl}/1`);

        setPosts(response.data);
      } catch (error) {
        setError(error);
      }
    }

    getPosts();
  }, []);

  function handleCreatePost() {
    axios
      .post(baseUrl, {
        title: "Titulo do Post",
        body: "Esse é um novo post e foi criado em um exemplo de uso do axios, não é incrível?",
      })
      .then(({ data }) => setPosts(data))
      .catch((error) => setError("error" + error));
  }

  function handleUpdatePost() {
    axios
      .put(`${baseUrl}/1`, {
        title: "Novo Titulo do Post",
        body: "Esse é um novo post e foi atualizado em um exemplo de uso do axios, não é incrível?",
      })
      .then(({ data }) => setPosts(data))
      .catch((error) => setError("error" + error));
  }

  function handleDeletePost() {
    axios
      .delete(`${baseUrl}/1`)
      .then(() => {
        alert("Post deleted!");
        setPosts(null);
      })
      .catch((error) => setError("error" + error));
  }

  function handleError() {
    axios
      .get(`${baseUrl}/asdf`)
      .then(({ data }) => setPosts(data))
      .catch((err) => {
        setPosts(null);
        setError("error" + err);
      });
  }

  return (
    <div className="container">
      <h1>Postagens</h1>
      <hr />
      {posts ? (
        <>
          <h2 className="post-title">{posts.title}</h2>
          <p className="post-body">{posts.body}</p>

          <div className="container-crud-btns">
            <button onClick={handleCreatePost} className="post-btn">
              Create post
            </button>

            <button onClick={handleUpdatePost} className="post-btn">
              Update post
            </button>

            <button onClick={handleDeletePost} className="post-btn">
              Delete post
            </button>

            <button onClick={handleError} className="post-btn">
              Error post
            </button>
          </div>
        </>
      ) : (
        <h2 className="post-title">Nenhum Post Disponível</h2>
      )}
      {error && <p>Ocorreu na requisição: {error}</p>}
    </div>
  );
}

Com o hook useAxios.




// Componente Post - Utilizando o useAxios
import React from "react";

import "./Post.css";
import { useAxios } from "./useAxios";

export function PostUseAxios() {
  const {
    data,
    error,
    loading,
    handleCreatePost,
    handleUpdatePost,
    handleDeletePost,
    handleError,
  } = useAxios();

  if (loading)
    return (
      <div className="container">
        <h1>Postagens</h1>

        <p>Carregando...</p>
      </div>
    );

  return (
    <div className="container">
      <h1>Postagens</h1>
      <hr />
      {data ? (
        <>
          <h2 className="post-title">{data.title}</h2>
          <p className="post-body">{data.body}</p>

          <div className="container-crud-btns">
            <button onClick={handleCreatePost} className="post-btn">
              Create post
            </button>

            <button onClick={handleUpdatePost} className="post-btn">
              Update post
            </button>

            <button onClick={handleDeletePost} className="post-btn">
              Delete post
            </button>

            <button onClick={handleError} className="post-btn">
              Error post
            </button>
          </div>
        </>
      ) : (
        <h2 className="post-title">Nenhum Post Disponível</h2>
      )}
      {error && <p>Ocorreu na requisição: {error}</p>}
    </div>
  );
}

Basicamente para utilizar o useAxios apenas o importamos no arquivo e utilizamos chamando a função useAxios desestruturando seu retorno que é um objeto contendo os dados e funções sobre o post.

E esse é o resultado em tela

O CSS foi omitido pois não era o foco do post você pode acessar o link do repositório ao final do artigo.

Uffa !! o artigo ficou um pouco grande porém é o essencial sobre manipulação/requisições que precisamos ter para trabalhar com axios.

Baseado no post : How To Use Axios With React: The Definitive Guide (2021)

Códigos de exemplo: Repositório - Ecossistema React

Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Me Sigam :)

Github | Linkedin

React - Estilização

Jorge Nascimento — Thu, 02 Jun 2022 14:48:07 +0000

Estilização em react pode ser feita de algumas formas, cada uma possui suas vantagens e desvantagens, no artigo vamos abordar as formas básicas sem uso de bibliotecas.

O código do exemplo é obter o resultado abaixo:

CSS Puro

É possível estilizar com arquivos .css de forma global ou em componentes com estilizações específicas, isso pode melhorar a manutenção porém podemos ter problemas de especificidade do css em aplicações maiores.

Exemplo simples do uso de CSS Puro

/* styles.css */
.container {
  max-width: 800px;
  width: 100vw;
  height: 100vh;

  margin: 0 auto;
  font-family: 'Roboto', sans-serif;

  background-color: #2F3D40;
  color: #f5f5f5;

  padding: 16px;
}

.article-title {
  text-align: left;

  font-size: 1.2rem;
}

.paragraph {
  background-color: #3D5A73;
  padding: 12px;

  line-height: 1.5;
  border-radius: 6px;

  word-wrap: wrap;
}

Criamos um arquivo styles.css separado do componente, que pode estar em um pasta específica para estilos ou junto no mesmo diretório do arquivo do componente.

Para que esses estilos sejam definido no componente precisamos primeiro realizar a importação e adicionar no atributo className do JSX as classes criadas com as regras css.

Exemplo de uso no componente

import React from "react";

import "./styles.css";

export const StylesExample = () => {
  return (
    <div className="container">
      <h2 className="article-title">Article title</h2>
      <p className="paragraph">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit odio
        voluptates omnis, molestiae ad doloremque dicta eveniet natus numquam
        impedit id, nam deleniti sint asperiores iure quam nobis eos a. Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Sit odio voluptates
        omnis, molestiae ad doloremque dicta eveniet natus numquam impedit id,
        nam deleniti sint asperiores iure quam nobis eos a. Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Sit odio voluptates omnis,
      </p>
    </div>
  );
};

CSS Modules

Outra forma de realizar estilização em React é via css modules, para utilizarmos criamos um arquivo com extensão .module.css e esse quando importando retorna um objeto com as classes definidas no módulo, utilizamos de forma parecida com css puro, porém por se tratar de um objeto adicionamos com {} no atributo className.

Essas classes são transformadas em classes únicas no build, o que torna o css com escopo local, isso resolve problemas relacionados a conflitos na estilização.

Exemplo com a utilização de CSS Modules

...
import styles from "./styles.module.css";

export const StylesExample = () => {
  return (
    <div className={styles.container}>
      <h2 className={styles.article_title}>Article title</h2>
      <p className={styles.paragraph}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit odio
        voluptates omnis, molestiae ad doloremque dicta eveniet natus numquam
        impedit id, nam deleniti sint asperiores iure quam nobis eos a. Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Sit odio voluptates
        omnis, molestiae ad doloremque dicta eveniet natus numquam impedit id,
        nam deleniti sint asperiores iure quam nobis eos a. Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Sit odio voluptates omnis,
      </p>
    </div>
  );
};

O arquivo de css é igual ao anterior com a exceção de não ser possível utilizar hífen na criação das classes css pois essas serão transformadas em propriedades de objeto, nesse caso podemos utilizar _ ou camelCase.

CSS Inline

Podemos utilizar o atributo style dos elementos para utilizar css inline, para isso passamos um objeto com as regras css utilizando camelCase.

...
export const StylesExample = () => {
  return (
    <div
      style={{
        maxWidth: "800px",
        width: "100vw",
        height: "100vh",

        margin: "0 auto",
        fontFamily: "'Roboto', sans-serif",

        backgroundColor: "#2F3D40",
        color: "#f5f5f5",

        padding: "16px",
      }}
    >
      <h2
        style={{
          textAlign: "left",
          fontSize: "1.2rem",
        }}
      >
        Article title
      </h2>
      <p
        style={{
          backgroundColor: " #29383b",
          padding: "12px",

          lineHeight: 1.5,
          borderRadius: "6px",

          wordWrap: "wrap",
        }}
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit odio
        voluptates omnis, molestiae ad doloremque dicta eveniet natus numquam
        impedit id, nam deleniti sint asperiores iure quam nobis eos a. Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Sit odio voluptates
        omnis, molestiae ad doloremque dicta eveniet natus numquam impedit id,
        nam deleniti sint asperiores iure quam nobis eos a. Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Sit odio voluptates omnis,
      </p>
    </div>
  );
};

É possível criar um objeto fora do componente e inserir no style semelhante ao css modules, porém essa é a forma menos usada e aqui esta apenas como mais uma forma de uso.

Geralmente em React usamos outras formas de estilização quando estamos falando de grandes aplicações e os mais comum são o conceito de CSS in JS como styled components e bibliotecas de estilização como tailwindCSS entre outras.

Veja também : O que são módulos CSS e por que precisamos deles? | Estilização em React | As 5 melhores libs de UI para React | by Maycon Alves - Medium

Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Me Sigam :)

Github | Linkedin

React - Formulários

Jorge Nascimento — Mon, 30 May 2022 13:54:32 +0000

Em React formulários podem e normalmente são controlados com states, isso concede um poder maior sobe manipulação de eventos (onChange, onSubmit) e controle sobre seus valores, pois o react se torna a única 'fonte de verdade', form que são manipulados com estados em react são chamados de ( controlled component ).

Vamos ao exemplos de formulários controlados

Input

import React, { useState } from "react";

export const Form = () => {
  const [name, setName] = useState("");

  function onSubmit(event) {
    event.preventDefault();

    console.log(name)
  }

  return (
    <form onSubmit={onSubmit}>
      <label>
        Name:
        <input
          type="text"
          onChange={(event) => setName(event.target.value)}
          value={name}
        />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
};

1 - Criamos um estado para armazenar e atualizar o name.
2 - Controlamos o input setando seu value com o estado name.
3 - No onChange atualizamos o value através da função setName.
4 - No onSubmit temos acesso ao estado name para manipulação.

Então entendemos que dessa forma temos maior controle sobe o estados dos componentes de formulários, e sua manipulação posteriormente podemos ter validações e tratamento desses valores.

Na sequência vamos ver os principais elementos de formulário e como manipulamos com o react.

Select

Em React, em vez de usar o atributo selected para definir o valor selecionado, usa-se um atributo value na raiz da tag select. Isso é mais conveniente em um componente controlado, porque você só precisa atualizá-lo em um só lugar.

  <select value={language} onChange={(e) => setLanguage(e.target.value)}>
    <option value="javascript">Javascript</option>
    <option value="c#">C#</option>
    <option value="python">Python</option>
  </select>

Você pode passar um array para o atributo value, permitindo que você selecione várias opções em uma tag select:

<select multiple={true} value={['B', 'C']}>

Checkbox

O elemento checkbox pode ter seu estado manipulando utilizando o atributo checked setando a ele uma condição que retorne um booleano baseado no estado que pode ser um booleano simples, ou uma condição mais complexa quando existir múltiplas escolhas.

<input
  type="checkbox"
  checked={checkedBoolean}
  onChange={() => setCheckedBoolean(!checkedBoolean)}
/>
checkbox

Radio

O elemento radio por ser de escolha única, podemos comparar o atributo checked com o estado atual.

<label>
  <input
    type="radio"
    name="gender"
    value="masculino"
    checked={gender === "masculino"}
    onChange={({ target }) => setGender(target.value)}
  />
  Masculino
</label>

<label>
  <input
    type="radio"
    name="gender"
    value="feminino"
    checked={gender === "feminino"}
    onChange={({ target }) => setGender(target.value)}
  />
  Feminino
</label>

File Input

Em HTML, o <input type="file"> permite ao usuário escolher um ou mais arquivos de seu dispositivo para serem enviados para um servidor.
Como seu valor é de somente leitura, ele é um componente não controlado do React.

Você pode criar um estado para armazenar o objeto File ou um array dependendo da necessidade, e utilizar esse estado em alguma lógica na interface e envio para o servidor.

Textarea

O Textarea no react possui um atributo value para que seja manipulado, o que o torna muito semelhante ao elemento input.

<textarea 
  value={description} 
  onChange={(e) => setDescription(e.target.value)} 
/>

Manipulando Múltiplos Inputs

Quando você precisa manipular múltiplos inputs controlados, você pode adicionar um atributo name a cada elemento e deixar a função manipuladora escolher o que fazer com base no valor de event.target.name.

Exemplo

function handleInputChange(event) {
  const { target } = event;
  const { type, name, value } = target;

  if (type === "checkbox") {
    const drinks = formData.drinks || [];

    if (target.checked) {
      const drinksUpdated = [...drinks, value];

      setFormData({ ...formData, [name]: drinksUpdated });
      return;
    }

    const drinksUpdated = drinks.filter((drink) => drink !== value);

    setFormData({ ...formData, [name]: drinksUpdated });
    return;
  }

  setFormData({
    ...formData,
    [name]: value,
  });
}

Existem várias formas de criar lógica para esse tipo de caso, tornando-o menos ou mais flexível, esse é apenas um exemplo simplificado.

Geralmente usamos lib's para manipulação e validação de formulário em React, tais como formik, react-hooks-form, Yup entre outras.

Bom por hoje é isso, temos então uma introdução a formulários em React para começar a construir nossas aplicações.

Obrigado por ler.

Documentação Oficial - Formulários

Veja também: Aprendendo React - The Roadmap!

Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Me Sigam :)

Github | Linkedin