Up next in 10
Build Laravel 12 React Project from SCRATCH in 2025! | Part 6
0 views
Apr 26, 2025
Build Laravel 12 React Project from SCRATCH in 2025! | Part 6 Learn how to build a full-stack web application using Laravel 12 and React from scratch in 2025! In this tutorial, we'll take you through a step-by-step process of setting up a new Laravel 12 project and integrating it with a React frontend. We'll cover everything from installing the required dependencies to creating a functional CRUD application. Whether you're a beginner or an experienced developer, this video is perfect for anyone looking to learn how to build a modern web application using the latest technologies. So, let's get started and build a Laravel 12 React project from scratch in 2025! #react#reacttutorial#laravel12#laraveltutorial
View Video Transcript
0:00
hi friends welcome to tutors for the
0:02
channel So far we cover about the basics
0:05
part
0:06
Uh from today onwards we are going to
0:10
cover about
0:12
the
0:13
control Okay Control is a standard one
0:17
Okay Control is a part where which
0:18
manage the entire project This is
0:21
controlled by the entire project It's
0:23
called as control How the control look
0:25
like this This way This how the control
0:27
look like Okay So you can see the
0:30
controller is decided on inside the app
0:32
folder this app
0:33
folder inside the folder there's http
0:36
inside the http there's a this is the
0:39
larable folder architecture you already
0:41
know what is the folder architecture of
0:43
lar there's a folder inside that folder
0:46
http there is a control inside the
0:48
controller folder there is a file
0:51
controller control file all the
0:53
controller files are managed inside this
0:55
folder controller folder this control
0:57
folder has This simple class this class
1:01
controller name it's extend controller
1:03
Okay this is a controller This class
1:06
extend the controller class Okay this
1:09
controller class we have a public uh
1:11
public function index Okay we have
1:13
created the function This return to the
1:16
method Okay so in our last class we
1:19
directly we have called the routes
1:21
routes and we have to redirect redirect
1:24
to the page Now we are not doing like
1:26
that way we have to sending to the
1:28
controller Route is a part which sending
1:31
to the controller Controller is the part
1:33
where which will be manage the all the
1:36
URLs
1:37
Okay Now you can see the class welcome
1:40
controller Okay So when the request is
1:42
coming it's it is saying to the index
1:45
method What is return in the index
1:46
method It return the view Okay This is
1:49
the architecture of simple controller
1:52
Control is which is a class This class
1:54
has one function which means in index
1:57
function index function what you have
1:59
written is return view welcome Okay What
2:03
is what you have written in this inside
2:05
this function it is react as what you
2:08
inside that function it is react it
2:10
react what you are written inside a
2:12
function Okay Now let's moving to
2:16
the now what you're going to see here
2:19
This is your folder Okay This is a
2:22
folder We have a app inside the folder
2:24
the controller This is the controller
2:26
Now what you're going to do is I'm going
2:27
to go to create a new controller So you
2:30
have to click on this part plus simple
2:31
This already your project is running on
2:34
Okay So the running instead of stopping
2:37
the project you have to open up another
2:38
terminal
2:39
window You open the terminal window here
2:42
This is running project It's a terminal
2:43
Click on this here You can manage the
2:45
tabs look like
2:47
this Okay Now simply how to create the
2:51
controller You don't think about simply
2:53
you type on Google
2:56
L This is L project
3:01
Now click on
3:03
this This is the
3:06
controller This everything they explain
3:08
how to create the this is this how they
3:11
have create the controller FL This how
3:13
we have create the you have to implement
3:15
the controller You can see the implement
3:16
the controller This how we have do the
3:20
managing the path Okay So you have
3:22
create the manage part Okay So you have
3:23
t Okay So what I did I'm going to do the
3:26
thing is so first I'm going to go to do
3:29
the things which I put in the
3:32
documentation So what I do here is first
3:35
I'm going to go to create a controller
3:37
So how to create the controller You have
3:39
to copy this this command If you copy
3:42
and paste it otherwise you can click the
3:43
clipboard go here right click and I'm
3:47
going to create the control which
3:49
is you have to create the control based
3:52
on our project the user controls default
3:54
they are giving the name you have to
3:56
create the control based on our name
3:58
what is the control we have created we
3:59
have a uh various pages okay so that we
4:03
have created various pages so we have to
4:05
create the about contacts etc so I about
4:10
control press enter
4:13
key again I'm going to get another
4:16
control contact okay you have to get the
4:20
coding
4:21
okay
4:24
percentage okay now you can see that
4:26
controller the two different controllers
4:28
has been created about controller and
4:31
cut fine now you have created controller
4:34
fine click on this here this is the
4:37
controller loop
4:40
inside the controller you can see the
4:42
about controller extend the controller
4:44
class this control class this control
4:45
class is extended okay so what I going
4:49
to do is now I'm going to implement that
4:52
how the return is working so we have to
4:54
make this one how they using this models
4:58
we have called about later on so the
5:00
controller so we are the name this is
5:02
already there they implemented the view
5:05
this this is it reside on the eliminate
5:07
view this one copy I paste on it over
5:10
here okay so that when you return to the
5:13
view this this one we have to call it
5:15
that's how they are implemented in lar
5:18
okay uh use eliminate view web view okay
5:21
after that what I'm going to do this so
5:23
that second one separate function this
5:26
function I just copied and post paste on
5:29
it over here instead of writing so the
5:32
documentation is there you just copy and
5:34
first is don't this one need not this
5:37
name all the things So then this all
5:38
things we have to get rid of this here
5:40
What is the name We have a index
5:42
function You just put it index function
5:44
as you saw Keep view this later standard
5:47
So return to the view which view I have
5:49
to return these all things we have to
5:51
get rid of
5:52
this Okay So return the view as the
5:55
document welcome So the welcome
6:00
to welcome in BC
6:04
So
6:05
welcome just keep the name on
6:07
welcome when the request is coming Okay
6:10
so that we have to understand the flow
6:12
So here this flow when the request is
6:15
coming / what happen is we have to go to
6:17
the which one this one we have write and
6:21
go below we have take the documentation
6:23
here This document is here this copy
6:27
paste on it over here when the you can
6:29
just see when C / which controller you
6:33
have to
6:34
go you go which controller uh I haven't
6:38
give the name of that controller so you
6:40
have to write again I'm going to create
6:42
a controller which is a welcome
6:45
controller welcome
6:47
controller a welcome controller so this
6:50
not the welcome controller I just cut
6:53
this code paste on it in welcome
6:56
controller So that after that the second
6:59
one this one this one also just copy it
7:01
and paste on it Okay So that welcome
7:05
controller So what to do
7:08
that routes we are telling that when the
7:11
when the request come slash it goes to
7:14
the welcome instead of writing like this
7:17
we have to we have to write like this So
7:20
we are what I'm going to erase here this
7:22
one this function all things are we just
7:24
get rid of this okay we don't need them
7:26
at the moment we only do the thing is
7:29
like this way it goes to when the
7:31
request is coming slash inside say the
7:34
back we have to call this controller
7:36
welcome controller right click and
7:38
rename CD to copy and paste on it over
7:42
here dot
7:46
class show you write The thing is
7:52
index Okay that's it
7:57
Index Index Okay so we have a when the
8:01
request is coming slash It's call the
8:03
welcome controller index action method
8:06
First we have a tell them when the
8:08
request is coming slash It's called the
8:09
welcome controller index action method
8:12
So we have tell them where your welcome
8:15
controller resided So again you have go
8:18
to the documentation this the first one
8:20
just copy
8:21
it past it over here copy this welcome
8:25
you paste on it here your welcome beside
8:28
on inside the app folder http controller
8:31
your welcome that's
8:33
it okay now this one we don't need them
8:37
now let's check on it whether it's
8:38
working fine or not save
8:41
all bring back to the application and
8:43
check on it whether it's working fine or
8:45
not whether is and slash it's working
8:49
It's working Okay When the request is
8:52
slash the welcome
8:55
controller index action method So we go
8:57
to the welcome controller It's a welcome
9:00
controller index action method What we
9:01
are written here go to that particular
9:04
page Okay The same thing we have do the
9:07
same thing You just copy
9:09
this paste on about also also Well here
9:12
this one should be there you write about
9:16
controller that is about
9:20
page Okay The same thing here contact
9:24
also a contact
9:28
controller The contact controller
9:30
contact action method is the contact
9:34
page This one match with this this this
9:38
same name The contact it should be
9:40
matches this about should match the same
9:43
about that's it now let's go to the
9:47
routes and check it back again when the
9:49
request is coming about
9:53
us okay so about us so about
9:57
us let's go to the about page instead of
10:00
that you have to write what is this you
10:02
have to this first one you have to give
10:03
the path control copyr to paste over
10:06
here this one about
10:11
controller is contact control Okay After
10:15
that we are the request about return to
10:18
this page
10:27
return That's this one So the about
10:31
controller again we have to go to
10:45
here Copy
10:47
this paste on it over here This one
10:49
should be the contact controller This is
10:52
the about action
10:54
method This is the contact action method
10:58
I simply I show you the example very
11:01
simple to implement the example of this
11:04
table Now it goes to when the slash is
11:08
coming it goes to
11:10
here Okay
11:13
When the slash is
11:15
coming contact/ contact the contact
11:18
controller contact action method contact
11:19
controller contact action what you have
11:22
written here it's a return view contact
11:24
mean the return view contact it open
11:26
this one when the return is coming the
11:29
about it go to the return that about it
11:32
return the
11:33
about let's save all everything now
11:37
return back to the application and check
11:39
let's refresh it about it's working
11:42
contact It's working here What's the
11:45
problem Is any problem It will be
11:48
showing the problem Look this uh contact
11:51
controller contact return must be type
11:54
of what What What the problem
12:00
Contact Let's go back What's the problem
12:04
Okay The problem What happened is here
12:07
the view This one we not call it here
12:10
The view Okay So let's the view we have
12:12
to get rid of this it's working or not
12:14
let's
12:15
check sometime it's work without that
12:17
view that call we are not
12:20
calling it's working without that one
12:22
also this
12:24
working okay then laral 10 you tell them
12:28
to the view part you tell them to
12:31
implement this one this view just copy
12:33
it put it over
12:36
here about also this put it here this is
12:39
the the mention the standard the way
12:42
okay without this we also that tell them
12:45
this is a standard to do it so that we
12:48
have put it here okay now it's
12:53
working okay every time you go to the
12:56
documentation this is official
12:57
documentation they are released but they
12:59
telling that official documentation that
13:02
is the things we have do the program
13:04
efficient way okay rather than go to the
13:07
tutorials we have to go to the
13:09
documentation
13:12
Okay thank you for watching
#Computer Education
#Programming
#Training & Certification