Building React and ASP.NET MVC 5 Applications

2h 11mIntermediate2018-11-27

Authors

Kazi Nasrat Ali

Senior Software Developer at Surge

Course details

React.js is a popular framework that's especially suited to building web apps with ASP.NET MVC 5, but integrating the two frameworks can be challenging. In this course, instructor Kazi Nasrat Ali steps through how to wire these two frameworks together to develop full-stack React and ASP.NET MVC 5 web apps. Learn how to build a front end with React.js and a backend with ASP.NET MVC 5 and Entity Framework by creating a full-stack web app for a restaurant. Create user logins, add shopping cart functionality to your app, secure the API, and optimize for mobile. Upon wrapping up this course, you'll have the skills you need to combine the powers of React.js and ASP.NET MVC 5 to create high-quality, impactful webpages.

Learning objectives
Creating the back end
Scaffolding a project with MVC 5
Setting up the service API for data
Creating the front end with React
Handling events for React elements
Responsive UI and mobile friendliness
Securing the API
Debugging the front end and back end

Skills covered

ASP.NET MVCASP.NETReact.jsMetaBack-End Web DevelopmentFull-Stack Web DevelopmentFront-End Web DevelopmentProjectWeb DevelopmentMicrosoft

Concepts

0. Introduction

01 - The power of React and ASP.NET MVC 5
02 - What you should know
03 - Set up the development environment

1. About ASP.NET MVC 5 and React

04 - ASP.NET MVC 5, React, and full-stack app quick overview
05 - Why React with ASP.NET MVC 5
06 - The React and ASP.NET MVC app we are building

2. Create the Back End

07 - Scaffold a project with MVC 5
08 - Add data models for Entity Framework
09 - Add Entity Framework DbContext
10 - Create controller methods for UI pages
11 - Add register and login views
12 - Test register and login features

3. Setup - A Service API for Data

13 - Create a REST API controller
14 - Add an action method to read records in JSON format
15 - Add an action method to create records

4. Setup - TypeScript, IntelliSense, and webpack

16 - The dev environment issue with React and Visual Studio 2015
17 - Set up webpack, TypeScript, and configs
18 - Set up React and type definitions and configs

5. Create the Front End with React

19 - Add a React data model and state classes
20 - Add a React component and fetch data
21 - Render data as a grid of boxes
22 - Add shopping cart functionality with React
23 - Continuing to add shopping cart functionality
24 - Handling events for React elements
25 - Add React form component to submit data
26 - Responsive UI and mobile friendliness

6. Secure the API

27 - Understanding the API vulnerability
28 - Secure the API with AuthorizeAttribute

7. Debugging and Testing

29 - Debugging the front end and back end
30 - Testing and completion

Conclusion

31 - Next steps