Laravel React JS Axios Post Request Example Tutorial

Step 1 : Install Laravel

Here, we will get fresh Laravel 6 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Add Route

In this step, we will create one post route and return all post form data. So, let’s add new route on that file.

routes/web.php

Route::post('formSubmit','PostController@formSubmit');

Step 3: Add New Controller

in this step, now we have create PostController with formSubmit methods, in this method we will return request data. So let’s create controller:

app/Http/Controllers/PostController.php

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
class PostController extends Controller
{
    /**
     * success response method.
     *
     * @return IlluminateHttpResponse
     */
    public function formSubmit(Request $request)
    {
    	return response()->json([$request->all()]);
    }
}

Step 4: Install Laravel UI

In this step, we need to install laravel ui package of react js basic format with laravel 6. so let’s install package by using following command:

composer require laravel/ui

Now we need to install react js basic setup using following command:

php artisan ui react

Step 5: Write on app.js and Components

Here, we will write code on app.js and then we will create react js components, So let’s create both file and put bellow code:

resources/js/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */
require('./bootstrap');
/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
require('./components/Example');

resources/js/components/Example.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import axios from 'axios';
class Example extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: '',
      description: ''
    }
    this.onChangeValue = this.onChangeValue.bind(this);
    this.onSubmitButton = this.onSubmitButton.bind(this);
  }
    onChangeValue(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
    }
    onSubmitButton(e) {
        e.preventDefault();
        axios.post('/formSubmit', {
            name: this.state.name,
            description: this.state.description
        })
        .then(function (response) {
            console.log(response.data);
        })
        .catch(function (error) {
            console.log(error);
        });
        this.setState({
            name: '',
            description: ''
        })
    }
  componentDidMount () {
  }
  render () {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>
                        <div className="card-body">
                            <form onSubmit={this.onSubmitButton}>
                                <strong>Name:</strong>
                                <input type="text" name="name" className="form-control" value={this.state.name} onChange={this.onChangeValue} />
                                <strong>Description:</strong>
                                <textarea className="form-control" name="description" value={this.state.description} onChange={this.onChangeValue}></textarea>
                                <button className="btn btn-success">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
  }
}
export default Example;
if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

Step 6: Update welcome.blade.php

At last step, we will update our welcome.blade.php file. in this file we will use app.js file and use it, so let’s update.

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel React JS axios post - ItSolutionStuff.com</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <h1>Laravel React JS Axios Post Request Example Tutorial</h1>
        <div id="example"></div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

Now you have to run below command for update app.js file:

npm run dev

Now you can check our example and also check demo and download free code.

You can download code from git: Download Code from Github

I hope it can help you…