You can't make sense of React.js and ASP.NET Core

These days it seems you're expected to know javascript as an ASP.NET developer.

It's not enough to know your way around C#, MVC or Razor Pages. If you don't "get" javascript you're destined to to sit on the sidelines, watching from afar as all the best (and best paid) jobs go to someone else.

But boy does javascript like to make things difficult for you. It's not just the language (with its endless peculiarities and gotchas) but the entire ecosystem...

Can it be true, to get even the simplest React feature up and running, you need to learn webpack, state management, node/npm, even Typescript?

And that's just the frontend.

Sprinkle in some API concerns like dependency injection, ORMs, REST and it's hard to see how anyone ever gets anything built!

It's maddening because you want to enjoy full-stack development; you want to spend your days seeing features spring into life in your browser, but instead you find yourself spending hours, days, even weeks trying to wrap your head round endless js frameworks and terminology; wrestling with the frontend "ecosystem".

It's not just you

The frontend ecosystem IS over-complicated but there are ways to make life easier for yourself; to sideline the endless complexity so you can focus on building your features.

Although React feels a bit alien on first glance, once you grasp two or three key core concepts, everything clicks into place.

Learn the basics and you'll suddenly find yourself able to calmly and confidently build any feature that comes your way.

Imagine that; being the developer in the office who embraces new feature requests instead of trying to dive out of sight every time the product owner walks towards you!

Practical React + ASP.NET Core Web API will fast-track your React + Web API journey.

• Learn the fundamental building blocks of ASP.NET Core Web API and React.js
• Discover the simplest way to deconstruct features and build them, one React.js component at a time
• Discover a time (and sanity) saving approach for quickly building up an ASP.NET Core Web API so you can glide, effortlessly from one feature to the next

All you need is a few hours

Let's face it, online courses are a mixed affair.

Sometimes they rush you through all the basics at breakneck speed, quickly ramping up the complexity and leaving you trailing in their dust.

Other times you sit down to watch the course, full of expectation and anticipation, only for it to slowly dawn on you that each video is an interminable slog through endless, tedious details and generalizations, never quite getting to the point.

Practical React.js and ASP.NET Core tackles both these problems;

• 39 bite-sized videos; short, concise and to the point
• Simplified explanations for core concepts (like React State and Dependency Injection)
• Practice exercises to really ram home everything you'll learn

By the end of the course you'll be able to...

• Take any feature all the way from idea to fully working implementation using ASP.NET Core and React.js
• Reliably break features down into smaller components in order to build them as quickly and simply as possible
• Create a fully-functional ASP.NET Core Web API backend
• Build an API that is easily extended and adapted as requirements change
• Integrate your API with third party systems (e.g. Stripe)
• Secure your Web API
• Configure authentication for any React.js application (and talk to an ASP.NET Core backend)

Here's what you'll learn

Prototype the frontend using React.js

Starting is the hardest part so we'll quickly build up the first few components that make up the front-end of our online store.

You'll see how to use hard-coded data in your React components and bring in bootstrap markup to make everything look respectable!

Finish this module and you'll be able to:

• Write JSX markup
• Create components using javascript classes
• Understand how class components and function components differ in React
• Import and export modules in your javascript applications
• Use React state to drive your components UI
• Refactor your React components

 

---

Hook it up to an ASP.NET Core backend

We'll switch gears and spin up an ASP.NET Core Web API to power our application.

ASP.NET Core is a super-fast and reliable platform for building your API.

You can quickly get something to work using hard-coded data, before eventually pushing that data into a database.

By the end of this module you'll be able to:

• Create web API endpoints using controllers and actions
• Quickly get something up and running without a database (rapid prototyping)
• Make network calls from your React components to your API and bind them to the data that comes back

 

---

Making it real (databases and EF Core)

We can only ignore reality for so long!

It's time to bring in a real database using EF Core.

EF Core is a good starting point for data access.

You can define the models (entities) you want to represent in your application (things like people, shopping carts, products etc.) and use these models to build out the database.

By the end of this module you'll be able to:

• Add EF Core to an existing project
• Introduce Models into your application to represent your key domain entities
• Generate migrations and update your database as you add more entities to your project

 

---

Implement a shopping cart

Time to take everything you've learned so far and put it to good use; you'll build new components to let your hypothetical customers add items to their cart.

You'll be able to:

• Use sessionId to store data "in the browser"
• Refactor your backend code as it starts to creep up in complexity
• Push business logic down into your domain entities
• Write tests to check your business logic works as you expect
• Use React state to improve the experience for your users

 

View cart and checkout

"Integrating with third parties is always fun" (said no-one, ever!)

We can only go so far without accepting payment; in this module we'll give users a way to view their cart and (crucially) checkout via integration with Stripe.

You'll be able to:

• Implement forms in React to capture details such as addresses
• Integrate with Stripe for taking payments
• Unit test the backend code without having to hit "real" systems e.g. Stripe

 

---

Auth

Agghhh Auth!

We can't ignore it any longer; time to do the simplest thing possible to let users register on our site and then checkout as a registered user.

You'll be able to:

• Set up integration using Auth0
• Redirect users to login via your Auth server
• Conditionally show or hide content in your React app for each user

 

---

The Complete Course

Everything you need to take your ideas and build them using React.js and ASP.NET Core.

39 practical step-by-step videos so you can see precisely how to build a React.js and ASP.NET Core application, plus 14+ comprehensive core concept explanation pages and multiple practice features to help cement everything you'll learn.

Help and support if you get stuck.

Full source code so you can see how your code compares to mine and check anything you're unclear about.

Instant access to the entire course.