Create Your First React Component In Laravel from Scratch

Hello artisan, in this laravel react tutorial i am going to show you how you a basic tutorial that how we can run our first react component in our Laravel app. You are very beginner to Laravel and you don't know how to work with react js in Laravel. I am here to show you step by step that how we can create our first dynamic react component.

So if you don't know how to create react component in Laravel then this laravel 8 react tutorial is for you. From this laravel 8 react tutorial you will learn basic of react js that how react virtual dom works to render a component.

So let's start laravel react native tutorial. I will show you from scratch so that you can learn it better. So let's start.

Step 1: Download Laravel

First, in this step we need to open Terminal and run the following command to create a fresh Laravel project:

composer create-project laravel/laravel react-js

Step 2: Install Laravel UI

In this second step we need to install Laravel ui. Because of we have to install react js in our Laravel app, for that we need to install Laravel ui package. 

composer require laravel/ui

After running that command, run below command to install react

php artisan ui react

//then run

npm install

//then


npm run watch

Step 3: Create Route

Now in this step we need to see our view file where we will render our react component. So create route.

routes/web.php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Step 4: Create React Component

In this step we have to create our react component. So create a react component like that:

resources/js/components/Example.js

Step 5: Create Blade File

Now in the final we need a blade file to render our react component. So let's create our welcome blade file.

resources/views/welcome.blade.php

Now visit the following url afer running the command php artisan serve

Read also: How to Get Multiple Selected Values of Select Box in Laravel

Hope it can help you.