Up next in 10
Build Laravel 12 React Project from SCRATCH in 2025! | Part 5
393 views
Apr 26, 2025
Build Laravel 12 React Project from SCRATCH in 2025! | Part 5 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 tutori channel let
0:03
me continue our laral to along with the
0:06
react tutorial step by step in our last
0:09
video we have completed the uh part of
0:12
header section so we have to make the
0:15
links you have to implement the links so
0:18
how to implement the links
0:21
so we have to go to that layout page
0:24
this is the layout page we have to link
0:27
is must in our last video we have pro
0:30
when you type about us we have to go to
0:32
the respective page you have to type the
0:34
contact go to the respective page so
0:37
here here we have to make the links for
0:39
each pages so we can easily click it
0:41
instead of going like this way this is
0:43
not a good way so how to make it the
0:45
thing is it's simple so let's go to your
0:49
layout page this is a layout page layout
0:52
page it is nothing but a template so
0:54
this template is not changed each and
0:56
every pages this template is resided
0:59
okay the uh the middle of the container
1:02
should be changed each and every pages
1:04
as you visit okay so here we have to
1:06
make it as uh we have type
1:13
HRF HRF you have to write a URL
1:21
you type the
1:30
URL you have to in in our you type it
1:34
forward slash forward
1:36
slash after that close
1:40
it closes
1:42
slash okay you have to forward slash and
1:47
close it this we have make the URL in
1:50
Lar okay so here we have to type
1:55
home we have to close with the HR
1:59
tag a
2:03
tag you have to implement this one
2:07
asset
2:13
class
2:16
ETN btn
2:21
warning the same thing you have just
2:23
copy and paste it okay this one should
2:25
be about
2:33
us about
2:36
about it goes to the copy this
2:44
context uh you have to make this one as
2:47
the button styling this a class this is
2:49
a bootab you already implemented you can
2:52
go to the
2:53
bootstrap button you just type bootstrap
2:56
five button you can have a style here
2:58
whatever style you are getting here only
3:00
you have to implemented this class
3:02
primary mean this is primary secondary
3:05
success danger everything you have to
3:08
get like
3:13
this okay you can get it like this okay
3:16
so that's how we have implemented over
3:18
here class btn warning our second one is
3:21
a uh warning second one is we have to
3:24
write as
3:25
primary so primary you type as primary
3:28
this contact
3:32
us okay you have to make the style when
3:35
you type the URL/about us go to that
3:38
particular page if a contact go to the
3:41
contact us page okay it's a contact
3:44
page that's a that's way we are driving
3:48
the URLs so this is not if we are using
3:51
that let's check it how the process is
3:54
working yeah it's coming here it's
3:57
coming it's not we have we have we
3:59
didn't identify this one we have to make
4:01
this one see uh you have to write this
4:03
one as a
4:04
danger different URL you have to
4:07
different URL you go through the styles
4:09
whatever style you have to put this one
4:11
secondary you have to put secondary or
4:13
info you can secondary is good put the
4:16
secondary now let's I have to make three
4:20
different button styles button
4:23
colors here it's three different colors
4:27
okay there this one so here if you have
4:29
click on this home it's home if you
4:31
click on about us but it's not called
4:34
the about not working so when you are
4:38
here you can go to that link particular
4:41
link we are click about us the this URL
4:44
this you are not it is because this one
4:47
match with this
4:48
route it's coming about test like this
4:51
okay so you have to make this one here
4:53
as about
4:55
us if the URL is matching it's go to
4:58
that particular URL so it's coming about
5:01
us about us about us it's okay not about
5:06
okay the about us when you click this
5:08
one it goes the about us URL but this
5:10
about us the routes which is taking
5:13
about us URL
5:14
We have to write it as a return view
5:16
here return view about okay type return
5:20
view about here contact if you coming
5:24
contact it return view contact the
5:27
return view contact page return view
5:30
contact return view about page okay you
5:33
don't type the blade this is the
5:36
extension lar extension don't type the
5:38
extension you have keep only the about
5:40
name only it works it properly works now
5:43
let's file save all and bring back to
5:46
the application and check it it's a
5:47
simple website here about context so if
5:51
you want to put something else the dummy
5:54
text of
5:55
about dummy
5:58
text I'm going to put some dummy
6:01
text if you want to now you have a clear
6:05
idea so how the process work I just copy
6:08
this
6:09
copy go to the about page this is
6:12
section okay so you have to put down
6:14
paragraph inside the paragraph you have
6:16
type paragraph inside the paragraph I'm
6:19
going to paste on
6:20
Control S to
6:22
save this one
6:26
let's go here this a context about us
6:30
here there is a paragraph now we have
6:32
clear idea how the process work so home
6:35
so home also we have to the home
6:39
so home page so here home page also we
6:41
have a home page so home
6:43
page so home page so home homepage also
6:46
we have didn't add anything else over
6:48
here so home page also we have this one
6:51
also we have to get rid of this homepage
6:53
instead of that we have write it over
6:54
here uh this one
6:57
about so all the things copied welcome
7:00
page also put it here layout layout here
7:04
also you have to write
7:05
a at
7:08
home
7:12
welcome to
7:18
to sigma
7:21
m to some other company name I Just type
7:26
whatever uh name come into your mind i
7:29
just put it for the example so
7:31
let's post it here now let's say check
7:35
it type it here it's gone to the
7:37
homepage click on about successfully go
7:40
to the uh contact us we go to the home
7:43
page now the link has been working
7:45
successfully okay the links are working
7:48
successfully we exported the simple
7:50
website we have made in the Okay very
7:53
simple website you have to meditate i
7:55
hope you guys you understood so far
7:58
clear okay that's you have so far you
8:00
have clear understand about the linking
8:02
part this is this linking part is very
8:04
important stuff okay you must we are
8:08
familiar with this one before you are
8:09
driving to the controller section if you
8:12
if you study this well now then only you
8:14
will know into the controller part okay
8:16
thank you for watching