Hello artisan, in this brand new tutorial i am going to discuss about Laravel react js axios post request example. In this laravel axios post request example react native tutorial i will show you real time validation. In this react js laravel post request tutorial you will learn how to validate email using Yup npm package and also how to validate password and confirm password.
I will simply create a formik form and i will send a axios post request to the server and show you how we can get data form our laravel controller. So in this tutorial you will also learn how to use formik with Laravel to handle react form easily.
If you don't know about react formik, Yup and don't know how to send post request to server in react axios laravel, then this example tutorial is for you. In this laravel react axios post example i will give simple example of react js axios post example with laravel 8.
I will show you step by step and from scratch so that you can learn how to send post request using axios in react with Laravel. I will create a simple form with name
, email
, password
and confirm_password
and i will validate them before send post request to the server. Let's start and see the preview from below image.
Step 1: Download Laravel
Here, we will get fresh Laravel 8 application using bellow command, So open your terminal OR command prompt and run bellow command to get fresh laravel app:
composer create-project laravel/laravel react-js
Step 2: Install React
In this second step step we need to install Laravel ui for installing react in Laravel. Because we are going to create laravel react js axios post request example. So install it by the following command.
composer require laravel/ui
After running the above command, run below command to install react
php artisan ui react
//then run
npm install
//then
npm run watch
In this step we need to install formik
because we are going to handle react form using formik
. So install it via command line.
npm install formik --save
Now we need to install Yup
cause we are going validate our form data using Yup
. So install it via command line.
npm install -S yup
Step 3: Create Route
Now in this third step we need to see our view file where we will render our react component to create laravel react axios post request example with formik. So create route like below. Here we need to route, one for see view and another for send post request to server.
routes/web.php
use Illuminate\Http\Request;
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');
});
Route::post('/', function (Request $request) {
return $request->values;
});
Step 4: Create React Component
Now in this fifthe step we have send axios post request to server and i am going to use axios to send post request. See the below code to understand.
resources/js/components/Example.js
And we need to create another component for showing real time error message. So create it like below:
resources/js/components/TextError.js
Step 5: Create Blade File
All are set to go devs, now in the final step we need a blade file to render our react component and see how to works react axios post request work. 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
And if you fill up this form and submit then you will see the following data:
{
name: "Mahedi Hasan",
email: "mahedy150101@gmail.com",
password: "123456",
confirm_password: "123456"
}
Hope it can help you.
#laravel #laravel-8x #axios #react-js