46
SPA's com + by José Barbosa | @kidchenko

Spa's com Reactjs e Asp Net Core

Embed Size (px)

Citation preview

Page 1: Spa's com Reactjs e Asp Net Core

SPA's com+

by José Barbosa | @kidchenko

Page 2: Spa's com Reactjs e Asp Net Core

Single Page

Application

Page 3: Spa's com Reactjs e Asp Net Core

“…In an SPA, either all necessary code –HTML, JavaScript, and CSS – is retrieved with

a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process…”

Page 4: Spa's com Reactjs e Asp Net Core

SPA é uma “aplicação de uma única página”!?

Page 5: Spa's com Reactjs e Asp Net Core
Page 6: Spa's com Reactjs e Asp Net Core

https://dayssincelastjavascriptframework.com/

Page 7: Spa's com Reactjs e Asp Net Core
Page 8: Spa's com Reactjs e Asp Net Core
Page 9: Spa's com Reactjs e Asp Net Core
Page 10: Spa's com Reactjs e Asp Net Core
Page 11: Spa's com Reactjs e Asp Net Core

Software Engineer;Agilista;Empreendedor digital;Apaixonado por JS;Ex-Lambda3

@kidchenko

github.com/kidchenko

Page 12: Spa's com Reactjs e Asp Net Core

Acompanhe

o podcast da

Lambda3:http://blog.lambda3.com.br/category/p

odcast

Page 13: Spa's com Reactjs e Asp Net Core
Page 14: Spa's com Reactjs e Asp Net Core

SPA's com+

Page 15: Spa's com Reactjs e Asp Net Core
Page 16: Spa's com Reactjs e Asp Net Core
Page 17: Spa's com Reactjs e Asp Net Core
Page 18: Spa's com Reactjs e Asp Net Core

Nops!

Page 19: Spa's com Reactjs e Asp Net Core
Page 20: Spa's com Reactjs e Asp Net Core
Page 21: Spa's com Reactjs e Asp Net Core
Page 22: Spa's com Reactjs e Asp Net Core

Entendendo o Reactjs

Page 23: Spa's com Reactjs e Asp Net Core

Componentes

Page 24: Spa's com Reactjs e Asp Net Core
Page 25: Spa's com Reactjs e Asp Net Core

<!DOCTYPE html><html><head><script src="https://fb.me/react-15.1.0.min.js"></script><script src="https://fb.me/react-dom-15.1.0.min.js"></script></head><body><script>

ReactDOM.render(React.createElement('div', null, 'Hi React!'), document.body);

</script></body></html>

Page 26: Spa's com Reactjs e Asp Net Core

<!DOCTYPE html><html><head><script src="https://fb.me/react-15.1.0.min.js"></script><script src="https://fb.me/react-dom-15.1.0.min.js"></script></head><body><script>

ReactDOM.render(React.createElement('div', null, 'Hi React!'), document.body);

</script></body></html>

Page 27: Spa's com Reactjs e Asp Net Core
Page 28: Spa's com Reactjs e Asp Net Core

<script type="text/jsx">var Hi = React.createClass({

render: function() {return (<div>

<h1>Hi from react and jsx :)</h1><p>This is some text</p>

</div>)}

});ReactDOM.render(<Hi />,

document.getElementById('container'));</script>

Page 29: Spa's com Reactjs e Asp Net Core

<script type="text/jsx">var Hi = React.createClass({

render: function() {return (<div>

<h1>Hi from react and jsx :)</h1><p>This is some text</p>

</div>)}

});ReactDOM.render(<Hi />,

document.getElementById('container'));</script>

Page 30: Spa's com Reactjs e Asp Net Core

Virtual DOM

Page 31: Spa's com Reactjs e Asp Net Core
Page 32: Spa's com Reactjs e Asp Net Core
Page 33: Spa's com Reactjs e Asp Net Core
Page 34: Spa's com Reactjs e Asp Net Core

Composição

Page 35: Spa's com Reactjs e Asp Net Core
Page 36: Spa's com Reactjs e Asp Net Core
Page 37: Spa's com Reactjs e Asp Net Core
Page 38: Spa's com Reactjs e Asp Net Core

Entendendo oASP .NET Core

Page 39: Spa's com Reactjs e Asp Net Core
Page 40: Spa's com Reactjs e Asp Net Core
Page 41: Spa's com Reactjs e Asp Net Core

Controllers

Page 42: Spa's com Reactjs e Asp Net Core
Page 43: Spa's com Reactjs e Asp Net Core
Page 44: Spa's com Reactjs e Asp Net Core

Por quê Reactjs é útil para o ASP

.Net Core?

Page 45: Spa's com Reactjs e Asp Net Core
Page 46: Spa's com Reactjs e Asp Net Core

OBRIGADO!Dúvidas?

@kidchenko

github.com/kidchenko