In the last few lessons, we've started to feel sort of left to our own devices when doing data fetching and trying to synchronize remote states. And we sort of did a sloppy and incomplete job and through it all I kept saying in real world you would use a library and well it's true, But hey, don't blame me. Take a look at the React docs from the homepage. If we click on Learn, React, installation and creating a React app,

If we click on Learn, react, installation and creating a React app, the first paragraph tells us if you want to build a new app or website with React, we recommend starting with the framework and it even follows up that if you just want to learn the basics of React, which is sort of what we've done, you can build an app from scratch. Now I'll scroll to the bottom of this page and you can see that here they do mention

Now I'll scroll to the bottom of this page and you can see that here they do mention that starting from scratch gives you more flexibility, but you need to make choices on what to use for routing, data fetching and other common usage patterns. And it is clearly aligned with what we've been struggling with in the last few lessons. You can make it work because technically React has all the primitives to allow you to do so,

because technically React has all the primitives to allow you to do so, but to React itself, the library is not going to recommend some patterns or approach or give you tools to do things like data fetching, routing and so on. So let's take a look at the frameworks that React recommends. The first one being Next.js. So Next.js is by far the biggest React framework,

The first one being next.js. So Next.js is by far the biggest React framework, the biggest ecosystem I would say in the meta frameworks around React. It's really powerful and really good. It's going to give you things like routing, static generation, dynamic generation on demand per page basis. It has a huge ecosystem of tools around the community and also at the moment it's probably one

It has a huge ecosystem of tools around the community and also at the moment it's probably one of the most complete implementations of React server components that we haven't even talked about. But basically they'll let you run React code on the server so you can do stuff like fetching data from the database directly and then render and send HTML over the wire. Alright, another very good option is React Router v7 formally Remix.

Alright, another very good option is React Router V seven formally Remix. And I'd say the biggest difference here with Next is React Router can be just the routing part if you need it. And it can be extended to a full stack framework if you add the V plugin. Other than that React Router leans heavily into the web standards rather than doing its own magic like Next.js tends to do.

standards rather than doing its own magic like next J tends to do. So as you learn React Router, you feel like you're learning the web platform, which is pretty cool. All right, let's keep going. Uh, expo is for native mobile apps. Uh, if you wanna use React Native, pretty cool stuff and otherwise in other frameworks, uh, I've mentioned 10 Stack Query to do data fetching

otherwise in other frameworks, uh, I've mentioned 10Stack Query to do data fetching and query invalidation and that sort of stuff. Well 10Stack is a whole ecosystem. It has 10Stack Router which is going to give you well routing. And then 10Stack Start is basically the full stack framework solution that takes the best part of the routing and query engines and then packages it up in the modern robust, really,

and query engines and then packages it up in the modern robust, really, really cool type safe end-to-end uh, full stack framework with React 10. Stack Start is currently in beta but a lot of noise and traction is behind it and I would definitely keep an eye on this one. And you can see here on the left all the different tools in the 10 Stack ecosystem. There's a form solution form helper

different tools in the 10Stack ecosystem. There's a form solution form helper as well that's really cool. As you can see, it's not React specific. The router supports solid, the 10StackQuery supports solid views failed Angular. And so these tools from 10Stack don't focus just on React, but more on the sort of problem spaces that you face when building modern frontend applications. Things like a synchronous state management

that you face when building modern frontend applications. Things like a synchronous state management routing, et cetera. You can use all these tools and frameworks we've just mentioned and still hit a label API endpoint but with a lot more robustness. But unless you have a real reason to want to decouple your frontend from your backend, you should take a look at Inertia.

to decouple your frontend from your backend, you should take a look at Inertia. Inertia is going to be the glue between your Laravel backend and your React frontend, but it's going to let you build single page applications with the simplicity of a good old monolithic approach. Matter of fact, I've also built a version of this dev pops app with Laravel Inertia and React. So it has the same single page app feel and look to it where everything is super snappy.

So it has the same single page app feel and look to it where everything is super snappy and you can do interactions with the database. And if I refresh this, this is persisted to the database and there's even a few more features here like this pagination. Of course I can also create wolfie wolfs a lot pup and then I can add it and whoops, I might need to change this because it got added to the first place up here at the top,

and whoops, I might need to change this because it got added to the first place up here at the top, but you can see that it's here and I can like it and it's gonna get added. And would you believe every puppy has its own page? Because we have multiple routes and so everything is feeling and behaving like a single page app because it is. I like that you can see that each pup has an owner, a User, and I've added a like scan. So here there's four Users that like this pup owned.

and I've added a like scan. So here there's four Users that like this pup owned by Alex, which is my daughter. Oh, here's another cool thing I wanna show you. The search filtering here is wired up with the database. So if I search for loves, you can see that now it has filtered out to only the puppies that have the word loves in their trait. And you may have noticed that as I was typing, the search wasn't firing.

And you may have noticed that as I was typing, the search wasn't firing. So as long as I'm typing or deleting characters, nothing happens and it's because I have de bounced the search query because I don't want to fire a fetch request on every keystroke like that. There's a 300 millisecond db bounce going. Mind you, I'm still relatively new to Laravel and Inertia, but I feel like I could build this app.

Mind you, I'm still relatively new to Laravel and Inertia, but I feel like I could build this app really out of intuition. It feels super easy. So for example, let's take a look at how the form is implemented here. So in the sidebar you can see it's a typical level application and then I have my React components here. So the new puppy form is actually using a form helper from Inertia.

So the new puppy form is actually using a form helper from Inertia. So we have this useForm hook provided by Inertia and you can see it's giving me tools like the processing status or maybe the errors that are happening in the form, uh, et cetera. I can reset the form. I have the exact same form that I had uh, in the other application. And the action here is addPuppy.

in the other application. And the action here is addPuppy. All it does is post the form to the /puppy endpoint and unsuccess we reset the form. And then if I look in the web.php routes, the /puppy post route is here, it's doing the same thing that we were doing before, validating the form, attaching it to the logged in User, saving the form, and then it returns back. And so unsuccess, the data is refreshed.

and then it returns back. And so unsuccess, the data is refreshed and with preserve scroll, we stay in the same position. Super cool stuff. And I mentioned that we had this errors object. The thing we try to do in the previous lesson is pretty much this. We have an errors object and if there's a name properly, it's going to display the error.

and if there's a name properly, it's going to display the error. And same with the trait. So the fields are not marked required here, which means I can try to submit the form and you can see that the error messages are gonna show up, but as soon as there's some data in one of them, the error message is gonna go away. The form is not reset unless I want to and I do manually. Like you saw here on success, if you are already good

The form is not reset unless I want to and I do manually. Like you saw here on success, if you are already good with Laravel and you wanna pair it with React, Inertia makes things super easy. Definitely beats wrangling with API endpoints, cause issues and so on. All right, and with that my friends, you've reached the end of the course. I hope you enjoyed the time we spent together, that you feel leveled up with React.

I hope you enjoyed the time we spent together, that you feel leveled up with React and I can't wait to see what you're going to build with it. Please hit me up in the comments if you have questions and until next time, go forth and react. See ya.