MAKING REACTJS WORK WITH ASP.NET CORE MVC 

2 https://speakerdeck.com/arlannugara 

No content

No content

Download now at www.visualstudio.com Update 1 Released April 5, 2017 Update 2 Released May, 2017 Visual Studio 2017 General Availability (March 7, 2017) 

ANNOUNCING .NET CORE TOOLING 1.0 Visual Studio 2017 .NET Core CLI www.dot.net/core 

https://www.visualstudio.com/vs/compare/ 

www.visualstudio.com Online install only Bootstrap only 1 meg Install/Modify/Repair/Uninstall 16 basic workloads + Individual components For corporate environments/classrooms  https://docs.microsoft.com/en-us/visualstudio/install/create-an-offline-installation-of-visual-studio INSTALLATION 

https://www.visualstudio.com/ 

No content

No content

No content

No content

WHAT ARE WE COVERING TODAY? •ASP.NET Core MVC •What is ASP.NET Core MVC and what are the actual names? •.NET 2017 – 10K foot view •Differences: .NET Framework vs. .NET Core •ASP.NET Core 2.0 – Key Values •ReactJS •What Is ReactJS & ReactJS.NET •ReactJS.NET & support for .NET Core? 6/11/2017 14 

EVOLUTION OF ASP AND ASP .NET 6/11/2017 15 ASP.NET Web API Active Server Pages (Classic ASP) ASP.NET (Web Forms) ASP.NET MVC 1/2/3/4/ 5 ASP.NET Web Pages ASP.NET MVC 6 Core MVC Unified MVC, Web API and Web Pages 

NAMES & VERSION NUMBERS 6/11/2017 16 5 5 .NET Core 5 

ABOUT .NET CORE •.NET Core is a subset of the .NET Framework •Many .NET Framework components are not in .NET Core •.NET Core is completely modularized. Each component is distributed via NuGet •Apps can be updated independently and do not rely on major framework releases •Deployment package includes everything needed to run •.NET Core will run on Linux, Windows, and OSX 6/11/2017 17 

.NET CORE ROADMAP 6/11/2017 18 https://github.com/dotnet/core/blob/master/roadmap.md 

ASP.NET CORE 1.0 ROADMAP 6/11/2017 19 https://github.com/aspnet/home/wiki/roadmap 

WHAT ABOUT ASP.NET 5? •ASP.NET Core 1.0 was previously called ASP.NET 5 •It was renamed in January 2016 •You may still see it referred to as ASP.NET 5 in Visual Studio and in some docs •Was updated in latest ASP.NET Core Release Candidate 2 6/11/2017 20 

.NET 2017 – 10K FOOT VIEW 6/11/2017 21 Next gen JIT (RyuJIT) SIMD Runtime Components Compilers .NET Compiler Platform (Roslyn) Languages innovation .NET Core 2.0 Libraries .NET Framework 4.6 Libraries NuGet packages .NET Framework 4.7 .NET Core 2.0 Full .NET Framework for any scenario and library support on Windows Modular libraries & runtime optimized for server and cloud workloads 

6/11/2017 22 

TWO PARTS OF .NET CORE Runtime/Libraries: CLR, libraries, compilers, etc. Won’t change before RTM Tooling: Supports .NET Core and ASP.NET Core, including the new command line tools and bits that plug into Visual Studio & Visual Studio Code Will change before RTM 6/11/2017 23 

DIFFERENCES: .NET FRAMEWORK VS. .NET CORE 6/11/2017 24 Feature .NET Framework .NET Core Library Installation Centralised Distributed with each app Updates One big update. You better get your app ready Updates to framework are independent of app. Update NuGet packages when you are ready Platforms Windows is the only one for me I love everyone! Windows, OSX, Linux Base Class Library All the things! You get the entire BCL All the things! You get the entire BCL Credit: https://gooroo.io/GoorooTHINK/Article/16732/Introduction-to-NET-Core/22177 

ASP.NET IN A NUTSHELL 6/11/2017 25 

ASP.NET 4.6 AND ASP.NET CORE 1.1 6/11/2017 26 

ASP.NET CORE 1.1 – KEY VALUES 6/11/2017 27 Choose your Editors and Tools Open Source with Contributions Cross-Platform OSS Seamless transition from on-premises to cloud Faster Development Cycle Totally Modular Fast 

ASP.NET CORE ~ THE FEATURES •Hosting •Kestrel, Startup •Middleware •Routing, authentication, static files, diagnostics, error handling, session, CORS, localization, custom •Dependency Injection •Configuration •Logging •Identity 6/11/2017 28 

ASP.NET CORE ~ WHAT CAN YOU DO? ASP.NET •MVC Web Apps in C# •Web API apps •Console apps •.NET Core compatible class library •Signal R and Web Pages are coming after RTM 6/11/2017 29 

6/11/2017 30 MVC + Web API + Web Pages = ASP .NET Core MVC 

ASP.NET CORE MVC •One set of concepts – remove duplication •Web UI and Web APIs •Built on ASP.NET Core •Supports .NET Core •Runs on IIS or self-hosted •Deep integration with DI 6/11/2017 31 

6/11/2017 32 https://www.microsoft.com/net/download/core 

WHAT IS REACT? 6/11/2017 33 REACT A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES REACT .NET REACT ♥ C# AND ASP.NET MVC REACT NATIVE A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT 

REACT IS OPEN SOURCE (GITHUB) •ReactJS: http://reactjs.com/ •ReactJS.NET: http://reactjs.net/ •React Native: https://facebook.github.io/react-native/ 6/11/2017 34 

WHO’S USING REACT? 6/11/2017 35 

WHAT IS REACT? •Made by Facebook •Used by Facebook •IE8 and up •All recent mobile browsers •GitHub Fork for IE6 & IE7 •Native apps for iOS (Android soon) •Windows already allows for native JavaScript applications. 6/11/2017 36 

WHAT IS REACT? •A JavaScript library for building user interfaces. •React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. •Declarative views make your code more predictable and easier to debug. •Build encapsulated components that manage their own state, then compose them to make complex UIs. •Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM 6/11/2017 37 

REACTJS.NET & ASP.NET CORE The challenge with building 2017-style clientside-centric web apps is that there’s just so much going on, such as: •Frameworks (React, Angular 1 or 2, Knockout, Aurelia, …) •Architectures (plain old MV*, Flux/Redux, …) •Languages (ES2016/TypeScript/…, LESS/SASS/…) •Build systems (Webpack/Gulp/…), and all the ensuing choices: • Development middleware • Hot module replacement • Bundling strategies • Lazy loading of modules •Server-client integration ◦Server-side prerendering of Angular/React/etc components •Server-side prepopulation of client-side data caches •Plain old fetching and synchronising data •Combining server-side and client-side routing •Combining server-side and client-side validation 6/11/2017 38 

WHAT IS REACTJS.NET 6/11/2017 39 https://reactjs.net/ 

2017-06-11 40 

2017-06-11 41 

2017-06-11 42 

2017-06-11 43 

2017-06-11 44 

Thank-you!