Build Laravel 12 React Project from SCRATCH in 2025! | Part 4
3K views
Apr 23, 2025
Build Laravel 12 React Project from SCRATCH in 2025! | Part 4 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 tasers funny
0:02
channel in our last video in Laravel we
0:06
have stopped in here okay so we have a
0:09
different pages we have created about
0:11
page uh contact page and everything we
0:15
have shown okay now we have to going to
0:18
implement the bootstrap into our project
0:20
so how to implement the bootstrap you
0:22
have to go to the respective website
0:23
bootstrap
0:26
uh I I not connected the internet so
0:29
that's
0:31
why we go to the respective website of
0:36
bootstrap so you have to copy these two
0:39
things this is uh this is for your CSS
0:43
this is for JavaScript both files are
0:45
needed some other some some guys are
0:48
copying only bootstrap only by why why
0:50
this uh JS JS is also must because you
0:56
cannot get the response without JS okay
0:59
the JS also must you click on this
1:01
contain inside the head tag of
1:08
uh this
1:10
welcome.plate okay okay welcome this is
1:13
the head the same thing I'm going to go
1:17
to uh sorry I'm going to put this one as
1:19
a layout file the layout file all the
1:21
things that we are doing layout okay the
1:24
layout sorry the welcome page we are not
1:26
doing the welcome page we have to we
1:28
don't need them we have put into this
1:31
layout but this is layout file the
1:32
layout file we have a this is your
1:35
content I already discussed about this
1:37
in our last class this is a content each
1:39
and every pages header and uh footer
1:43
same as it is only the content would be
1:46
changed every pages so so what I'm going
1:49
to do is header what I'm going to do
1:52
this header what I'm going to do is you
1:53
See here I'm going to go
1:55
to uh here I'm going to join in I'm
1:59
going to put it tag open and div t close
2:03
it
2:06
now here we I'm going to do class i've
2:09
got a class view class i've got new
2:11
class okay here I'm going to write
2:29
container okay d class contain you put
2:32
one container so this is the container
2:34
you write the container so you can see
2:36
here the so container so I'm going to go
2:39
to let's copy this i'm going to go to
2:42
jumbo so jumpon is very famous so how to
2:45
implement the jump on your jump
2:52
uh that
2:57
jump you can get the jump button
3:00
uh
3:03
that the documentation just look you can
3:07
jump on
3:09
example so
3:11
Japon
3:16
chamber
3:21
jam so
3:28
jumpable file uh boot
3:31
file so you can click on
3:34
this but this is the your jump button
3:37
here it's look like this that's this
3:39
thing here and this kind of things you
3:41
can see the links uh so as a code we
3:45
have to get a code of that
3:47
one secondary link here copy this what's
3:49
the code they
3:52
implemented uh they whatever code this
3:54
that's a styling they implement styling
3:57
so the
3:58
code for this code I needed so let's
4:02
bring this one so jump
4:04
on okay for the jumper we have to get
4:07
them from this how the look like the
4:10
jumper look like so jumper is very
4:13
simple file we have copy this here
4:15
jumpon example
4:17
here so this look like this okay here
4:20
this is a jumper i just copy
4:23
this
4:25
okay just paste on it so this how we
4:27
have do the real world application okay
4:31
we are not typing everything you have
4:33
just copy paste it we we we having
4:35
knowledge about HTML and CSS then only
4:39
we can do it okay so the content is
4:40
starting here contain is closing here so
4:42
jump on you write primary text rounded
4:46
jump you write this one as a you have to
4:48
give this one as a office uh something
4:52
like that you can do it student
4:54
management system
4:59
management system
5:02
something high school uh library manage
5:15
S to
5:16
save okay so here we have to something
5:19
you have to like uh type it like that
5:21
okay now let's save all this one is a
5:24
layout okay the layout now let's bring
5:26
back to the application and check what
5:28
the application look
5:32
like here something's come okay see it
5:36
is coming here all if you are write some
5:39
description about this about the library
5:41
it's coming this is called as a
5:44
uh which one this jump okay if you are
5:48
not using the container you can see what
5:50
happen without container control save it
5:55
coming enter page
5:56
without okay but this is not efficient
5:59
way that normally we are doing like this
6:03
way okay this is a
6:05
things that is container implement the
6:08
container we have to make it this also
6:10
we have put it put put inside the
6:11
container so uh now you have a idea so
6:15
yeah this one also you have put the do
6:19
class
6:30
right
6:31
this also you paste it as a content
6:35
Control S to save this one all things
6:37
you have to save all bring back to the
6:39
application and check it here it's come
6:42
about us
6:44
okay now you have a good clear idea so
6:47
how the things working okay very simple
6:50
okay so you can see that we have a
6:53
contact us page so contact us page i'm
6:55
going to go to here
6:58
uh you can get both W3 is cool and you
7:01
have to get the codes for here as well
7:03
so I'm going to go to here the contact
7:05
uh form you have type
7:08
form your form here this everything is
7:11
there okay sometimes you have a contact
7:14
form sometimes the contact form is there
7:18
no they only forms are
7:20
there
7:23
for a
7:25
form you just copy this form and put
7:27
into your code and you can change the
7:31
coding okay this is a form you Just copy
7:33
the code click
7:35
on back to the application and here just
7:38
go to your contact blade pg your
7:45
past select this
7:54
one okay you have to create this one
7:56
first
8:00
name you have to write this email is
8:02
there so you have to write email uh we
8:06
note the password instead of the
8:07
password you have type it name here uh I
8:12
hope you have a clear understand uh
8:14
stand of bootstrap and everything so
8:17
this is if you understand the bootstrap
8:18
you can do with this one okay this all
8:21
the things okay so if you are lar if you
8:22
come to the lar the uh HTML CSS you
8:26
having a clear understand then only you
8:27
can make the coding stuff this email
8:30
this email we don't need this one this
8:32
thing okay uh name address and another
8:36
field we have is a uh phone number okay
8:41
you just copy this and we have this one
8:43
tell type is tell okay both of a type is
8:47
tell uh no need of this things we have
8:50
this one as a phone
8:55
number okay that's it okay that's the
8:57
things okay this ID is a email this is
9:01
the
9:02
email yeah this one should be the ID so
9:04
you have to make it this one as a
9:08
name we don't don't we don't have a
9:11
attribute which is a
9:13
name this one should be we have id
9:18
email okay here also we attribute you
9:21
write a name which is a name email this
9:25
is the attribute you write is a
9:28
phone this also the name as
9:34
food you have a clear idea to write this
9:36
one now write this all things you have a
9:38
clear idea then now you can make the
9:40
program okay so let's save all bring
9:43
back to the application and check it
9:45
what
9:47
happened uh what happened so let's
9:53
first contact us here we have a simple
9:58
contact okay this we have make our
10:02
program simple way okay this we have
10:04
make our program so the contact us form
10:06
is will be here here we have did the
10:08
contact us contact us form so contact us
10:10
form you can now you can adjust yourself
10:13
this container here we have write
10:14
another uh put another container here
10:18
you have write this like this here you
10:19
have put another container you have
10:22
write here this
10:25
call MD medium
10:29
uh we need only you feel you want only
10:33
five okay so that it it the size should
10:36
be reduced we don't need that that same
10:38
this this how we we don't need this one
10:41
okay here simply you have to reduce the
10:43
size okay everything we can do it Okay
10:47
every time thanks shall we put this form
10:50
into the align as a center screen so it
10:52
is possible so we have to write it over
10:55
here we have to write this one the flex
10:59
we have to implement the flags we have
11:01
to implement the flags we have to write
11:03
call and we have to implement the flags
11:06
as well flax justify containers contain
11:10
center main alignment as center screen
11:13
you can check it this one
11:15
uh here this one uh okay it's alignment
11:18
as here this one we are final but by
11:21
this one we we have put like this it is
11:24
we have get rid of
11:26
uh class we have put this one there
11:29
let's save all and bring back to the
11:31
application check
11:32
now okay it's center screen it's coming
11:35
as a center screen okay so here I'm
11:37
going to make this one as a
11:41
uh this one you have to okay this is
11:44
enough
11:45
You have to the sizes if you feel it is
11:48
too much small here also you can make
11:51
this one application
11:54
uh your
11:57
call
11:59
eight look like this control s and let's
12:03
check so it is align it is make it align
12:06
also here now what I'm going to do here
12:09
simply you have to do it here align you
12:11
have to put it like this if container
12:14
you have to do second part you have to
12:16
put it over Here here also we have write
12:18
it as a
12:22
call
12:24
empty 7 this we have make some
12:32
different okay now here it's working
12:35
okay so here first you have to
12:37
understand how to if you want to get
12:39
this one as center screen you have to
12:40
you having a you have to must understand
12:42
this all things you just copy this and
12:44
paste it over here this also You you
12:46
make it as center
12:48
screen okay
12:51
how okay how to make the center screen
12:53
of there are many student asking how to
12:56
make the center screen you have to make
12:57
it as D flags justify content this is
13:00
how the in bootstrap you have to make it
13:02
as center D flags okay and content
13:05
center okay that's how we have make it i
13:08
hope you guys understood the things well
13:10
thank you for watching