Você já reagiu hoje?
Prepare-se para
conhecer o React!
Quem sou eu?
Gustavo Sales Santos
Frontend no PagSeguro
Formado em Jogos Digitais pela FIAP
Programando desde quando jQuery era moda
Redes sociais
linkedin.com/in/gsaless
twitter.com/salesgu_
github.com/salesgu
Mas vamos lá!
O que raios é React?
Um pouco de história, vai...
Iniciado por Jordan Walker quando era engenheiro de software do Facebook em 2011
Continua no Facebook em comunidade open-source (https://github.com/facebook/react), que foi iniciada somente em 2013 na JSConf US
React é...
Lib javascript para construção de interfaces
Baseado em componentes, propriedades e estados
Pode ser usado como Single Page Application
Um simples exemplo
Não para por ai
Um complemento:
Redux
Mais história, juro que é rápido
Criado em 2015 por Dan Abramov
Pode ser considerado um upgrade do Flux
Viu?
Eu disse que seria rápido
Redux é...
Gerenciador de estados
Manipulador de dados entre componentes
Muito loco!
"Triforce do Redux"
Um único ponto de verdade
O estado é imutável
Mudanças são feitas apenas por funções puras
Vamos ao código
Que está disponível no meu github, baixa la:
Porque amamos o open source?
Porque eles fazem ferramentas de developer para React e Redux FREE!!
Um pouco mais
Server Side Rendering:
Next
Server Side Rendering (SSR)
Ja reparou como fica o código fonte?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script type="text/javascript" src="/static/js/bundle.js"></script></body>
</html>Server Side Rendering (SSR)
Pensando nisso surgiram algumas iniciativas, como o:
SSR por padrão habilitado
Sistema de rotas
Entre outras "cositas mas"
Fonte: https://nextjs.org/learn/
Vamos ao código
Que está disponível no meu github, baixa la:
Voltando ao React
O método render()
render() é responsável...
Pela exibição do conteúdo
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
mountNode
);Você é responsável...
Pela performance de acordo com o uso do render()
Pense na escalabilidade e mapeie vários tipos de usuários
Pensando nisso...
Criaram o "why-did-you-update"
Obrigado!
Redes sociais
linkedin.com/in/gsaless
twitter.com/salesgu_
github.com/salesgu
Gustavo Sales Santos
Frontend Developer
Acho que ainda temos tempo:
perguntas?
Você já reagiu hoje? Prepare-se para conhecer o React!
By Gustavo Sales
