Full Stack ASP.NET Core with React & Redux

5-Day Course Taught Live as In-Person or Online

Course Description

ASP.NET Core 3.1 is the latest release of Microsoft’s cross-platform version of its ASP.NET web application framework. The training course is taught ASP.NET Core 3.1, React 16 and Redux 4. React is a hugely popular JavaScript UI library developed and maintained by Facebook. Redux is a popular open-source state management library for JavaScript applications.

The training course introduces attendees to ASP.NET Core development and React/Redux teaching the skills necessary to build a modern web application powered by JavaScript in the client and ASP.NET Core on the backend using the best practices of React, Redux, ASP.NET Core and their usage in a Single Page Application (SPA). A particular focus of this class is business application development. Coverage will include securing an application with a login, building multi-page applications with routing and building complex forms including validation.

With the hands-on experience gained through this training, a student will have been presented with the knowledge and skills necessary to build a full-stack business web application using ASP.NET Core, React and Redux.

Course ObjectivesObjectives

  • Understand the goals and benefits of the .NET Core platform
  • Learn to make good decisions about application architecture and the choice of data access technology
  • Use ASP.NET Core’s routing system to achieve a REST-style architecture
  • Gain experience building a service that make data available via a modern Web API
  • Use a JavaScript package manager
  • Quickly understand the new JavaScript language features, including classes, modules, and arrow functions
  • Articulate what React is and why it is useful
  • Explore the basic architecture of a React application
  • Gain a deep understanding of JSX and the Virtual DOM
  • Use React components to build interactive interfaces
  • Create and validate forms using controlled components
  • Make HTTP calls to read or change data
  • Configure simple and complex routing
  • Utilize Redux to manage the state of the application
  • Use React and Redux together
  • Implement React and Redux best practices
  • Write unit tests for React using Jest and Enzyme

Course PrerequisitesPrerequisites

This course presumes that all students have C# and HTML/CSS/JavaScript experience. If students do not have the needed experience in those languages, coverage of those languages can be included in the course provided some of the original course content is dropped.

It is highly recommended that all students have some introductory experience with ASP.NET Core, React and Redux development. While these topics are covered in the course, this course will touch on a large amount of content and if the basics all of that content is completely new to the student it will be overwhelming.

Course RequirementsRequirements

We teach all classes online. Students will need to be able to join an online session using a popular online meeting service such as Zoom, Microsoft Teams, GotoTraining, etc… If the client has no preference, Zoom will be used.

We recommend that each student have two displays. One display to view the instructor presentation and one display to use for note-taking and programming along with the instructor. The second display can be a tablet connect to the session if the meeting software provides an app for the student’s tablet.

All course materials are distributed via GitHub and Google Drive. Access to those services is needed for the class, please ensure your firewall and network policies will allow students to access those resources. If students cannot access GitHub or Google Drive, alternatives will be discussed.

Course OutlineOutline

