Building React and ASP.NET MVC 5 Applications

Learn how to combine the powers of React.js and Microsoft ASP.NET MVC 5 to develop full-stack web apps.

Introduction

• The power of React and ASP.NET MVC 5
• What you should know
• Set up the development environment

1. About ASP.NET MVC 5 and React

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

2. Create the Back End

• Scaffold a project with MVC 5
• Add data models for Entity Framework
• Add Entity Framework DbContext
• Create controller methods for UI pages
• Add register and login views
• Test register and login features

3. Setup: A Service API for Data

• Create a REST API controller
• Add an action method to read records in JSON format
• Add an action method to create records

4. Setup: TypeScript, IntelliSense, and webpack

• The dev environment issue with React and Visual Studio 2015
• Set up webpack, TypeScript, and configs
• Set up React and type definitions and configs

5. Create the Front End with React

• Add a React data model and state classes
• Add a React component and fetch data
• Render data as a grid of boxes
• Add shopping cart functionality with React
• Continuing to add shopping cart functionality
• Handling events for React elements
• Add React form component to submit data
• Responsive UI and mobile friendliness

6. Secure the API

• Understanding the API vulnerability
• Secure the API with AuthorizeAttribute

7. Debugging and Testing

• Debugging the front end and back end
• Testing and completion

Conclusion

• Next steps