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.