Dive into Inertia.js, Laravel Breeze's new, powerful React framework and see how it stacks up against Next.js and Gatsby.
Recently, the Laravel team made it easy to set up a React stack with just one command, making Laravel a viable full-stack React framework.
Madness, you say? Well, what makes Next.js and other similar React frameworks so great?
They’re great because they allow for better server-side rendering, routing, authentication, state management, and session management, to say the least.
In this article, we’ll show you why Laravel Breeze’s Inertia-React stack is so much better and easier to use than Next or Gatsby. Even though this is about Laravel’s suitability as a React framework, many of these points can be understood in a Vue or Svelte context, too!
#inertiajs #nextjs #gatsby #react #laravel
In this Laravel 8 application, we are going to create a bookmark application. We will start right from installing Laravel, then setting the front end with React JS, Inertia JS and Typescript.
We will then look at how we can fetch OG information from a link using a composer package. And then finally, we will also see how to setup Laravel for production. We will install all required software on a clean Linux server, setup Nginx, PHP and MySQL. Configure each of them based on the requirement and then map a domain to our server and run our application.
#react #typescript #inertiajs #laravel
In this video, we are going to create the page for add a new expense. We will be using the Expense form to complete the expense add action. We will refactor it a bit so that we can have different form submit for different pages like for Update and for Create. Also, we will see how we can then handle the menu and stuff to complete the entire flow.
#react #typescript #inertiajs #laravel #expense tracker app #add new expense form
In this video we are going to work on the edit form using React JS with Typescript. We will see how we will stitch our form with state using the React useState and then using the inertia js post helper function, we will make the server call and update the record.
Also, we will also look at creating a small component which will allow us to show success message coming from the server using the Laravel flash message function and then using that data inside react component.
for more details and for reference code, refer to the GitHub code link.
In this video, we are going to see how we can setup our layout so that each page can extend that layout and ensure a consistent look and feel.
We will also convert the menu from a PHP based blade component to a React component and then integrate that with our Layout component.
In this video, we are going to look at how we can use the same form that we have created to create expense to show the details of expense for the view and also for edit. We will be looking at using Partials inside blade files to reuse small components and then we will also look at how we can make certain tweaks in our controller to reuse some of the data for our views.
1:26 Configure Pagination of Laravel
2:35 Creating the partial for the Edit form
5:20 What is Route Model binding
26:10 Working on the Edit form
28:30 Validation reuse for Edit
35:30 Handling the delete of an Expense
38:50 Why we will use Inertia JS
Let’s be friends:
In this video, we will be making the layout or views necessary to save hero section data to the database.
Vue 3 dev tools extension link for chrome:
You can also download it from firefox.
Laravel Casting Full Video:
1:00 Create Model, Migration, route, and controller For Settings
5:50 Create the settings menu
8:46 Make Ui to save Hero Information
16:42 Using Api Resource to Pass data to the Ui
23:10 Make our own Textarea Component with v-model support
Laravel 8 with Jetstream
Backend Github repo:
Frontend Github repo: