Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Do Javascript ao React: aprendendo e se adaptan...
Search
Juliana Negreiros
October 08, 2018
Technology
0
30
Do Javascript ao React: aprendendo e se adaptando a mudanças aula 1 | From Javascript to React: learning and adapting to change lesson 1
- Semana da Tecnologia de 2018 na FATEC Sorocaba (08/10/2018): workshop de 2 dias
Juliana Negreiros
October 08, 2018
Tweet
Share
More Decks by Juliana Negreiros
See All by Juliana Negreiros
Um guia para começar no mundo Front End
juunegreiros
0
340
Desmistificando a área de TI
juunegreiros
0
69
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
430
Introdução ao Git
juunegreiros
0
54
Webpacker e a Jornada do Heroi
juunegreiros
0
22
Como modularizar seu front-end sem depender de um framework
juunegreiros
0
87
Sopa de Letrinhas CSS | Alphabet soup CSS
juunegreiros
1
75
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
60
Carreiras em TI
juunegreiros
0
53
Other Decks in Technology
See All in Technology
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.2k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
16k
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
280
ゼロからはじめる採用広報
yutadayo
3
920
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
140
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
48
19k
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How to Ace a Technical Interview
jacobian
278
23k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Facilitating Awesome Meetings
lara
54
6.4k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Docker and Python
trallard
44
3.5k
Thoughts on Productivity
jonyablonski
69
4.7k
Side Projects
sachag
455
42k
Making Projects Easy
brettharned
116
6.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Building an army of robots
kneath
306
45k
Transcript
Do Javascript ao React Aprendendo e se adaptando à mudanças
Juliana Negreiros
Guilherme Caçador Monteiro
Objetivos e porquês
Antes de começar
bit.ly/movies-react-worksho p
developers.themoviedb.org/3
Sobre APIs
codesanbox.io
Iniciando uma linda amizade com o debugger
None
Precisamos falar sobre Javascript
ECMAscript 6 ou ECMAscript 2015
Conversão automática de tipos
1 == '1' 3 > 2 > 1
1 == '1' 3 > 2 > 1
Declaração de variáveis
const let var
const a = {name: 'Ju'} const b = a const
c = {name: 'Ju'}
a == b a == c a.name = 'Gui' a
== b a = 'name'
let d = 'ju' d = 'gui' let d =
'outro nome'
Atributos
const dados = {} dados.nome = 'ju' dados['filme preferido'] =
'Braveheart' dados[1] = 2
Assíncrono
Promises
None
None
Programação Funcional
Declarativo x Imperativo
const nomes = ['ju', 'gui']
for(let i = 0; i < nomes.length; i++) { console.log(nomes[i]);
}
nomes.forEach(nome => console.log(nome))
High Order Functions
function multiplica(n1){ return n2 => n1 * n2 } const
dobro = multiplica(2) console.log(dobro(8))
Filter, map, reduce e forEach
forEach(element, index) const numeros = [1, 2, 3, 4, 5,
6] const print = numeros => numeros.forEach(numero => console.log(numero)) print(numeros)
map(element, index, array) const numeros = [1, 2, 3, 4,
5, 6] const dobros = numeros.map(numero => numero * 2)
filter(element, index, array) const numeros = [1, 2, 3, 4,
5, 6] const pares = numeros.filter(numero => numero % 2 === 0)
reduce(prevVal, elemento, index, array, initVal) const numeros = [1, 2,
3, 4, 5, 6] const total = numeros.reduce((prev, numero) => prev + numero, 0)
DOM
41b0dacac11ce51d0d8085 035a3a5e73bi
https://codesandbox.io /s/lpq882ljkl
None
None