JavaScript para React - Site dos livros do Maujor

[Pages:20]cap?tulo 1

JavaScript para React

1.1 Introdu??o

Algumas funcionalidades da linguagem JavaScript s?o usadas com frequ?ncia no desenvolvimento com React. Neste cap?tulo, faremos uma breve revis?o dessas funcionalidades, quer explicando suas finalidades e exemplificando seu uso com exerc?cios pr?ticos, quer apenas citando-as e deixando explica??o mais detalhada por ocasi?o de seu uso em scripts no livro ou quando julgado conveniente. Se voc? ? experiente com a linguagem, particularmente com a ES6, sinta-se ? vontade para pular este cap?tulo, contudo est? convidado a recapitular seus conceitos e ter certeza de que est? confort?vel com as funcionalidades listadas a seguir.

? JavaScript e ECMAScript ? Declara??o de vari?veis ? Operador tern?rio ? Arrow functions ? Operador spread ? M?todos map, filter e find ? Template Literals (Template String) ? Classes ? Destructuring assignment (Atribui??o para uma desestrutura??o) ? Exports e Imports ? Sintaxe JSX

17

18

React Aprenda Praticando

1.2 JavaScript e ECMAScript

JavaScript foi criada em 1995 por Brendan Eich, que ? ?poca trabalhava para a Netscape. Em 1996, a Netscape submeteu a linguagem ? ECMA (European Computer Manufacturers Association ? Associa??o dedicada ? padroniza??o de sistemas de informa??o), para ser padronizada para uso por fabricantes de navegadores. Em 1997 foi publicada a ECMA262 e, com base nela, a ECMAScript1, primeira vers?o ECMA da JavaScript.

Ano 1998 1999 2008 2009 2011 2015 2016 2017 2018

Vers?o da ECMA ECMAScript2 ECMAScript3 ECMAScript4 (abandonada) ECMAScript5 ECMAScript5.1 ECMAScript6 (ES6) ECMAScript7 (ES7) ECMAScript8 (ES8) ECMAScript9 (ES9)

? ?poca em que foi criada, o nome JavaScript era patente da Sun Microsytems (hoje Oracle). Quando da normatiza??o da linguagem, ela foi renomeada para ECMASript. Assim, os dois termos se referem exatamente ? mesma linguagem. O termo que nos acostumamos a usar ? JavaScript, mas o oficial ? ECMAScript. Nos dias atuais j? se usa com muito mais frequ?ncia a forma abreviada ESvers?o.

1.2.1 Transpilers JavaScript

Transpilers s?o compiladores do tipo c?digo-para-c?digo capazes de entender o c?digo escrito em uma linguagem e produzir o c?digo equivalente em outra.

Transpilers JavaScript traduzem c?digo n?o entendido, ou seja, n?o normatizado pela ECMA e, portanto, n?o suportado por dispositivos que entendem JavaScript. O mais conhecido e usado transpiler JavaScript ? o Babel ().

Os navegadores ainda n?o d?o total suporte ?s vers?es ES6 e posteriores, mas j? podemos us?-las gra?as ao uso de transpilers que as "traduzem" para a ES5, que ? a vers?o bem suportada atualmente. Al?m da ES6, sintaxes tais como as da CoffeeScript, TypeScript e JSX, s?o exemplos das que necessitam de transpilers para serem suportadas pelos dispositivos. Mais informa??es voc? encontra em uma tabela de suporte da ES6 e transpilers em .

Cap?tulo 1 JavaScript para React

19

1.3 Declara??o de vari?veis

Em JavaScript vari?veis s?o containers destinados a armazenar dados. Antes da ES6, a palavra-chave para se declarar uma vari?vel era var. A ECMAScript2015 (ES6) criou mais duas palavras-chaves para se declararem vari?veis: const e let. Essas duas vari?veis foram criadas para resolver problemas de altera??o de reatribui??o e de escopo, comuns quando se declara vari?veis com uso de var.

Atualmente as tr?s palavras-chaves s?o v?lidas na linguagem, contudo

recomenda-se usar const e let e evitar o uso de var para declarar vari?veis.

A palavra-chave const (abreviatura de constante) destina-se a declarar vari?veis que devem permanecer fixas no script. Uma vez declaradas, qualquer tentativa posterior de alter?-la ou reatribu?-la resulta em erro.

A palavra-chave let destina-se a declarar vari?veis que n?o precisam permanecer fixas, mas cujo escopo limita-se ao local onde foram declaradas.

Se voc? ainda n?o se sente confort?vel com o uso das duas novas formas criadas pela ES6 e que ser?o amplamente usadas no desenvolvimento com React, leia os tutoriais dispon?veis em e , que descrevem as novas sintaxes para declarar vari?veis.

1.4 Operador tern?rio

