React Tutorial

React Tutorial

1629275879

Inertia.js vs Next.js vs Gatsby: Choosing Your Next React Framework

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 

Inertia.js vs Next.js vs Gatsby: Choosing Your Next React Framework
Eva  Murphy

Eva Murphy

1625878920

Laravel 8 Bookmark app with React, InertiaJS & Typescript with OG data for link share

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.

Code: https://github.com/amitavdevzone/bookmark-app

#laravel 8 #react #inertiajs #typescript #og #javascript

Laravel 8 Bookmark app with React, InertiaJS & Typescript with OG data for link share
Eva  Murphy

Eva Murphy

1625864160

Expense Tracker App | Add New Expense form - 10

#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.

Code: https://github.com/amitavdevzone/expense-tracker/tree/video_10

#react #typescript #inertiajs #laravel #expense tracker app #add new expense form

Expense Tracker App | Add New Expense form - 10
Eva  Murphy

Eva Murphy

1625860500

Expense Tracker App | Edit Expense form in React JS | Save and Edit with Inertia JS - 9

#reactjs #laravel #inertiajs #typescript #javascript

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.
https://github.com/amitavdevzone/expense-tracker/tree/video_9

#reactjs #laravel #inertiajs #typescript #javascript #expense tracker app

Expense Tracker App | Edit Expense form in React JS | Save and Edit with Inertia JS - 9
Eva  Murphy

Eva Murphy

1625849460

Laravel 8 Tutorial | Expense Tracker: React Layout, Menu and Set Up The Front End - 6

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.

#laravel #laravel 8 #react #front end #javascript #inertiajs

Laravel 8 Tutorial | Expense Tracker: React Layout, Menu and Set Up The Front End - 6
Eva  Murphy

Eva Murphy

1625842080

Laravel 8 Tutorial | Expense Tracker: Handling Edit, Delete and Cool Tips - 4

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.

Code: https://github.com/amitavdevzone/expense-tracker/tree/video_4

0:00 Introduction
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

#laravel 8 #tracker #inertiajs #javascript

Laravel 8 Tutorial | Expense Tracker: Handling Edit, Delete and Cool Tips - 4
Polly  Connelly

Polly Connelly

1625768400

Making Things Dynamic, Preparing Layout To Save Hero Section Data To Database Part 11

Let’s be friends:
https://www.instagram.com/aashish_dhamala/

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:
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en
You can also download it from firefox.

Laravel Casting Full Video:
https://www.youtube.com/watch?v=rie3Ot7C1Ek

0:00 Introduction
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

Tech stack:
Laravel 8 with Jetstream
InertiaJs
Vue js
Tailwindcss

Backend Github repo:
https://github.com/Laratipsofficial/blog-backend

Frontend Github repo:
https://github.com/Laratipsofficial/blog-frontend

#inertiajs #vue

Making Things Dynamic, Preparing Layout To Save Hero Section Data To Database Part 11