The React & Redux portions of the course can be taught in either the JavaScript or the TypeScript languages. Knowledge of JavaScript is needed for both language versions of the course. Knowledge of TypeScript is NOT needed for the TypeScript version.

  1. Overview of ASP.NET Core
    1. .NET Core SDK
      1. Installation
      2. Version Management
      3. Command-Line Interface (CLI)
      4. Hello World Application
      5. Using Visual Studio Code for C# Coding
      6. Optional: Using Visual Studio 2019 for C# Coding
      7. Optional: Using Visual Studio for Mac for C# Coding
    2. ASP.NET Core Application Architecture
      1. NuGet Packages and Metapackages
      2. Application Startup
      3. Hosting Environments
      4. Middleware and the Request Processing Pipeline
      5. Services and Dependency Injection
    3. Application Configuration
      1. Configure and ConfigureServices
      2. Configuration Providers and Sources
      3. Configuration API
      4. Options Pattern
      5. HTTPS, GDPR, and HTTP/2
    4. Request Routing
      1. RESTful Services
      2. Endpoint Routing
      3. Attribute-Based Routing
      4. Route Templates
      5. Route Constraints
    5. Models
      1. Persistence Ignorance
      2. Object-Relational Mapping
      3. Entity Framework (EF) Core
      4. Automapper
    6. Controllers
      1. Responsibilities
      2. Requirements and Conventions
      3. Dependencies
      4. Action Results
    7. Web APIs
      1. Introduction
      2. CRUD Operations
      3. Bad Requests
      4. Cross-Origin Resource Sharing (CORS)
    8. Application State
      1. Client-Side vs. Server-Side
      2. HttpContext.Items
      3. Session State
    9. Error Handling
      1. Best Practices
      2. HTTP Error Status Codes
      3. Code Pages
      4. Developer Exception Page
      5. Exception Filters
    10. Logging
      1. Configuration
      2. ILogger
      3. Serilog and Seq
    11. k. Testing
      1. Unit Testing
      2. xUnit
      3. Testing Controllers
      4. Integration Testing
  2. Introduction to React and Redux
    1. Introduction
      1. What is React?

      2. What problem does React solve?

      3. Development Ecosystem

      4. React versus other frameworks
    2. Development Tools
      1. Create React App project generator
      2. React Developer Tools
      3. Running and Debugging a React Application
      4. Role of Node.js
      5. Purpose of React and ReactDOM
    3. Functional Components
      1. What are Components?
      2. Create Element and JSX
      3. Benefits of JSX
      4. Fragments
      5. JavaScript Arrow Functions
      6. ES2015 Modules
      7. JSX and Expressions
      8. Displaying Collections of Data
      9. JavaScript Array Maps and React Keys
      10. Passing Data with Props
      11. Validating Props with PropTypes
      12. Default Props
      13. Using Memo
    4. Class-Based Components
      1. JavaScript Classes and Extends
      2. Configuring State
      3. Methods
      4. Google Performance Tool
      5. Context of Event Handlers
      6. Class Properties and Class Arrow Functions
      7. PropTypes and Default Props on Classes
    5. Hooks
      1. Overview of Hooks
      2. State Hook
      3. Effect Hook
      4. Ref Hook
      5. Callback Hook
    6. Advanced Components
      1. Composition vs. Inheritance
      2. Patterns: Specialization, Containment, and Higher Order Components
      3. Lifting State Up
      4. Forwarding Refs
      5. Context
    7. Redux
      1. Managing Application State
      2. Three Principles of Redux
      3. Pure Functions
      4. Reducer Functions
      5. Composing Reducer Functions
      6. Dispatching Actions
      7. Action Creators
    8. Connect React to Redux
      1. Connect React to Redux with React-Redux
      2. React-Redux Higher Order Components
      3. React-Redux Hooks
      4. Using State Selectors
      5. Optimizing State Selectors
    9. Connect React to ASP.NET Core REST API
      1. JavaScript Review: Callbacks, Promises & Async/Await
      2. Using the Fetch API with ASP.NET Core REST API
      3. Asynchronous Operations and React/Redux using Saga
      4. Generators
      5. Sagas Helpers
      6. Declarative Effects
      7. Error Handling
      8. Connecting to Redux
    10. Unit Testing
      1. Using Jest
      2. Organizing Tests and Test Suites
      3. Setup and Teardown of Tests
      4. Performing Assertions with Expect
      5. Using Spies
      6. Snapshot Testing
      7. DOM Testing
      8. Shallow Testing
      9. Generating Code Coverage Reports
      10. React Unit Testing
      11. Redux Unit Testing
  3. Applied .NET Core & React/Redux
    1. React Router
      1. What is routing?
      2. URL as State
      3. React Router Hooks
      4. Configuring Routes
      5. Page Pattern
      6. Error Page
      7. Redirects
      8. Animated Transitions
      9. Nested Routes
    2. Advanced Forms
      1. What is Formik?
      2. Challenges with React and Forms
      3. Formik Higher Order Components
      4. Formik Hooks
      5. Form-Level Validation
      6. Field-Level Validation
      7. Synchronous and Asynchronous Validation
      8. Form Submission
      9. Form Submission Phases
    3. Authentication
      1. Introduction
      2. ASP.NET Core Identity
      3. Cookie Middleware
      4. Authorization
      5. Claims-Based Authorization
      6. React Login Form
      7. Login Error Handling
      8. Integrating Authorization with Routing
  4. Conclusion
Scroll to Top