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