View
1.206
Download
1
Category
Preview:
Citation preview
React for .net developers
Who am I?Head of TechnologyTicket Arena / Event Genius
Co-FounderYorkshireDigital
@MacsDickinsonwww.macsdickinson.com
A brief history of web development in .Net
2002ASP.NET 1.0
2006 JQuery
2007ASP.NET 3.5
2009ASP.NET MVC 1.0
2010 Knockout JS
2012ASP.NET WebAPI 1.0
2012 - 2015
Where does this leave us in 2015?
Where does this leave us in 2015?Our users expect• Fast load times• Rich client functionality• Reactive behaviour• Great SEO
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
Introducing React
Why React?• Easy to Learn
• Encapsulated Components
• Declarative
• It’s easy to plug in
Core Concepts• Just the View (JSX)
• Components
• Top down data flow
• State
• The Virtual DOM
JSXJust the view
JSX
JSX -> JavaScript
JSX
TSX
Components
Components
As software developers we make complex systems simple enough for humans to
understand
Components
Top Down Data Flow
Top down data flow
Top down data flow
Top down data flow
Top down data flow
Top down data flow
Top down data flow
Top down data flow
Top down data flow
Top down data flow
Top down data flow
Top down data flow
The Virtual DOM
State
Props vs State• Props hold the data you want to pass to your component
• State can be updated
State
State
State
State
State
ReactJS.NET
ReactJS.NETMVC 4 & 5Install-Package React.Web.Mvc4
AspNet 5Install-Package React.AspNet
ReactJS.NET• On the fly jsx compilation and bundling
ReactJS.NET• Server Side Rendering• Integrates into your Razor templates
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.
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
Further Readingfacebook.github.io/reactreactjs.net/getting-started/tutorial.htmlwww.reactiflux.comreactpodcast.com
@reactjs@ReactJSNews
Thank You
@MacsDickinsonwww.macsdickinson.com
@YorksDigitalwww.yorkshiredigital.com
Slides and examples atwww.macsdickinson.com
Recommended