Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week
Source: dev.to
Build a Basic CRUD App with Laravel 9 and React.js
https://dev.to/sureshramani #what-is-reactjs What is React.js? https://reactjs.org/?ref=techvblogs.com is a free and open-source front-end JavaScript library for building user interfaces based on UI components.
In React.js you can create an interactive UI by combining the different components together.
So, in this post, we will be covering both the frontend app using React.js and also will create the RESTful APIs in the Laravel 9.
In the create.component.js file, add the following code: import React, { useState } from "react"; import Form from 'react-bootstrap/Form' import Button from 'react-bootstrap/Button' import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; import axios from 'axios' import Swal from 'sweetalert2'; import { useNavigate } from 'react-router-dom' export default function CreateProduct() { const navigate = useNavigate(); const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [image, setImage] = useState() const [validationError,setValidationError] = useState({}) const changeHandler = (event) => { setImage(event.target.files); }; const createProduct = async (e) => { e.preventDefault(); const formData = new FormData() formData.append('title', title) formData.append('description', description) formData.append('image', image) await axios.post(`http://localhost:8000/api/products`, formData).then(({data})=>{ Swal.fire({ icon:"success", text:data.message }) navigate("/")}).catch(({response})=>{ if(response.status===422){ setValidationError(response.data.errors)}else{ Swal.fire({ text:response.data.message, icon:"error"})} })} return (
In React.js you can create an interactive UI by combining the different components together.
So, in this post, we will be covering both the frontend app using React.js and also will create the RESTful APIs in the Laravel 9.
In the create.component.js file, add the following code: import React, { useState } from "react"; import Form from 'react-bootstrap/Form' import Button from 'react-bootstrap/Button' import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; import axios from 'axios' import Swal from 'sweetalert2'; import { useNavigate } from 'react-router-dom' export default function CreateProduct() { const navigate = useNavigate(); const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [image, setImage] = useState() const [validationError,setValidationError] = useState({}) const changeHandler = (event) => { setImage(event.target.files); }; const createProduct = async (e) => { e.preventDefault(); const formData = new FormData() formData.append('title', title) formData.append('description', description) formData.append('image', image) await axios.post(`http://localhost:8000/api/products`, formData).then(({data})=>{ Swal.fire({ icon:"success", text:data.message }) navigate("/")}).catch(({response})=>{ if(response.status===422){ setValidationError(response.data.errors)}else{ Swal.fire({ text:response.data.message, icon:"error"})} })} return (
Newsletter
ToastMail
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners
Laravel/PHP Careers