SlideShare uma empresa Scribd logo
1 de 31
Quick start
Typescript + React + Redux
Leonardo Prange
Sobre mim
10º Período de Ciência da Computação - Univali
Engenheiro de Software - QUAY Sistemas e Portais
Palestrante - Itajaí .NET
Typescript React Js
- Tipada
- C# & F#
- Não é preso a plataformas
- Microsoft
“I now actually understand most
of our own code!”
— Brad Green, Engineering Director - AngularJS
- Biblioteca para construção de interface de
usuário
- Baseado em componentes
- JSX & TSX
- Facebook
“Learn Once, Write Anywhere”
— Team ReactJs
TypeScript
TypeScript
React
Javascript : )
React
TypeScript  o /
REDUX
- Melhoria do Flux
- Composto por 3 pilares
- Estado unificado
- Estado imutável
- Mudança == Função Pura
“Redux is not a
monolithic framework”
- Team Redux
Vamos analisar na prática
Modelo
Action Types
Action Creators
- Comunicam com o
servidor
- Despacha as informações
para as actions que
alteram o estado na Store
Action Creators
- Comunicam com o
servidor
- Despacha as informações
para as actions que
alteram o estado na Store
Action Creators
Reducer
Reducer
Combine Reducers
Store
MIDDLEWARE ???
Middleware é um código que você pode colocar
entre a estrutura que recebe uma solicitação e a
estrutura que gera uma resposta
Ele fornece um ponto de extensão de terceiros
entre o envio de uma ação e o momento em que
ela atinge o redutor
Component
Component
Component
Component
Component
Component
Resultado
Parece bastante código… eu realmente preciso de Redux ?
"You might not need Redux"
- Dan Abramov - Co-author of Redux and Create React App
Perguntas ?
Obrigado!
github.com/LeonardoPrange
linkedin.com/in/leonardo-prange-
890340144/
leonardoprange@gmail.com

Mais conteúdo relacionado

Mais procurados

Um framework java script para chamar de seu
Um framework java script para chamar de seuUm framework java script para chamar de seu
Um framework java script para chamar de seuRonaldo Prass
 
Node.js: 5 razões para começar a utilizar
Node.js: 5 razões para começar a utilizarNode.js: 5 razões para começar a utilizar
Node.js: 5 razões para começar a utilizarFilipe Falcão
 
MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.Leonardo Quevedo
 
Node não é filme de Terror
Node não é filme de TerrorNode não é filme de Terror
Node não é filme de TerrorPaulo Pires
 
Introdução ao Node.js - FATEC SP
Introdução ao Node.js - FATEC SPIntrodução ao Node.js - FATEC SP
Introdução ao Node.js - FATEC SPArthur Fücher
 
Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?Pablo Souza
 
Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJSGiovanni Bassi
 
Node.js Sorocaba - meetup #1
Node.js Sorocaba - meetup #1Node.js Sorocaba - meetup #1
Node.js Sorocaba - meetup #1Pablo Souza
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoEduardo Bohrer
 
Nodejs - A performance que eu sempre quis ter
Nodejs - A performance que eu sempre quis terNodejs - A performance que eu sempre quis ter
Nodejs - A performance que eu sempre quis terEmerson Macedo
 
Precisamos falar sobre MERN stack
Precisamos falar sobre MERN stackPrecisamos falar sobre MERN stack
Precisamos falar sobre MERN stackSidney Roberto
 
Nodejs justdigital
Nodejs justdigitalNodejs justdigital
Nodejs justdigitalJust Digital
 
Java script vs vb script
Java script vs vb scriptJava script vs vb script
Java script vs vb scriptNielson Santana
 

Mais procurados (20)

Um framework java script para chamar de seu
Um framework java script para chamar de seuUm framework java script para chamar de seu
Um framework java script para chamar de seu
 
Node.js: 5 razões para começar a utilizar
Node.js: 5 razões para começar a utilizarNode.js: 5 razões para começar a utilizar
Node.js: 5 razões para começar a utilizar
 
MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.
 
Node.js for Noobs
Node.js for NoobsNode.js for Noobs
Node.js for Noobs
 
Node não é filme de Terror
Node não é filme de TerrorNode não é filme de Terror
Node não é filme de Terror
 
[Testes] frameworks de testes end to-end baseados em node js
[Testes] frameworks de testes end to-end baseados em node js [Testes] frameworks de testes end to-end baseados em node js
[Testes] frameworks de testes end to-end baseados em node js
 
Typescript
TypescriptTypescript
Typescript
 
Node js
Node jsNode js
Node js
 
Node js - Javascript Server Side
Node js - Javascript Server SideNode js - Javascript Server Side
Node js - Javascript Server Side
 
Introdução ao Node.js - FATEC SP
Introdução ao Node.js - FATEC SPIntrodução ao Node.js - FATEC SP
Introdução ao Node.js - FATEC SP
 
Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?
 
Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJS
 
Go e MongoDB
Go e MongoDBGo e MongoDB
Go e MongoDB
 
Node.js Sorocaba - meetup #1
Node.js Sorocaba - meetup #1Node.js Sorocaba - meetup #1
Node.js Sorocaba - meetup #1
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
 
Nodejs - A performance que eu sempre quis ter
Nodejs - A performance que eu sempre quis terNodejs - A performance que eu sempre quis ter
Nodejs - A performance que eu sempre quis ter
 
Node.js
Node.jsNode.js
Node.js
 
Precisamos falar sobre MERN stack
Precisamos falar sobre MERN stackPrecisamos falar sobre MERN stack
Precisamos falar sobre MERN stack
 
Nodejs justdigital
Nodejs justdigitalNodejs justdigital
Nodejs justdigital
 
