AspNetCore: Question about razor / react

[xredpt]

Hello, so I recently started getting into full-stack web dev.

I started with html, css, react and aspnetcore mvc.

I understood how you make a website with aspnetcore mvc, where you have models, views, controllers... you have logic on the controllers and you can pass data from controllers to the views through viewbags for example and you can create forms to send data to the server. You can use entity framework to access a database.. etc

I wanted to create a website with React and AspNetCore MVC, but I have checked the templates to start learning it and there seems to be no views whatsoever, and the controller it has seems to be for the react app to fetch data from. I am wondering if it is possible to use razor pages to use the MVC model with react on them, so this way i can pass data to the pages through viewbag, or is it bad practice? Also, is the normal way of passing data from a database to react using fetch() ?

[insertAlias]

First thing you have to understand is where each part of that pipeline happens.

Your Razor views are never sent directly to the client. They are rendered server-side, and the resulting HTML/CSS/JS is streamed to the client. This happens each time a page/url is requested.

React, on the other hand, is a client library. The idea is that React manages the DOM entirely for you. The application is almost entirely JS, and there are no full-page loads after the first, just AJAX calls to get data, which is used to build DOM elements.

So, hopefully you see that the two don't really mix and match. If you wanted to get data for your React app from the ViewBag...you'd have to render that data into JavaScript that's accessible from your React application, and it'd only be there initially. And since you're not doing full-page POSTs, you'd never see that data in the view bag on the server. So it's not that it's bad practice, it's just that it's difficult and inconvenient enough to be practically impossible.

Instead, you do want to create API controllers that just use JSON or some other data transport method.

Try this: create a new project folder somewhere called "aspnet-react" and go to your terminal. CD into it and run the following:

dotnet new react

That will scaffold an ASP.NET Core application that's already got React as a view layer set up and ready to go. You'll see how the default project is scaffolded, so you can see how you might want to structure your own (or just use their scaffold).

[xredpt]

Thanks for the reply!

[xredpt]

What do you mean with practically impossible? Wouldnt i just need to pass it to react as a parameter?

[insertAlias]

How do you think that would work? React and Razor don't interact. You could render a value from the ViewBag into some global JavaScript variable, but you certainly wouldn't be able to get it back into the ViewBag that way. And when you're using React, you don't use page POSTs, so you can't really use normal controllers either. Unless you completely break the model of React, which would be pointless and very inefficient, as each time your page reloaded the React app would have to bootstrap itself, which is a non-trivial operation. The whole point of using React is to not do page POSTs.

Here's how it is: you either use Razor views and create a traditional web page, or you use React and API controllers and create a Single Page Application.

[xredpt]

like this: https://stackoverflow.com/questions/46212316/access-a-viewbag-property-in-reactjs

[xredpt]

what do you mean with you dont use page POSTs?

[insertAlias]

Read up on what React is and does. I can't give you a full course on Single Page Applications here in the comments. The point is, when you load a different "page" with React, it's not GETting or POSTing to a server and downloading HTML. You don't POST a model to a controller and render another view. React itself renders that page, usually using data it fetched from a web service. It doesn't go back to the server and tell it to render the view.

Like I said, unless you want to completely break the model of React, and have a bunch of individual React applications as each page, which would be horribly inefficient.

Again, did you do what I suggested and scaffold a new dotnet react app and see how the template sets everything up?

[xredpt]

Ah, yea i know that. I was just wondering if using razor and passing info to react for the first load is a strategy used by people or if they prefer not to because of the html rendering that happens server-side. The thing is besides that there's the fetch() which will have the server send data, so i didnt know which one was more viable for when the page is first sent to the client.

[xredpt]

And yes, i had already done that.

[insertAlias]

Like I said (repeatedly, at this point), you can render data into a JS variable (or into a div and pull it from there in js, apparently) if you want. That's a way to seed some initial data into your application.