WorkShop React - 01 - JS para React

JavaScript

básico para

React

github.com/JsBatista/workshopReact

Funcional

Orientada a Objetos

Interpretada ou Compilada?

Declaração de Variáveis

var nomeDaVariavel = valorDaVariavel;

let

const

let nome = valor;

const nome = valor;

console.log(COISAS)

for( let foo = 0; foo < 10; foo++){
    console.log(foo);
}
// Mostra os valores de 0 a 9

console.log(foo);
// Erro! 'foo is not defined'

for( var foo = 0; foo < 10; foo++){
    console.log(foo);
}
// Mostra os valores de 0 a 9

console.log(foo);
// Mostra 10

let

aula1-2.js

aula1-3.js

const cantTouchMe = "Cant Touch This!";

cantTouchMe = "Oh men";
//Erro! 'Assignment to constant variable'

console.log(cantTouchMe);
//Mostraria 'Cant Touch This!'

const

aula1-4.js

Não
Tipada

Não Possui
Tipos

Tipagem
Fraca

&
Dinâmica

let x = 8;
let y = 9;
let z = "10";

console.log(x+y);
//17

console.log(x+z);
//"810"

console.log(z+y);
//"109"

console.log(z*y);
//90

aula1-5.js

typeof( )

console.log(typeof(1));
// Number

console.log(typeof("1"));
// String

console.log( ()=>{} );
//Function

console.log(typeof({}));
// Object

console.log(typeof([1]));
// Object

aula1-6.js

Funções

function myFunc(meuNome) {
    console.log("Olá " + meuNome + "!");
}

myFunc("Batista");
//"Olá Batista!"

myFunc("Gabriel");
//"Olá Gabriel!"

Funções

aula1-7.js

const myFunc = function (meuNome) {
    return "Olá " + meuNome + "!"
}

console.log(myFunc("Pedro"));
//"Olá Pedro!"

let saudacao = myFunc("Suassuna");
console.log(saudacao);
//"Olá Suassuna!"

Funções

aula1-8.js

const minhaFunc = (nome) => {
    return("Ola " + nome + "!");
}

console.log(minhaFunc("Luan"));
//"Ola Luan!"

Arrow Functions

const nome = (par) => {}

aula1-9.js

const myFunc = (nome) => {
    return("Ola " + nome + "!");
}

Arrow Functions

const myFunc = (nome) => (
    "Ola " + nome + "!"
);

const myFunc = (nome) => "Ola " + nome + "!";

Funções Anônimas

function minhaFunc(){
    console.log("Oi, eu sou uma funcao!");
}

minhaFunc();
// "Oi, eu sou uma funcao!"

Funções Anônimas

let minhaFunc = function (){
    console.log("Oi, eu sou uma funcao!");
}

minhaFunc();
// "Oi, eu sou uma funcao!"

aula1-10.js

Funções Anônimas

let minhaFunc = () => {
    console.log("Oi, eu sou uma funcao!");
}

minhaFunc();
// "Oi, eu sou uma funcao!"

Arrays

const meuArr = [v1, v2, v3];

let meuArr = ["Primeiro", "Segundo", "Terceiro"];

console.log(meuArr[0]);
//"Primeiro"

console.log(meuArr.length);
// 3

meuArr.map( (current) => {console.log("Eu sou o " + current)} );

Arrays

aula1-11.js

Objetos

"Container"

Propriedades

Métodos

Idade

Peso

Nome

Sexo

Andar

Falar

Acenar

Deitar

{

}

Propriedades

Métodos

Objetos

const pessoa = {
    nome: "Pedro",

    falarOi: function(){
        return console.log("Oi! Meu nome e "+this.nome+"!");
    }
}

pessoa.falarOi();
//"Oi! Meu nome e Pedro!"

aula1-12.js

Classes

Classes

class Retangulo {
    constructor(altura, largura) {
      this.altura = altura;
      this.largura = largura;

      this.calcularArea= function() {
        return this.altura*this.largura;
      }
    }

  }
  
var meuRetang = new Retangulo(10, 20);

console.log(meuRetang.calcularArea());
//"200"

aula1-13.js

Spread Operator

...

Passagem por

Valor:

Referencia:

Tipos Primitivos

Objetos

let objeto1 = {
    x: 12
}

let objeto2 = {
    x: 12
}

console.log(objeto1==objeto2);
// False
console.log(objeto1===objeto2);
// False

aula1-14.js

let objeto1 = {
    x: 12
}

let objeto2 = objeto1;

console.log(objeto1==objeto2);
// True
console.log(objeto1===objeto2);
// True

aula1-15.js

let objeto1 = {
    x: 12
}

let objeto2 = objeto1;

objeto1.x = 10;

console.log(objeto1.x);
// 10
console.log(objeto2.x);
// 10

aula1-16.js

let objeto1 = {
    x: 12
}

let objeto2 = {
    x: 12
};

objeto1.x = 10;

console.log(objeto1.x);
// 10
console.log(objeto2.x);
// 12

aula1-17.js

let objeto1 = {
    x: 12
}

let objeto2 = {...objeto1};

objeto1.x = 10;

console.log(objeto1.x);
// 10
console.log(objeto2.x);
// 12

aula1-18.js

let objeto1 = {
    x: 12
}

let objeto2 = {y:20 ,...objeto1};

objeto1.x = 10;

console.log(objeto2.x);
// 12
console.log(objeto2.y);
// 20

aula1-19.js

let array1 = ["a", "b", "c"]

let array2 = [...array1 , "d", "e"];

console.log(array1);
// ["a", "b", "c"]

console.log(array2);
//["a", "b", "c", "d", "e"]

aula1-20.js

let valores = [2, 4, 6];

function soma3(x, y, z){
    console.log(x+y+z);
}

soma3(valores);
//2,4,6undefinedundefined

aula1-21.js

let valores = [2, 4, 6];

function soma3(x, y, z){
    console.log(x+y+z);
}

soma3(...valores);
//12

aula1-22.js

function multiplica(multiplicador, ...restante) {
    return restante.map(function (elemento) {
      return multiplicador * elemento;
    });
}
  
var lista = multiplica(2, 1, 2, 3); 
console.log(lista);
// [2, 4, 6]

aula1-23.js

Mutabilidade

Imutabilidade