Java script vs vb script
Java script vs vb scriptJava script vs vb script
Java script vs vb script
 

Semelhante a Msp TechDay - TypeScript + React + Redux

TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JSRodrigo Urubatan
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdfJulia469065
 
React native - testável e organizado
React native - testável e organizadoReact native - testável e organizado
React native - testável e organizadoAndré Antunes Vieira
 
JS Experience 2017 - React + Redux. Pensando em Redux
JS Experience 2017 - React + Redux. Pensando em ReduxJS Experience 2017 - React + Redux. Pensando em Redux
JS Experience 2017 - React + Redux. Pensando em ReduxiMasters
 
Desenvolvimento em .Net - Introducao A Framework
Desenvolvimento em .Net - Introducao A FrameworkDesenvolvimento em .Net - Introducao A Framework
Desenvolvimento em .Net - Introducao A FrameworkVitor Silva
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaAlexandre Tarifa
 
RedGate .NET Reflector
RedGate .NET ReflectorRedGate .NET Reflector
RedGate .NET ReflectorNuno Gomes
 
Escalando aplicações no front-end com ReactJS
Escalando aplicações no front-end com ReactJSEscalando aplicações no front-end com ReactJS
Escalando aplicações no front-end com ReactJSCriciúma Dev
 
Mercado de trabalho com react js
Mercado de trabalho com react jsMercado de trabalho com react js
Mercado de trabalho com react jsNicholas Eduardo
 
RedGate .NET Reflector no dia-a-dia de um programador
RedGate .NET Reflector no dia-a-dia de um programadorRedGate .NET Reflector no dia-a-dia de um programador
RedGate .NET Reflector no dia-a-dia de um programadorComunidade NetPonto
 
Desenvolvimento web com .NET Core - Meetup São Carlos
Desenvolvimento web com .NET Core - Meetup São CarlosDesenvolvimento web com .NET Core - Meetup São Carlos
Desenvolvimento web com .NET Core - Meetup São CarlosRodolfo Fadino Junior
 
Minicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTIMinicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTImarcochella
 
O front-end moderno e sua lib mais popular: React
O front-end moderno e sua lib mais popular: ReactO front-end moderno e sua lib mais popular: React
O front-end moderno e sua lib mais popular: ReactFernando Henriques
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Rodrigo Branas
 
JavaScript: uma visão geral da linguagem e seu ecossistema
JavaScript: uma visão geral da linguagem e seu ecossistemaJavaScript: uma visão geral da linguagem e seu ecossistema
JavaScript: uma visão geral da linguagem e seu ecossistemaFabio Agostinho Boris
 
TDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on Azure
TDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on AzureTDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on Azure
TDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on Azuretdc-globalcode
 
Scrum e o Ambiente de Desenvolvimento Ágil
Scrum e o Ambiente de Desenvolvimento ÁgilScrum e o Ambiente de Desenvolvimento Ágil
Scrum e o Ambiente de Desenvolvimento Ágilabacrazy
 

Semelhante a Msp TechDay - TypeScript + React + Redux (20)

TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
 
Hello ReactJs
Hello ReactJsHello ReactJs
Hello ReactJs
 
React native - testável e organizado
React native - testável e organizadoReact native - testável e organizado
React native - testável e organizado
 
JS Experience 2017 - React + Redux. Pensando em Redux
JS Experience 2017 - React + Redux. Pensando em ReduxJS Experience 2017 - React + Redux. Pensando em Redux
JS Experience 2017 - React + Redux. Pensando em Redux
 
Desenvolvimento em .Net - Introducao A Framework
Desenvolvimento em .Net - Introducao A FrameworkDesenvolvimento em .Net - Introducao A Framework
Desenvolvimento em .Net - Introducao A Framework
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
 
RedGate .NET Reflector
RedGate .NET ReflectorRedGate .NET Reflector
RedGate .NET Reflector
 
Escalando aplicações no front-end com ReactJS
Escalando aplicações no front-end com ReactJSEscalando aplicações no front-end com ReactJS
Escalando aplicações no front-end com ReactJS
 
Mercado de trabalho com react js
Mercado de trabalho com react jsMercado de trabalho com react js
Mercado de trabalho com react js
 
RedGate .NET Reflector no dia-a-dia de um programador
RedGate .NET Reflector no dia-a-dia de um programadorRedGate .NET Reflector no dia-a-dia de um programador
RedGate .NET Reflector no dia-a-dia de um programador
 
Desenvolvimento web com .NET Core - Meetup São Carlos
Desenvolvimento web com .NET Core - Meetup São CarlosDesenvolvimento web com .NET Core - Meetup São Carlos
Desenvolvimento web com .NET Core - Meetup São Carlos
 
Minicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTIMinicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTI
 
O front-end moderno e sua lib mais popular: React
O front-end moderno e sua lib mais popular: ReactO front-end moderno e sua lib mais popular: React
O front-end moderno e sua lib mais popular: React
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
JavaScript: uma visão geral da linguagem e seu ecossistema
JavaScript: uma visão geral da linguagem e seu ecossistemaJavaScript: uma visão geral da linguagem e seu ecossistema
JavaScript: uma visão geral da linguagem e seu ecossistema
 
TDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on Azure
TDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on AzureTDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on Azure
TDC2018SP | Trilha Arq .Net - Serverless Reactive Programming on Azure
 
Scrum e o Ambiente de Desenvolvimento Ágil
Scrum e o Ambiente de Desenvolvimento ÁgilScrum e o Ambiente de Desenvolvimento Ágil
Scrum e o Ambiente de Desenvolvimento Ágil
 
Testing node.js
Testing node.jsTesting node.js
Testing node.js
 

Msp TechDay - TypeScript + React + Redux