Laravel React Js Axios Post Request Example with Formik

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.