Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Do Javascript ao React: aprendendo e se adaptan...
Search
Juliana Negreiros
October 08, 2018
Technology
39
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
More Decks by Juliana Negreiros
See All by Juliana Negreiros
Um guia para começar no mundo Front End
juunegreiros
0
350
Desmistificando a área de TI
juunegreiros
0
93
Como otimizar seu site com lighthouse e core web vitals
juunegreiros
0
450
Introdução ao Git
juunegreiros
0
70
Webpacker e a Jornada do Heroi
juunegreiros
0
38
Como modularizar seu front-end sem depender de um framework
juunegreiros
0
97
Sopa de Letrinhas CSS | Alphabet soup CSS
juunegreiros
1
86
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
72
Carreiras em TI
juunegreiros
0
64
Other Decks in Technology
See All in Technology
Temporal 最高!でも改めて「日付」について調べたら人類の負債すぎる件
riyaamemiya
0
150
DGX Spark でどこまでハッキングができるのか?
kash1064
3
1.3k
フロントエンドカンファレンス関西2026 - 速すぎるUIに、待ち時間を
teamlab
PRO
0
140
S3 Filesで挑む! 八戸せんべい汁の食べ頃問題
usanchuu
0
100
SAENM ~Jupyterで残すPoCの試行錯誤、未来の自分と仲間を助ける記録!~
terapyon
0
110
Gemini Intelligence 入門 ― AppFunctions と Gemini Nano
takuroabe
0
270
go-sqletch
moznion
0
140
コンテナ運用におけるネットワーク・コンテナコストの削減方法/How to Reduce Network and Container Costs in Container Operations
masakiokuda
1
230
Conditional PED-ANOVA: Hyperparameter Importance in Hierarchical & Dynamic Search Spaces
pfn
PRO
0
140
その Valkey 使いこなしていますか?
onk
PRO
5
1.5k
JAWSUG TOHOKU 青森支部 「LoGoチャット」のAWS移行で 乗り越えたこと
taketakekaho
0
340
Getting Started with Google Antigravity
glaforge
0
310
Featured
See All Featured
Docker and Python
trallard
47
4.2k
Done Done
chrislema
187
17k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.5k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
580
HDC tutorial
michielstock
2
960
Product Roadmaps are Hard
iamctodd
55
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.7k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
730
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
220
Mobile First: as difficult as doing things right
swwweet
225
10k
Deep Space Network (abreviated)
tonyrice
0
370
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
370
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