Hello Devs,


In this tutorial, we are going to see example of react js axios post example with laravel 6.

Follow this step by step guide given below:




Step 1 : Install Laravel

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



Step 2: Add Route routes/web.php

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



Step 3: Add New Controller app/Http/Controllers/PostController.php

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class PostController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function formSubmit(Request $request)
    {
    	return response()->json([$request->all()]);
    }
}


Step 4: Install Laravel UI

composer require laravel/ui

Run this command:

php artisan ui react



Step 5: Write on app.js and Components

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 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 - Rathorji.in</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>


Run this command:

npm run dev


I hope this example helps you.