O operador tern?rio fornece uma sintaxe abreviada para a condicional if--else da linguagem JavaScript. Tal sintaxe abreviada ? mostrada a seguir.

let resultado = (condicao) ? (retorno se verdadeira) : (retorno se falsa);

O valor de retorno ? armazenado na vari?vel resultado. A condicao ? a cl?usula if (falsa ou verdadeira) do if--else. A parte da sintaxe que declara: ? (retorno se verdadeira) ? o valor da vari?vel resultado se a condi??o for verdadeira. A parte que declara: : (retorno se falsa) ? o valor da vari?vel resultado se a condi??o for falsa.

? facultativo o uso do par?ntese na condi??o e nos retornos mostrados na

sintaxe. Se necess?rio, use-o para aumentar a legibilidade do c?digo.

Observe uma cl?usula if-else e sua equivalente escrita com operador tern?rio.

if (preco < 40) { return "Livro barato!";

} else { return "Livro n?o ? barato!";

}

20

React Aprenda Praticando

Por outro lado, escrita com sintaxe de operador tern?rio ? mostrada a seguir.

let resultado = preco < 40 ? "Livro barato" : "Livro n?o ? barato!";

A cl?usula elseif tamb?m pode ser escrita com uso do operador tern?rio. Nesse caso, ela vai causar um aninhamento na sintaxe. Observe a seguir um exemplo de operador tern?rio aninhado escrito em multilinhas.

let preco = 50; preco < 40

? console.log("Livro barato") : preco < 70 ? console.log("Livro n?o ? barato e nem caro!") : console.log("Livro ? caro");

Esses scripts se encontram no CodeSandbox em e os resultados podem ser visualizados no console daquela interface.

A partir daqui suponho que voc? conhece e sabe manipular, pelo menos, as fun??es b?sicas do CodeSandbox.

1.5 Arrow functions

A ES6 criou uma sintaxe simplificada para escrever fun??es JavaScript. Al?m da sintaxe, e, muito mais importante que ela, foram modificados v?rios comportamentos pr?prios das fun??es, com a finalidade de corrigir comportamentos estranhos e n?o t?o f?ceis de entender que ocorrem quando s?o utilizadas fun??es previstas nas vers?es anteriores ? ES6. A ES6 criou uma nova maneira com sintaxe muito mais amig?vel e intuitiva de escrever e utilizar fun??es JavaScript. Seguem alguns exemplos comparando a sintaxe segundo a ES5 e anteriores e a nova sintaxe prevista na ES6 (arrow function).

Exemplo 1 ES5

function saudacao() { return "Ol? visitante"

}; console.log( saudacao() ); // Ol? visitante

ES6

let saudacao = () => "Ol? visitante"; console.log( saudacao() ); // Ol? visitante

Cap?tulo 1 JavaScript para React

21

Foi abolida a palavra function e, quando o retorno da fun??o se faz na mesma linha de c?digo da seta =>, n?o h? necessidade de uso da palavra return entre sinal de chaves, tal como mostrado a seguir.

ES6

let saudacao = () => ( "Ol? visitante" );

console.log( saudacao() ); // Ol? visitante

Quando o retorno da fun??o for na mesma linha de c?digo depois da seta =>, use par?nteses e n?o h? necessidade de uso da palavra return tal como mostrado.

A fun??o ? atribu?da a uma vari?vel que passa a fazer refer?ncia a ela (no exemplo mostrado, a vari?vel saudacao). A partir da seta ( =>), escreve-se o script a ser processado quando a fun??o for invocada e o resultado desse script ? o valor retornado pela fun??o. Antes da seta est?o os dados de entrada (ou par?metros) da fun??o e depois da seta, a sa?da da fun??o (ou seu valor de retorno). Os exemplos a seguir mostram e esclarecem detalhes da sintaxe.

Exemplo 2 ES5

function dobrar(x) { return 2 * x;

} console.log( dobrar(5) ); // 10

ES6

let dobrar = (x) => 2 * x; console.log( dobrar(5) ); // 10

Nas fun??es que admitem um ou nenhum par?metro, o sinal de par?nteses envolvendo o par?metro ? opcional, e geralmente n?o ? usado, mas voc? ? livre para fazer sua escolha. Assim a sintaxe alternativa (sem par?nteses) para a fun??o ? mostrada a seguir. ES5

let dobrar = x => 2 * x; console.log( dobrar(5) ); // 10

22

React Aprenda Praticando

ES6

let dobrar = (x) => { return 2 * x;

} console.log( dobrar(5) ); // 10

Neste livro, adotaremos a sintaxe com uso de par?nteses.

Exemplo 3

ES5

function avaliar(x, y, z) { if( x < 10) { return y + z; } else { return y * z; }

}; console.log(avaliar(18, 15, 5)) // 75 console.log(avaliar(2, 3, 11)) // 14

