Lecture Notes: Introduction to React and ASP.NET Core

Module Overview

• Objectives:
  • Understand React and ASP.NET Core
  • Prepare development environment
  • Create a sample application

What is React?

• Definition:
  • Library for building user interfaces
  • Complete solution for web, mobile, desktop, and virtual reality applications
• Component Paradigm:
  • Applications divided into small reusable parts (components)
  • Each component can have UI, logic, and specific CSS
• Data Handling:
  • Components can send and receive information
• Supporting Libraries:
  • Libraries available for routing, animations, forms, etc.

Advantages of React

• Progressive:
  • Can be adopted incrementally in existing applications
  • Example: Modernizing a jQuery site step-by-step
• Flexibility:
  • No assumptions about tools used (HTTP requests, routing, etc.)
• Backed by Facebook:
  • Ongoing support and updates due to usage in production environments
• Efficiency:
  • Utilizes virtual DOM for fast UI updates
• Community Support:
  • Large community for troubleshooting and resources
• Salary Potential:
  • High average salaries for React developers

What is ASP.NET Core?

• Evolution of ASP.NET Framework:
  • Designed for cloud-ready web applications
  • Cross-platform (Windows, Linux, macOS)
• Performance:
  • High performance suitable for demanding environments
  • Supports horizontal (more servers) and vertical (better server specs) scaling
• Testing and Development:
  • Easy testing with built-in dependency injection

Choosing Between .NET Core and .NET Framework

• Prefer .NET Core for new developments:
  • Microservices, Docker containers, multi-platform needs
• Use .NET Framework if:
  • Technology not supported by .NET Core
  • Need Windows-specific APIs or functionalities not available in .NET Core

Setting Up the Development Environment

1. Installing Node.js:

   • Allows running JavaScript and using npm for managing libraries
   • Download from nodejs.org (LTS version recommended)
   • Verify installation via command line: node --version

2. Working with React:

   • Add React to an existing website or create a new application
   • Use the command: npx create-react-app <app-name>

3. Installing Visual Studio:

   • Download from visualstudio.microsoft.com
   • Choose Community Edition for .NET development
   • Install ASP.NET and web development workload
   • Verify installation via command line: dotnet --version

4. Installing Visual Studio Code:

   • Lightweight text editor for various technologies
   • Download from visualstudio.microsoft.com
   • Install recommended extensions: Angular Language Service, C# extension
   • Verify .NET installation in VS Code terminal: dotnet --version

Conclusion

• Overview of React and ASP.NET Core as essential technologies
• Preparation for building applications in the course
• Emphasis on the importance of setting up the right development environment.