Giter VIP home page Giter VIP logo

shortall / aspnetcore7-react-template-extended Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 788 KB

The "React and ASP.NET Core (Preview)" .NET project template extended UI using React (TypeScript), React Router, GraphQL API (Apollo client + Codegen + HotCocolate server), Entity Framework

JavaScript 8.90% HTML 5.18% CSS 11.27% C# 38.64% TypeScript 36.01%
apollo apollo-client apollo-codegen efcore graphql hotchocolate react typescript

aspnetcore7-react-template-extended's Introduction

Introduction

This is a solution template that extends the "React and ASP.NET Core (Preview)" .NET 7 template that comes with Visual Studio.

That template sets up the client side under the nice new esproj project type which makes doing the front end from full Visual Studio a bit friendlier.

The front end is based on Create React App with the Webpack Dev Server proxy configured for forward requests on to the .NET Web API

Running the app

Open the solution in Visual Studio, set TemplateApp.FrontEnd and TemplateApp.WebApi as your startup projects and click start.

Whats's been added

Tech changes

Before

  • React (JavaScript)
  • Rest API (Web API)

After

  • React (TypeScript)
  • React Router
  • GraphQL API (Apollo client + Codegen + HotCocolate server)
  • Entity Framework

UI changes

Where as the template at the moment just has a plain page that gets the list of weather forecasts.

BeforeChanges

The UI from the template Blazor app has been added along with client side routing to switch between views.

AfterChanges

CSS Isolation Notes

One of the tricky parts I came across was that in the template Blazor app it showcases the CSS isolation features built into Blazor/Razor. Converting this wasn't entierly straightforward.

Blazor technique

With Blazor CSS isolation if you follow the naming convention

├── MyComponent.razor
├── MyComponent.razor.css

The framework will isolate the css in that file so that it only applies to that component. The way this works is for example in MainLayout.razor is each tag will have a unique attribute for that component added to it in the final compiled markup E.G.

- <div class="page">
-    ...
+ <div class="page" b-45rkf8v3vv="">
+    ...

Then in the corresponding MainLayout.css its content will get altered in the final CSS bundle like so

- .page { 
-   ...
+ .page[b-45rkf8v3vv] { 
+   ...

Create React App technique

Create React App has built in support for something similar - CSS modules. Again there is a naming convention E.G.

├── MyComponent.tsx
├── MyComponent.module.css

Then a slightly different syntax for importing / applying styles in your component. Basically you can import your styles from the stylesheet into an object in your component and then use them like this

return <button className={styles.error}>Error Button</button>;

Which will render as something like

<button class="Button_error_ax7yz">Error Button</button>

However because you are no longer applying the original class name it doesn't play so nicely when you are overriding vendor supplied styles, E.G. Bootstrap's btn class would get replaced and the original style would no longer apply.

The quick fix for this I applied was the CssModuleNameComposer class which will take a list of unadulterated class names and return the className string including any CSS module hashes that have been defined for that class name.

Example Input: ["page"]

Example Output "page Layout_page__M3sKN"

Appendix

Here are the resources I used to help figure this out:

Full-Stack React and .NET with GraphQL

ASP.NET Core Blazor CSS isolation

Create React App - Adding a CSS Modules Stylesheet

aspnetcore7-react-template-extended's People

Contributors

shortall avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.