ES6

let avaliar = (x, y, z) => x < 10 ? y + z : y * z; console.log(avaliar(18, 15, 5)); // 75 console.log(avaliar(2, 3, 11)); // 14

Nesse exemplo, usou-se o operador tern?rio em lugar da cl?usula if-else, conforme estudado anteriormente.

Alternativamente voc? poder? escrever o operador tern?rio em linhas separadas. Nesse caso, a sintaxe multilinha para o operador ? conforme mostrada a seguir.

let avaliar1 = (x, y, z) => ( x < 10 // condi??o ? y + z // linha come?a com ? : y * z; // linha come?a com :

);

A seta tem de ficar na mesma linha dos par?metros, a condi??o em uma linha,

e as linhas seguintes come?ando com ? (interroga??o) e : (dois pontos). Pule linhas se pretende aumentar a legibilidade do c?digo. Observe que na sintaxe com o script escrito em linhas nesse exemplo o uso de par?nteses depois da seta ? obrigat?rio.

Cap?tulo 1 JavaScript para React

23

A sintaxe para autoinvocar a fun??o ? IIFE (Immediately Invoked Function Expression) ? consiste em simplesmente envolv?-la em par?nteses como mostrado no exemplo a seguir.

console.log( ( x => 2 * x )(40) ); // 80

Antes da ES6, o this da JavaScript era do escopo da fun??o, de dif?cil compreens?o, n?o raro mudava de escopo dentro da fun??o e fonte de bugs no c?digo. Arrow function alterou a maneira como this se vincula ao escopo, tornando-o mais intuitivo e de mais f?cil entendimento. As altera??es mais significativas s?o as relacionadas a seguir:

? N?o mais existe this no escopo de arrow functions. Quando se usa arrow function this se refere ao escopo imediatamente acima do escopo da fun??o. Caso o escopo da fun??o seja outra arrow function, ele n?o ? considerado para efeito de this e assim por diante at? o escopo global.

? Pelo fato de que this pertence ao escopo do seu container, os m?todos call(), apply() e bind() n?o funcionam em arrow functions.

Neste livro n?o vamos nos aprofundar no estudo do novo comportamento de this. Quando for julgado conveniente, faremos os devidos coment?rios.

Recomendo a leitura do excelente tutorial, com v?rios exemplos pr?ticos

mostrando o comportamento de this: .

Os scripts mostrados anteriormente e que ilustram arrow functions encontram-se no CodeSandbox em e os resultados podem ser visualizados no console daquela interface.

1.6 Operador spread

O operador spread da ES6 destina-se a expandir um array, um objeto ou uma string. O s?mbolo para esse operador ? constitu?do por tr?s pontos (...). Vejamos alguns exemplos e sua aplica??o pr?tica, considerando as seguintes constantes que armazenam arrays:

const livros1 = ["CSS3", "JavaScript", "PHP"]; const livros2 = ["HTML5", "React"]; const precos = [70, 30, 90, 100, 10];

Exemplo 1 let livros = livros1 + livros2;

24

React Aprenda Praticando

O resultado n?o ? um array com os cinco livros como era de se esperar, e sim uma string como mostrada a seguir.

CSS3,JavaScript,PHPHTML5,React

Exemplo 2 let livros = [livros1] + [livros2];

O resultado n?o ? um array com os cinco livros como era de se esperar, e sim um array de dois arrays como mostrado a seguir.

[ ["CSS3", "JavaScript", "PHP"], ["HTML5", "React"] ]

Exemplo 3 let livros = [...livros1, ...livros2];

Agora sim! O uso do operador spread produz o resultado que se esperava nos dois exemplos anteriores, um array com os cinco livros como mostrado a seguir.

[ "CSS3", "JavaScript", "PHP", "HTML5", "React" ]

Exemplo 4

let precoMaximo = Math.max(precos);

Aqui passamos um array de n?meros como par?metro da fun??o Math.max(). Isso n?o ? permitido em ES6. O resultado ? uma mensagem informando que o par?metro precos n?o ? um n?mero, NaN.

Exemplo 5 let precoMaximo1 = Math.max(...precos);

Agora sim! O uso do operador spread produz o resultado que se esperava, o n?mero 100, que ? o valor m?ximo constante do array de pre?os. A possibilidade de se passar um array como par?metro de uma fun??o ? uma das mais poderosas funcionalidades do operador spread. Esses exemplos encontram-se no CodeSandBox em .

1.7 M?todos map(), filter() e find()

Esses tr?s m?todos s?o muito usados em React e ? essencial que voc? se sinta totalmente confort?vel com seu uso. Basicamente eles manipulam objetos e se destinam a percorrer os itens de um objeto (inicial) iter?vel e criar um objeto

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download