Add a example to intergrate a framework as React

[iJoris]

I think it would be interesting to add a example that also uses a framework like React.

[Eptagone]

Hi, do you want to use React to render additional elements in a MPA? If that's so, I could add some special examples with React, SolidJs, Stimulus and other frameworks like those. Or you want to create a SPA? SPAs don't need this kind of library. This project is mainly for MPA like apps.

[iJoris]

My idea was to create a combination between razor and a React-powered page. So a specific razor page would render a react page.

[Deepfreezed]

Yes, that kind of an example would be great. MPA with different Razor pages containing independent React App Modules. Issue will be how to handle a CSS library like Tailwind. Vite will need to know how to build those CSS files. CSS files between Razor template and React will clash.

[Eptagone]

Hi, i just added an example with React and another with solid: 4a2a47a31e6cdf471ab25f4f442ece3dca277941 React required an additional script to make react-refresh to work.

[Deepfreezed]

Thank you for adding this. Looks like ASP.NET + React + Vite + Tailwind is working with this scenario for MPA. In my scenario, I have React App in Razor pages. Tailwind is bundled to one 'main.css'.

[PASMarcus]

Thank you for adding this. Looks like ASP.NET + React + Vite + Tailwind is working with this scenario for MPA. In my scenario, I have React App in Razor pages. Tailwind is bundled to one 'main.css'.

I'm curious how you implemented react in your razor pages. I'm new to react+vite and not sure about the best way to implement it in different pages since vite compiles everything into one big main.js file so you can only reference the same file in every page. Right now I'm putting several if-statements in main.tsx to render different components depending on the page, like if getElementById("app") exists then render this or else if getElementById("app2") exists then render that, but it feels really messy putting in if's like that.

[Deepfreezed]

Followed this article: Link

In vite config rollupOptions, point to your React modules like below:

vite.config.ts

...
rollupOptions: {
                input: {
                    main: 'Assets/main.js',
                    aspnet_validation: 'Assets/aspnet_validation.js',
                    myreactapp1: Assets/ClientModules/MyApp1/myapp1-main.jsx,
                    myreactapp2: Assets/ClientModules/MyApp2/myapp2-main.jsx,
                },
...

Tell tailwind to look into folders like below:

tailwind.config.js

module.exports = {
    content: [
        './Pages/**/*.cshtml',
        './Views/**/*.cshtml',
        './Areas/**/*.cshtml',
        './Assets/ClientModules/**/*.{js,ts,jsx,tsx}',
        '!./Assets/ClientModules/**/dist/**/*.{js,ts,jsx,tsx}',
    ],

[PASMarcus]

Didn't know you could specify multiple files in rollupOptions which is a more elegant solution, thanks! Output filenames seems to be automatically the same as the inputs too.

[Eptagone]

I'm closing this as completed. If there are more questions about integration with React, you can open a new discussion about it.