react for .net developers
TRANSCRIPT
![Page 1: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/1.jpg)
React for .net developers
![Page 2: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/2.jpg)
Who am I?Head of TechnologyTicket Arena / Event Genius
Co-FounderYorkshireDigital
@MacsDickinsonwww.macsdickinson.com
![Page 3: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/3.jpg)
A brief history of web development in .Net
![Page 4: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/4.jpg)
2002ASP.NET 1.0
2006 JQuery
2007ASP.NET 3.5
2009ASP.NET MVC 1.0
2010 Knockout JS
2012ASP.NET WebAPI 1.0
![Page 5: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/5.jpg)
2012 - 2015
![Page 6: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/6.jpg)
Where does this leave us in 2015?
![Page 7: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/7.jpg)
Where does this leave us in 2015?Our users expect• Fast load times• Rich client functionality• Reactive behaviour• Great SEO
![Page 8: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/8.jpg)
Where does this leave us in 2015?Our users expect• Fast load times• Rich client functionality• Reactive behaviour• Great SEO
Our developers expect• Short learning curve• Testable code• Reusability• Freedom
![Page 9: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/9.jpg)
Introducing React
![Page 10: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/10.jpg)
Why React?• Easy to Learn
• Encapsulated Components
• Declarative
• It’s easy to plug in
![Page 11: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/11.jpg)
Core Concepts• Just the View (JSX)
• Components
• Top down data flow
• State
• The Virtual DOM
![Page 12: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/12.jpg)
JSXJust the view
![Page 13: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/13.jpg)
JSX
![Page 14: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/14.jpg)
JSX -> JavaScript
![Page 15: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/15.jpg)
JSX
![Page 16: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/16.jpg)
TSX
![Page 17: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/17.jpg)
Components
![Page 18: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/18.jpg)
Components
As software developers we make complex systems simple enough for humans to
understand
![Page 19: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/19.jpg)
Components
![Page 20: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/20.jpg)
Top Down Data Flow
![Page 21: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/21.jpg)
Top down data flow
![Page 22: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/22.jpg)
Top down data flow
![Page 23: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/23.jpg)
Top down data flow
![Page 24: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/24.jpg)
Top down data flow
![Page 25: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/25.jpg)
Top down data flow
![Page 26: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/26.jpg)
Top down data flow
![Page 27: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/27.jpg)
Top down data flow
![Page 28: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/28.jpg)
Top down data flow
![Page 29: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/29.jpg)
Top down data flow
![Page 30: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/30.jpg)
Top down data flow
![Page 31: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/31.jpg)
Top down data flow
![Page 32: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/32.jpg)
The Virtual DOM
![Page 33: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/33.jpg)
![Page 34: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/34.jpg)
![Page 35: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/35.jpg)
![Page 36: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/36.jpg)
![Page 37: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/37.jpg)
State
![Page 38: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/38.jpg)
Props vs State• Props hold the data you want to pass to your component
• State can be updated
![Page 39: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/39.jpg)
State
![Page 40: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/40.jpg)
State
![Page 41: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/41.jpg)
State
![Page 42: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/42.jpg)
State
![Page 43: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/43.jpg)
State
![Page 44: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/44.jpg)
ReactJS.NET
![Page 45: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/45.jpg)
ReactJS.NETMVC 4 & 5Install-Package React.Web.Mvc4
AspNet 5Install-Package React.AspNet
![Page 46: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/46.jpg)
ReactJS.NET• On the fly jsx compilation and bundling
![Page 47: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/47.jpg)
ReactJS.NET• Server Side Rendering• Integrates into your Razor templates
![Page 48: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/48.jpg)
ReactJS.NETPro Tips:
• Use the React developer extension for Chrome• Don’t server compile when building your components as the errors
aren’t great.• Enable TSX compilation in VS2015 if not using gulp• You will end up using gulp over VS tooling to handle dependencies,
bundle and minify.
![Page 49: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/49.jpg)
Where does this leave us in 2015?Our users get• Fast load times• Rich client functionality• Reactive behaviour• Great SEO
Our developers get• Testable code• Short learning curve• Reusability• Freedom
![Page 50: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/50.jpg)
Further Readingfacebook.github.io/reactreactjs.net/getting-started/tutorial.htmlwww.reactiflux.comreactpodcast.com
@reactjs@ReactJSNews
![Page 51: React for .net developers](https://reader036.vdocument.in/reader036/viewer/2022062310/58f2a6e91a28ab06428b45b9/html5/thumbnails/51.jpg)
Thank You
@MacsDickinsonwww.macsdickinson.com
@YorksDigitalwww.yorkshiredigital.com
Slides and examples atwww.macsdickinson.com